WordPress Block Editor - Shortcode Block

WordPress Block Editor – Shortcode

WordPress Block Editor - Shortcode Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

***

Shortcode Block – Description

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

Shortcode block.
Add custom elements to your site 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…

Add Block tool - Shortcode block.
Add a Shortcode block to your content using the Add Block tool.

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

Inserter tool - Add Shortcode block.
Use the Inserter tool to insert a Shortcode block into your posts or pages.

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

Shortcode block added to content.
Shortcode block added to content.

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

Shortcode block with shortcode added.
Add a shortcode to your Shortcode block.

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

Example of content generated using a shortcode.
An example of content output from a shortcode using a site map plugin.

info

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.
Shortcode block: More Options - Remove block.
Use the More Options menu to remove a 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

Shortcode block editor.
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.

Shortcode block settings include only:

  • Block description area

Shortcode Block – Additional Info

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

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

Add shortcodes to your content using the Shortcode block.
Use the Shortcode block to add additional elements to your content.

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

***

Print Friendly, PDF & Email

Updated: April 9th, 2023

Terms Of Use | Privacy Policy

Scroll to Top