# 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](https://www.advancedcustomfields.com/resources/blocks/), [MB Blocks](https://docs.metabox.io/extensions/mb-blocks/) and [Pods Blocks](https://docs.pods.io/code/blocks-api/) features, so if they're available, you can transform any *Layout* into a Gutenberg block without the need for [React knowledge](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/).

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](https://www.advancedcustomfields.com/resources/blocks/), [MB Blocks](https://docs.metabox.io/extensions/mb-blocks/) or [Pods Blocks](https://docs.pods.io/code/blocks-api/) 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. 

{% hint style="warning" %}
Note: Advanced Views Pro extends the Blocks feature of your meta fields vendor. 
{% endhint %}

It means in order to use the Custom Gutenberg block feature for *Layout* you must have:

*  an active [ACF Pro](https://www.advancedcustomfields.com/pro/) (if you use ACF fields in your *Layout*)
* an active [MB Blocks](https://docs.metabox.io/extensions/mb-blocks/) addon (if you use MetaBox fields in your *Layout*) 
* an active [Pods](https://wordpress.org/plugins/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. 

{% hint style="info" %}
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](https://docs.pods.io/code/blocks-api/).
{% endhint %}

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

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FR07YkgcEz1rTXTusa3jP%2Fadd-g-block-to-post.jpg?alt=media&#x26;token=5896bb99-847b-4180-b7f9-1fdb26809cd8" alt=""><figcaption></figcaption></figure>

**Fill the fields** in the block you’ve just inserted.&#x20;

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F3jeUuEj4Dbenhnodyp2K%2Ffill-fields.jpg?alt=media&#x26;token=d45cc241-bf9d-4b56-aa43-8af712259f86" alt=""><figcaption></figcaption></figure>

Click on **Publish** to save your post, page or CPT item.&#x20;

**View** the page to see the result.

{% hint style="warning" %}
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.&#x20;
{% endhint %}

## See it in action

[Visit the Playground](https://playground.wordpress.net/?blueprint-url=https://wplake.org/playground/advanced_views_lite-latest-101.json) and Turn any *Layout* or Post Selection into a Gutenberg block then add it to a page.