💙 Reusable blocks, an awesome Gutenberg feature
Reusable blocks is one of my favorite features in Gutenberg block editor.
This feature provides the ability to reuse contents across your whole website. What’s the difference between Reusable blocks and Regular Gutenberg blocks? Reusable blocks are stored in a custom post type called
Reusable blocks also have their own admin screen – though it’s hidden for the moment, you can access it by URL:
You can see an example of that screen in the screenshot on the right.
This admin screen allows you to edit your reusable blocks from a single place, so they are all modified at the same time since all reusable blocks are synchronized.
Brilliant! But what about extending that feature? This is why I created Reusable Blocks Extended, which is now available on WordPress.org plugins repository:
While being one of the Focus leads of WordPress 5.3, I finally found a couple of days to work on that shiny little plugin. Let’s see what’s in the box.
🔎 Introducing my advanced Admin screen for Gutenberg reusable blocks
First, I started by making the Reusable Block Admin screen accessible in WordPress Admin menu.
Then I extended the corresponding screen, by adding some columns:
- Title of the reusable block, with native features like editing, trash and export tool
- Used in: for each reusable block, get the list of all Posts that are using it. Very useful to clean up unused Reusable blocks and to see how many Posts will be modified when you are doing some changes on a reusable block.
- Usage: for each reusable block, get:
- A custom shortcode to use your reusable block everywhere, even on Posts that don’t use the block editor!
- A custom PHP function to implement your reusable block in your theme files/templates.
- A HTML preview to see what your block looks like. This is an experimental feature and it doesn’t work with all themes (for example it works well on Twenty Twenty or Twenty Nineteen, but not on Twenty Sixteen).
- The date the block was last modified.
🛠 Custom PHP functions to use Gutenberg Reusable blocks in your theme/plugins
The plugin provides two functions to use your reusable blocks anywhere you need to, like in your theme or plugins:
reblex_display_block( $id ) where
$id is the ID of your Reusable Block. This function will display/echo your reusable block.
reblex_get_block( $id ) where
$id is the ID of your Reusable Block. This function will return the content of your reusable block.
$my_block = reblex_get_block( 64 ) will put the content of Reusable block with ID
$my_block PHP variable.
On Reusable Blocks Admin screen, you’ll get a pre-filled PHP snippet for each block:
🧷 Custom Shortcode to implement Reusable blocks in your theme/plugins
A shortcode is also available.
will display the reusable block with ID
For each reusable block, you can get a custom shortcode on Reusable blocks Admin screen:
It will provide the same feature than
reblex_display_block() PHP function, but available to non-developers. This shortcode is very useful to integrate reusable blocks into Post types that are not using Gutenberg or in other plugin’s TinyMCE fields.
For example, here is an implementation of a reusable block into Gravity Forms confirmation message:
🔌 Implement Gutenberg Reusable Blocks using Widgets
The plugin also provides a dedicated widget to add Reusable blocks in your widget areas. Just choose the name of your block in the list and it will be displayed on your website!
👇 Last but not least
All your reusable blocks are also listed on your WordPress Admin Dashboard, with a link to the Reusable block screen:
🔗 Download Reusable Extended on WordPress.org
And if you want to support my work on this plugin, feel free to buy me a beer! 🍺🎉
- Whodunit WordPress Agency – my employer, for the time allowed on WordPress contribution 💚
- Émilie Lebrun, for the great banner/icon assets on w.org
🤗 Other Reusable Blocks plugins available on WordPress.org
While it’s the most complete as of today, my plugin is not the only one to extend Reusable Blocks Gutenberg feature. You’ll find them on WordPress plugin repository as well: