Custom Gutenberg Blocks (Pro)
Benefits
While the Gutenberg editor provides enhanced flexibility, it lacks a proper PHP API for creating blocks with fields.
Advanced Views Pro supports ACF Blocks, MB Blocks and Pods Blocks features, so if they're available, you can transform any View into a Gutenberg block without the need for React knowledge.
We recommend using this method on pages that support Gutenberg for the following reasons: a) Improved performance Block data is stored within the current Post content and does not trigger additional meta queries, resulting in better performance. b) Reusability Unlike meta field groups, blocks can be used multiple times on the same page, enhancing reusability.
How it works
Every View, by default, contains all the necessary info for block creation: chosen fields and display template. When you enable the Gutenberg block option, Advanced Views automatically:
Creates a new Gutenberg block using the ACF Blocks, MB Blocks or Pods Blocks feature
[For ACF]: Clones all the chosen ACF fields and creates a new private ACF Group with them. Sets up the group location to the Gutenberg block created in the first step.
[For MetaBox]: Clones all the chosen MB fields and creates a new MB Group with the Block setting
[For Pods]: Clones all the chosen Pods fields and attaches to the Gutenberg block created in the first step
Then, when you paste the new Gutenberg block and visit the page, the block is rendering, and block vendor plugin (ACF, MetaBox or Pods) calls our plugin's callback. Our plugin passes data from the Gutenberg block into the View template and prints the rendered markup on the page.
All the above happens in the background, which means creation a custom Gutenberg block doesn't require extra efforts from you.
Note: Advanced Views Pro extends the Blocks feature of your meta fields vendor.
It means in order to use the Custom Gutenberg block feature for Views you must have:
an active ACF Pro (if you use ACF fields in your View)
an active MB Blocks addon (if you use MetaBox fields in your View)
an active Pods plugin (for Pods fields; the feature is built-in into the free Pods plugin)
Please keep in mind, that vendor of the Blocks feature must fit the meta fields vendor. For example, you can't use the MB Blocks vendor for ACF fields and visa versa.
If you're using Pods, bear in mind that Pods Blocks have limited support for field types. Check the supported field types on the official feature page.
Step by step guide
Go to Edit your View.
In the Options tab, switch on the With Gutenberg Block checkbox.
Click Update to save your View.
Edit your Post, Page or CPT item using the Gutenberg editor.
Insert a new block, selecting your View’s block from the list. It’ll have your View name as the block name.
Fill the fields in the block you’ve just inserted.
Click on Publish to save your post, page or CPT item.
Visit the page to see the result.
Note: It’s important to use the Gutenberg editor and not the Classic editor or page builder element, as the block generated is only available in the Gutenberg blocks library.
See it in action
Visit the Demo page.
Last updated
