Skip to content
This repository has been archived by the owner on Nov 6, 2022. It is now read-only.

Creating preview templates

Jump to bottom
Luke Carbis edited this page Feb 21, 2019 · 2 revisions

If you want your block's template to be displayed differently in the WordPress editor's preview (as opposed to the frontend output), you can create a preview template.

The 2 Templates

A single block added 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 editor. This template file is named preview-{block slug}.php and is placed in the same block folder as the main template.

For a block with a slug set to 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 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 editor.

Clone this wiki locally