Categories
How It Works

Shortcodes vs Blocks

Thinking about blocks vs shortcodes and what’s coming next.

One of the things that Gutenberg changes for everyone is the concept of shortcodes not being absolutely necessary anymore. 

Shortcodes Today Shortcodes Today

One of the nice things about WordPress is that we can use shortcodes to insert dynamic content into our posts. For example, I could use [ copyright ] and have it echo © 2020. And when you have inline dynamism, that works great.

One of the other cool things you can do is to have an embed like [ embed height="400" width="600"]...[/embed ] to embed a video:

Yes, you could just paste in the video URL, but this is a demonstration of a shortcode as a sort of block. And speaking of blocks…

Top ↑

Blocks Tomorrow Blocks Tomorrow

In Gutenberg (which this post was written with), you can keep using in-line shortcodes and even add a shortcode as a block:

An example of the Shortcode block.

To a degree, that works well. But there are other options with Gutenberg.

First, you can see this in a normal paragraph block. Adding options to the sidebar:

An example of the sidebar editor, with options and the empty additional css class.

This allows you to edit the various options on the right sidebar and, thus, change the customizable aspects of the block. For many shortcodes, you can keep that interface and have everything be perfectly functional. Have a block that shows user information? Put a dropdown for the users on the sidebar, and so on.

Top ↑

Inline Edits Inline Edits

The other options is an integrated block. For example, here’s my example of a review block, with text fields and dropdowns to allow you to edit in situ.

An example of a block with dropdowns in the block itself.

In my opinion, this is a more fluid interface, as you can see example what you’re doing and what it’s going to look like.

Top ↑

How Will You Use The Future? How Will You Use The Future?

There are still hurdles to overcome with Gutenberg, but as we step forward, we’re getting a better look at an integrated editor that gives you a lot of that desired ‘What you see is what you get’ experience.