How to Use a Gutenberg Shortcode Block

How to Use a Gutenberg Shortcode Block • WPShout

WordPress shortcodes might feel like a relic from history, but Gutenberg block’s latest technology makes utilizing shortcodes easier than ever. Read on to quickly learn how to use the WordPress Classic editor’s shortcodes by making use of the Gutenberg shortcode block.

What are WordPress shortcodes?

Shortcodes were built to take out the manual management of particular features on your website. For instance, if you wanted to display the most recent posts added to your website, it would be a lot of work to add, revise, and update your data regularly to ensure accuracy. That’s where shortcodes come in—they can do this for you.

Shortcodes are a small piece of code, indicated by [brackets], that can can manage specific functions without your input. WordPress shortcodes can be used on pages, posts, and other content types.

In essence, shortcodes are a shortcut to displaying dynamic, changing content on your webpage. And as soon as you learn how to use a Gutenberg shortcode block, you’ll realize you’ve uncovered a shortcut to a shortcut!

4 Steps to Use the Shortcode Gutenberg Block

1. Find the shortcode for the plugin function.

You will want to have the shortcode for the dynamic content on hand and ready to go. In this video, I crosscheck a Ninja Forms article to confirm that their shortcode is [ninja_forms id=1]. You will want to have the relevant information handy for your target content!

2. Search “Shortcode” when adding a new block to Gutenberg.

Surprise, surprise, there is a dedicated Gutenberg block for shortcodes! It can be found by manually searching “shortcode” when adding a new block.

3. Paste the shortcode into the box.

All it takes is a quick Command / Ctrl + V and voila. Be sure to copy and paste all elements of the shortcode, including the brackets (they’re essential). Save your draft and select preview to see if it is firing correctly.

4. Pro tip: You can do this in a Gutenberg paragraph block, too.

If you prefer to insert your WordPress shortcode directly into a Gutenberg paragraph block, go for it! So long as you maintain all of the elements, your shortcode should still fire correctly, with or without the dedicated Gutenberg shortcode block.

Video Transcript

This is going to be a quick summary about what we call shortcodes in WordPress, plus how you can use shortcodes in the Gutenberg AKA Block editing. First, I need to give a quick history if you’re new to all of this. 

Before we had this cool block editor where I could do a nice thing like click here and be like, oh I want this cool Ninja Form in, then select the form I’ve already got to put it in there, we used to have to use this kind of antiquated technology called a shortcode. 

The way a shortcode worked is that I put square brackets into the text of my post somewhere, I’ve approximated it here with this p tag, and then I might have to pass on some other parameters to that short code. What



This article was written by David Hayes and originally published on WPShout.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top