The next phase of Gutenberg includes bringing the block editor to the Widgets screen. But we’re building websites that need this functionality right now.
I’ve come up with a simple solution for using the block editor outside of the main content area, in contexts where we used to use widget areas.
Register a Block Area post type
I create a custom post type called “Block Area”, and each unique block area is a post. To display the block area, we query for the
block_area post with a specific slug and display its contents.
if( function_exists( 'ea_block_area' ) ) ea_block_area()->show( 'after-post' );
Once WordPress core adds block-based widget areas, I can migrate the block content from my
block_area post type to whatever WordPress core uses, and update the
show() method to use
dynamic_sidebar() or a new function in WP core.
I’m working on a website with an “After Post” block area for blocks that appear at the end of every article.
- The “Related Posts” block is Display Posts Shortcode using a custom layout.
- Subscribe is a custom ACF block I built called “Feature Box” which includes a WPForms form (here’s how to display the form on one line)
- Meet Our Community is also Display Posts using a custom layout
- Donate is another instance of the Feature Box block. Both Donate and Subscribe are saved as reusable blocks for use elsewhere in the site.
Code for Block Areas
I recommend including this in a core functionality plugin. You can then use the
ea_block_area() function in your theme after checking if the function exists.