Shortcode Still Exists – No Shame in Using It Alongside Gutenberg

We are often blinded by these fancy Block editor that we forgot our root, which is shortcode. It's not a good root, but at least it served us well.

Gutenberg (also knows as Block Editor) is the official drag-n-drop builder in WordPress version 5.0+.

We are often blinded by these fancy Block editor that we forgot our root, which is shortcode. It’s not a good root, but at least it served us well.

In this article, we will discuss when is the right time to use Shortcode in Gutenberg editor.

1. You Need Complex HTML Markup

The job of Shortcode is mostly taken by Reusable Block. But that is only if the markup you need can be made with Gutenberg.

Let’s say your client is a restaurant chain and has an “Outlet” custom post type with “City” taxonomy. You want to be able to show outlets of specific cities.

With shortcode, it’s very simple to do:

For a reminder, here’s how to write custom shortcode:

add_shortcode( 'outlet', 'shortcode_outlet' );

function shortcode_outlet( $atts, $content = null ) {
  // set default attribute
  $atts = shortcode_atts([
    'city' => ''
  ], $atts);

  $html_content = '';

  // Do query args to get 'outlet' post type
  // Loop it and append the HTML markup to $html_content

  return $html_content;
}

2. You Need it Quick

To be honest, this is the primary reason.

If you are developing a theme to sell, then it’s understandable to invest in the time for a custom block. But if it’s a custom theme for a specific client that you will only use in 1 or a few pages, just use Shortcode.

3. You Also Want to Use It In a Widget

Since you can’t put a block in a Widget (coming soon), having a shortcode means not doing double work.

For example, you have a Subscribe Form that you want to put in the content of some Pages and Blog’s Sidebar. With shortcode like [subscribe-form] you can easily embed it anywhere.


Conclusion

Shortcode is still a great tool to have in your arsenal. From my experience, it’s simple enough for clients to understand. The worst thing that can happen is a typo which they will realize after checking how the site looks.

If you want to avoid shortcode but want it quick, the ACF (Advanced Custom Fields) Pro plugin has a feature to create Custom Block.

As always, feel free to ask question or share additional tips regarding Shortcode in Gutenberg 🙂

Default image
Henner Setyono
A web developer who mainly build custom theme for WordPress since 2013. Young enough to never had to deal with using Table as layout.
Leave a Reply