WordPress Block Editor – Shortcode

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

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks
• For additional information, see this tutorial: WordPress Plugins Explained

***

Shortcode Block – Description

The Shortcode block lets you insert additional custom elements into WordPress using shortcodes.

How To Use The Shortcode Block

In this section, we’ll cover:

• How to add a Shortcode block to your content.
• How to edit and configure your Shortcode block and block settings.
• How to remove the Shortcode block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Shortcode Block

To add a Shortcode block to your content:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Shortcode block (in Most Used or Widgets section),
  • Add the Shortcode block in the Content Area.
• Type or paste in your shortcode.
• Save, publish, or update your post or page.

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 a Shortcode block…

Or, select a Shortcode block using the Inserter tool in the Content Area.

Either of the above methods will add a Shortcode block to your content.

Now, just type or paste your shortcode into the Shortcode block’s field.

Your post or page should now display the shortcode’s output.

Shortcodes normally require a plugin to be installed on your site. Make sure that the plugin responsible for generating the shortcode is installed and active on your site, otherwise, the shortcode will not output its content.

Editing A Shortcode Block

There is nothing to edit after adding a Shortcode block and entering your shortcode.

Save, publish, or update your post or page to save your settings.

How To Remove A Shortcode Block

To delete or remove a Shortcode block from your content:

• Click inside the Shortcode block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Shortcode block from your content.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert a Shortcode block into a Reusable block.

Shortcode Block Tools, Options & Settings

The Shortcode block includes tools, options, and settings for:

• Shortcode Block Editor
• Shortcode Block Settings

Shortcode Block Editor

The Shortcode Block Editor contains only the following functions:

• Display Block Type (See ‘Shortcode Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• More Options – See How To Use Blocks to learn how to use this section.
• Shortcode Field
  • Type or paste in your shortcode.

Shortcode Block Settings

Shortcode block settings include only:

• Block description area

Shortcode Block – Additional Info

You can convert a Shortcode block into the following block types:

• Columns block
• Group block
• Reusable block

Installing plugins or themes on your site may also add new functionality, options, or settings to the Shortcode block.

Congratulations! Now you know how to use the WordPress content editor’s Shortcode block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.