How to add shortcodes to Gutenberg

Shortcode is one of the favorite features of WordPress. It offers flexibility to place elements anywhere. What is shortcode in WordPress? A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Think shortcode is a shortcut implementation on WordPress.

But issues arise when we use shortcodes in a freeform format on WordPress 5. What happened? Well, WordPress has replaced the freeform editor with a brand new concept, a block-based editor starting from version 5.0. It’s called Gutenberg editor. In a nutshell, Gutenberg is an editor that structured from a pile of blocks. Every element in the editor is a block. Heading, paragraph, list, gallery, and many more are a block of their own.

How to implement shortcodes in Gutenberg?

As Gutenberg replaced the legacy freeform editor, it doesn’t mean shortcodes are not work anymore. We have to wrap it shortcode into a shortcode block. Yeah, as simple as that.

How to add shortcodes to Gutenberg  classic editor Articles
shortcode block in Gutenberg

At first, open your Gutenberg editor and then, click the plus button on left side your input area. Then scroll down to widgets block and click the shortcode.

How to add shortcodes to Gutenberg  classic editor Articles

Then input your shortcode in the input field. The format is still the same. put your short code inside a bracked code. For example, [myshortcode].

Although the freeform is not available anymore in the latest WordPress, it doesn’t mean shortcode is not cool. It’s still cool, even pretty cool because your shortcode now is better organized, wrapped in a block.


  1. [rss feed=”” num=”1″] This short code does not work in Gutenberg 5.2. I placed short code as described, but it will not update. Can you tell me why?

Leave a Reply