Gutenberg Block Editor (Meta Box)
Meta Box has released its Block Exension, which allows you to create blocks without the need to learn React , Webpack and Babel. Using their extension, you can define your Meta Box the way you’re used to, add fields and point to a callback or php template to render the block. You can then add your blocks in the Gutenberg editor.
We just thought it would be a nice feature to point to a Twig Template instead, allowing you to style the rendering of the block from your WP Dashboard, be able to make adjustments and all that in a neatly packed template engine called Twig!
Make sure you have installed:
- Meta Box version >= 5.0.1
- Meta Box Block Extension version >= 1.0.2
- Toolbox version >= 1.1.2
- Timber Library plugin (WP repository)
Define your Block
Define your Meta Box Block as per the documentations description:
Loading the gist-code
Notice that the ‘
render_callback‘ parameter is the same for every new block that you want to be resolved by a twig template.
You need to add a new parameter, called ‘
twigtemplate‘. This needs to be the slug of the template you created or are going to create. You can add ‘.twig’ if you want, but you don’t have to.
enqueue_style‘ is left empty here, because we are going to be using classes from the UIkit framework.
There are 3 variables available to the block which you can use freely:
__blockid__(Integer) unique ID for the block
__block__(Mixed) the data attributes
post(Object) the Timber Post Object information for the current post id (after first save)