Page Blocks Builder

Build, reuse, and place custom HTML/CSS/JS sections anywhere in WordPress — through a visual Gutenberg block, a full-page frontend builder, a reusable block library, theme regions, a shortcode, and a REST API. Works with any theme; pairs especially well with a minimal "blank hybrid" theme that delegates its layout to Page Blocks regions.

Originally part of Marketers Delight's Page Blocks dropin (2018–2026, © Kolakube), now a standalone plugin.

Requires: WordPress 6.0+, PHP 8.1+ · Current version: 3.0.0

What's in the box

The Page Block (block editor)

Insert Page Block (category: Page Blocks) into any post or page.

Preview mode (default when the block has content)

• Renders your section in an auto-sizing iframe with the active theme's stylesheet, so the canvas shows what visitors will see.
• Header bar with HTML/CSS/JS/PHP badges and quick actions.
• Responsive presets: desktop / tablet (768px) / mobile (390px).
• Dark-scheme toggle: sets data-theme="dark" inside the preview document (works with themes that support that convention).
• Save to library (admins): promote the inline block to a reusable library block.
• When Execute PHP or wpautop is enabled, the preview is server-rendered, so PHP output previews accurately.

Code mode

• Three CodeMirror tabs (HTML / CSS / JS) with line numbers, code folding, bracket matching, undo/redo isolation from Gutenberg, and Tab indentation.
• Theme class autocompletion: type class="…" in the HTML tab and press Ctrl/Cmd+Space — suggestions are scanned from your active theme's stylesheets.
• Automatic PHP syntax mode when the HTML contains <?php.
• Collapsible live preview pane beneath the editor, re-rendering ~400ms after you stop typing, with the same viewport/dark controls.
• Copy button for the active tab.

Browse library

The block toolbar's Browse library button opens a searchable modal of published library blocks, with two ways to use one:

• Copy code — pulls the block's full code and settings into this Page Block. The copy is independent from then on.
• Link — points this Page Block at the library row (blockId). The code stays in one place and every linked placement updates together.

Linked blocks

A Page Block with a non-zero blockId renders the library row instead of its own attributes, and the editor reflects that:

• The header bar shows the library block's title, ID, and badges, not the block's own (empty) code.
• The preview comes from the library's /render route, so PHP, shortcodes, and wpautop run exactly as they will on the front end.
• The HTML/CSS/JS editors are hidden, and the inspector's settings are read-only — edits there would be discarded at render time.
• Edit in library opens the source block; Change re-points the link; Unlink copies the library code into this block's own attributes and drops the reference.
• A link whose target is missing or unpublished is called out in place, rather than silently rendering nothing.

Blocks migrated from the Marketers Delight dropin arrive already linked, so this is how those sections appear.

Block settings (inspector)

• JavaScript Location: footer (default) or inline.
• WordPress formatting (wpautop): run content through the_content-style formatting.
• Execute PHP code: run PHP in the block's HTML on the front end (see Security).

On a linked block these mirror the library row and are disabled — unlink to control them here.

Visual builder

A full-page frontend builder for editing all Page Block sections of a post in one place:

• Launch from the admin bar on any enabled post type, or directly: /?build=page-blocks&post_id={ID}&pb_nonce={nonce}.
• Sections map 1:1 to gt-page-block/page-block blocks in post_content — Gutenberg remains the source of truth; other blocks are preserved in place.
• CodeMirror editors with Emmet expansion, live preview with your theme's CSS, page-template switching, and frontend-preview handoff.
• Sections linked to a library block round-trip their link and render through it; their editors are locked, since edits there would never reach the front end.
• AI generation (optional): bring your own OpenAI / Anthropic / Gemini API key (Settings page); generate or edit a section's HTML — bundled `