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 Layout into a Gutenberg block without the need for React knowledge.

We recommend using this method on pages that support Gutenberg for the following reasons:

1. Improved performance Block data is stored within the current Post content and does not trigger additional meta queries, resulting in better performance.

2. Re-usability Unlike meta field groups, blocks can be used multiple times on the same page, enhancing re-usability.

How it works

Every Layout, 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:

1. Creates a new Gutenberg block using the ACF Blocks, MB Blocks or Pods Blocks feature

2. [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.

3. [For MetaBox]: Clones all the chosen MB fields and creates a new MB Group with the Block setting

4. [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 rendered, and block vendor plugin (ACF, MetaBox or Pods) calls our plugin's callback. Our plugin passes data from the Gutenberg block into the Layout template and prints the rendered markup on the page.

All the above happens in the background, which means creating a custom Gutenberg block doesn't require extra work on your side.

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 Layout you must have:

• an active ACF Pro (if you use ACF fields in your Layout)

• an active MB Blocks addon (if you use MetaBox fields in your Layout)

• 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.

How to use it

Go to Edit your Layout.

In the Options tab, select an option from the Register Gutenberg Block dropdown.

Click Update to save your Layout.

Edit your Post, Page or CPT item using the Gutenberg editor.

Insert a new block, selecting your Layout’s block from the list. It’ll have your Layout 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.

View 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 Playground and Turn any Layout or Post Selection into a Gutenberg block then add it to a page.