This website uses cookies to allow us to see how the site is used. If you continue to use this site, we assume that you are okay with this. If you want to use the sites without cookies, please see our privacy policy.

Get Gutenberg reusable blocks outside the Block Editor

Did you know that Gutenberg Reusable Blocks are stored as a bundled Post Type in WordPress database? Yep they are. You can even access them on the Reusable Blocks hidden admin screen available in example.com/wp-admin/edit.php?post_type=wp_block.

Caption: Reusable Blocks admin screen

If Reusable Blocks are registered as a post type, then they are queryable as well as any post type in WordPress.

So we could easily get them outside of the editor…

Yeah! Looks great, let’s build some cool stuff!

Introducing get_reusable_block PHP function

This function will only get the formatted HTML content of a given Reusable block ID and return it.

Note: I’m prefixing the function with advent_ for the sake of WordPress Coding Standards 😎

function advent_get_reusable_block( $block_id = '' ) {
	if ( empty( $block_id ) || (int) $block_id !== $block_id ) {
		return;
	}
	$content = get_post_field( 'post_content', $block_id );
	return apply_filters( 'the_content', $content );
}

So we can easily get any reusable block content by providing its ID. The following snippet will use get_reusable_block() function to display this block outside the editor (in your footer for example):

echo advent_get_reusable_block( 57 );

Example of advanced use: build a Reusable block shortcode

It’s quite easy to build a custom shortcode using our previous get_reusable_block function:

function advent_reusable_block_shortcode( $atts ) {
	extract( shortcode_atts( array(
		'id' => '',
	), $atts ) );
	if ( empty( $id ) || (int) $id !== $id ) {
		return;
	}
	$content = advent_get_reusable_block( $id );
	return $content;
}
add_shortcode( 'reusable', 'advent_reusable_block_shortcode' );

We now have a brand new shortcode, which can be easily used to display reusable block even in places where the block editor is not available!

[reusable id="57"]

Use cases for this shortcode are various:

  • Custom Post Types without Block Editor enabled (so they are in Classic Editor mode)
  • Text Widget (so reusable blocks can be added in your footer or in your sidebar)
  • Advanced Custom Field (ACF) WYSIWYG editor field
  • Gravity form confirmation message (the message that is displayed to users after filling the form)
  • And even on… websites with Classic Editor plugin! So you can use Gutenberg Reusable Blocks without having it in any of your Custom Post Types, lol 🤪

Here is a plugin that is using this snippet. It also provide a Reusable Block Widget and in provides an extended admin interface to manage and preview reusable blocks:

Merry Christmas, lovely WordPress people! 🎁

About

CTO of Whodunit French web agency, WordPress Core Developer, WP 5.3 Accessibility Focus Lead, and WP Accessibility Team rep.

4 thoughts on “Get Gutenberg reusable blocks outside the Block Editor

  1. Can someone help me to understand this step: “extract( shortcode_atts( array(
    ‘id’ => ”,
    ), $atts ) );”

    it’s (the extract) necessary to get the id from the shortcode right?

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.