Block Preview Modes

BF Blocks uses server-side rendering (SSR) to display your block in the Gutenberg editor. Editors switch between Edit mode (fields) and Preview mode (rendered output).

Edit Mode

In Edit mode, the block displays its inspector fields. Editors interact with the input controls (text fields, image pickers, selects) to configure the block. The canvas area shows a simplified placeholder representation.

Preview Mode

In Preview mode, BF Blocks makes a server-side render request and displays the actual PHP template output — the same HTML that appears on the published front end. Click the eye icon in the block toolbar to toggle preview mode.

The $is_preview variable

Inside your PHP template, $is_preview is true when the block is rendered in the editor preview. Use this to conditionally render placeholder content or suppress animations in the editor.

Server-Side Rendering

BF Blocks registers all custom blocks with render_callback pointing to your PHP template. This means:

The block output is always generated on the server — no client-side JavaScript required for rendering.
The template has access to all WordPress functions, hooks, and globals.
Changes to your template are reflected immediately on the front end without rebuilding.

Template Variables

Three variables are injected into every template at render time:

Variable	Type	Description
`$fields`	`array`	Associative array of field values, keyed by field key.
`$block`	`array`	Block metadata: name, className, align, anchor, etc.
`$is_preview`	`bool`	true when rendering in the Gutenberg editor preview.

← Field Arrangement & Order Field Types Overview →