Creating Preview Templates

While Gutenberg is in its infancy, there are occasions where you will want the block presented in the Gutenberg editor to be different (simpler) than what is delivered on the front end. To facilitate this you can create a preview template for your custom block.

The 2 Templates

A single block added and configured in the WordPress admin via the Block Lab plugin can have 2 templates. The first is required, and the second is optional. The first template file is required for the block to be rendered on the frontend. This template file is named block-{block slug}.php (Read Displaying Custom Blocks for more details). The second template is an optional preview template that is used only in the Gutenberg editor. This template file is named preview-{block slug}.php and is placed in the same block folder as the main template.

So for a custom block you've added that you've called "Hero", you would have a folder and file structure like:

• blocks
  • block-hero.php
  • preview-hero.php

The block-hero.php template will be used to render the block on the frontend and the preview-hero.php template will be used in the Gutenberg editor.

Building a preview template follows the same rules and uses the same functions as the main template file. the different naming convention (preview- vs block-) is all that is needed by the plugin for it to know which template to use in the Gutenberg Editor.