Meta Box Updates: JSON File Auto-Sync, Render Blocks with Views

A month ago, we released a feature to allow registering a block with a JSON file. You can manually add a JSON file, or use Meta Box Builder to create the block and it will automatically generate the JSON file for you. Today, we're happy to announce that you now can bi-directional sync between the Meta Box Builder and the JSON file to make sure the block settings are the same.

Along with that, we also provide another method to render blocks with MB Views. It will be easier and more convenient compared to creating a new separated template as usual, especially when you are familiar with the MB Views extension. The good part is that you can edit the view right in the Meta Box Builder's UI!

Now, let’s see them in details.

Syncing Block JSON to Meta Box Builder

Previously, when you create a block with Meta Box Builder, you can generate a block JSON file and save it in a specific folder. Whenever you make changes in Meta Box Builder, the block settings will be automatically updated in the JSON file. In other words, it is a one-directional sync from Meta Box Builder to the JSON file.

Now, the reverse syncing also works well.

Any changes you make in the generated block JSON file will be automatically detected. And the plugin will ask you to load the changes and apply/override the block settings in Meta Box Builder.

The ball is in your court now. If you want to update the block following changes in the JSON file, just click on the Override Block JSON button (as shown in the image above). All the changes will be applied to the block settings as you see in the interface of the Meta Box Builder.

Rendering Blocks with Views

The second feature in this update is the ability to render blocks with views, right within the UI of Meta Box Builder!

Previously, in Meta Box Builder, you have three options to render a block: using a PHP callback function, using a template file, or using code. In this update, you'll have another option "View" which helps you render the block with the MB Views extension.

Note: This option appears only when you have MB Views in your plan.

When you choose the View option, there will be another setting below that allows you to choose an available view or create a new one or edit an existing one:

In the case that you want to have a new view for the block, click the + Add View button. A pop-up will appear with the MB Views screen (which is the same with the interface when you use the MB Views as usual). This feature is similar to the add-new feature that we developed before.

The good thing is that you can insert a block attribute by clicking the Insert Field button, the plugin will automatically insert the attribute to the editor.

Pay attention that since fields are attributes of the block, the data will obtain attributes. instead of post. as normal.

The render-with-view feature allows you to insert all the fields, and cloneable fields/groups, as well as select their settings such as output, image size, etc. You also can add some text, div tags, classes, and use the CSS or JavaScript to style the block as a normal view. Everything is the same with creating a template in Views.

Note that to differentiate the view for blocks and other types, the view type is set to "Block":

Blocks rendered with views have no difference than other blocks. We just use views as a rendering engine, instead of using PHP function or template. The block will have a nice preview when editing posts like this:

Please note that this feature requires three plugins: Meta Box Builder, MB Blocks, and MB Views.

Last Words

As we promised, this year, we'll be focusing on improving MB Blocks as Gutenberg is involving so fast in the everyday writing tasks. And these are two big updates we'd like to bring to the plugin. With these updates, we hope you create blocks easier and faster.

Don’t forget to check out the docs for more details of this extension. Let us know what you think in the comments.