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!

Prerequisites

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.

Next, create the resolving Twig template. Pay attention that the Slug is the same as the one set in the Meta Box Block-parameters. Slugs should be WITHOUT the .twig extension.

toolbox_docs-blocks01

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)