WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

Audio Block

WordPress Gutenberg Blocks – Audio

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.


Audio Block Description

The Audio Block lets you add audio files to WordPress via a simple audio player.


(Add Audios to WordPress using the Audio Block)

How To Use The Audio Block

To add an Audio Block:

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select an ‘Audio’ block …

(‘Add Block’ Tool – Add Audio Block)

Or, select an Audio Block in the Content Area

(Add an Audio block from the Content Area)

After inserting an Audio Block, you can add an audio file:

Add An Audio Using Drag & Drop

To add an audio file using drag and drop:

(Add an audio file using drag and drop)

Add An Audio Using Your Web Browser Uploader

To add an audio file using your web browser uploader:

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Audio Block …

(Upload Image button)

This will bring up the ‘Upload Media’ window on your browser. Select an audio from your media files folder and click on ‘Open’ to import the audio into your post/page …

(Upload an audio file to the Audio Block)

Add An Audio From Your Media Library

To add an audio from your media library:

Let’s go through the above steps:

Hover your cursor over the Audio Block and click on the ‘Media Library’ button …

(Media Library upload button)

Select an audio from your media library (or upload one from your ‘media files’ folder) and click on the ‘Select’ button …

(Upload an audio from the Media Library)

The audio file will be added to your post or page …

(Audio file added)

Add An Audio From An External URL

You can add an audio to your post or page from an external URL.

To add an audio from an external URL:

Let’s go through the above process.

After uploading your audio to your storage location and copying its URL, hover your cursor over the Audio Block and click on ‘Insert from URL’ …

(Insert audio from URL)

Paste the audio URL into the URL field and click ‘Apply’ to add the audio into your post or page …

(Insert an audio from URL)

After adding audio files:

How To Edit An Audio Block

(Edit your audio file settings)

To edit an Audio Block:

Changing the alignment of your audio player lets you embed audio files with text and images …

(Change the alignment of your audio player)

Add a caption to help users identify the content of your audio file …

(Add a caption to your audio file)

Remember to update and publish your post or page to save your settings.

How To Remove An Audio Block

To delete or remove an audio block:

(Remove an Audio Block)

Additionally …

Audio Block Tools, Options & Settings

The Audio Block includes tools, options, and settings for:

Audio Block Editor

(Audio Block Editor)

The Audio Block Editor includes tools that let you perform the following operations:

(Audio Block Editor)

Audio Block Settings

(Audio Block Settings)

Audio Block settings include:

(Audio Block Settings)

Audio Block – Additional Info

The Audio Block can be converted into the following block types:

(Change Block Type – Audio Block)


(Change an Audio Block into other block types)


Installing plugins or themes on your site may add new functionality, options, or settings to Audio Blocks.


Congratulations! Now you know how to use the WordPress Gutenberg content editor Audio Block.


"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com