Native to the Block Editor
Insert Page Block from the Page Blocks category. It is gt-page-block/page-block. Gutenberg stays the source of truth.
A CodePen for the Block Editor.
Build custom WordPress sections with HTML, CSS, and JavaScript. Edit in a live workbench, reuse sections from your library, and keep working in the Block Editor.
$0 forever. GPL. This site runs on it.
Live demo: no signup, your own 2-hour workspace.
- $0
- forever, GPL
- Native
- Gutenberg block
- AI + MCP
- your keys, REST for agents
- v3.0.0
- WordPress 6.0+ · PHP 8.1+
Native block. CodePen‑like UI. AI-ready.
Those three are the product. Agents and MCP clients sit on the same REST surface. Everything else is how you place and reuse the sections.
CodePen-like workbench
HTML, CSS and JS tabs, a live theme-styled preview, viewport presets, and a dark-scheme toggle that sets data-theme="dark".
AI-ready, MCP-ready
OpenAI, Anthropic, or Gemini on your keys. Agents and MCP clients use pbb/v1 with an application password. Off until you connect one.
Try a Quick Code Example.
Edit the HTML, CSS, or JavaScript below to try the preview loop. For the full builder, reusable library, and a real WordPress page, open the live demo.
The Page Block lives in Gutenberg, not beside it.
Insert Page Block into any allowed post type. Preview is the default when the block has content. Code mode is one toolbar toggle away.
Preview mode
- Auto-sizing iframe with the active theme stylesheet
- Header badges for HTML, CSS, JS, and PHP
- Desktop, tablet at 768px, and mobile at 390px
- Dark-scheme toggle that sets
data-theme="dark" - Save to library for administrators
- Server-rendered preview when Execute PHP or wpautop is on
Code mode
- CodeMirror tabs for HTML, CSS, and JS
- Line numbers, folding, bracket matching, Tab indent
- Undo isolated from Gutenberg’s undo stack
- Theme class autocomplete: type
class="then Ctrl or Cmd + Space - PHP syntax mode when the HTML contains
<?php - Copy button for the active tab
Browse library
The toolbar opens a searchable modal of published library blocks. Insert copy pulls the code and settings into the current Page Block.
Inspector settings
JavaScript in the footer or inline. Optional wpautop. Execute PHP is opt-in per block and gated at render.
Rank Math reads it
Page Block content is included in Rank Math content analysis, so the SEO score sees the section you actually ship.
A full-page builder that still writes Gutenberg blocks.
Launch it from the admin bar on any enabled post type. Sections map 1:1 to gt-page-block/page-block in post_content. Other blocks stay in place.
Section list
Drag to reorder. Duplicate, delete, hide, and rename with a double-click. Add a section from the list.
Emmet in HTML
Type section.hero>h1+p and press Tab. Tags, classes, ids, attributes, text, children, siblings, and multiply all expand.
Inline preview edits
Click a heading, paragraph, link, or list item in the preview and change the text without a full reload.
Live patching
Text edits patch the preview. Only structural changes trigger a full iframe reload, so the canvas does not flicker on every keystroke.
Snippets and shortcuts
HTML snippet buttons wrap the selection. Cmd+S saves, Cmd+K opens AI, Cmd+N adds a section. A shortcuts overlay lists the rest.
Export and import
Download sections as JSON. Upload to append or replace. Useful for moving a page between sites without a database dump.
Enabled post types live under Page Blocks → Settings. The builder URL is /?build=page-blocks&post_id=ID&pb_nonce=NONCE on the frontend.
AI-ready and agent-ready. Neither is required.
Keys live in Page Blocks → Settings. Chat requests go from your WordPress site to your provider. MCP and other agents use the same REST API you would call by hand.
What the AI can do
- Multi-turn chat sidebar with persistent context
- Generate or edit a section’s HTML
- Split
<style id="ai-generated">and<script id="ai-generated">into the CSS and JS editors - Send theme CSS variables and utility classes as system context
- OpenAI, Anthropic, and Gemini, with a default model you choose
What it will not do
- It stays off until you add a key
- It does not invent a license or a Pro AI tier
- The plugin does not bundle an MCP server binary. Point your MCP client at
pbb/v1 - Read needs
edit_posts. Writes needmanage_optionsand an application password - You still review the HTML before it ships
A library, not a pile of leftover blocks.
Reusable blocks live in {prefix}gt_page_blocks. The admin screen is a REST-driven card grid. The classic list table is still at ?view=list for bulk work.
Live thumbnails
Each card shows a lazy-loaded, scaled iframe of the block HTML and CSS with your theme stylesheet.
Search and status
Debounced search. Tabs for All, Published, Drafts, and Trash, with counts.
Card actions
Edit, Duplicate, Copy shortcode, Trash. Restore or delete forever from Trash. Chips mark HTML, CSS, JS, PHP, and assigned position.
Build a theme from seven editable regions.
Assign a library block to Header, Hero, Before content, After content, Sidebar, Footer, or 404. A blank hybrid theme can be little more than region calls.
<?php gt_pb_region( 'header' ); ?>
<main>
<?php /* the loop */ ?>
</main>
<?php
gt_pb_region( 'footer', array(
'wrap' => false
) );
?>gt_pb_region( $name, $args )renders published blocks forregion:$name, ordered by priority- Default wrap is
gt-pb-region gt-pb-region--{name}. Pass'wrap' => falseto skip it gt_pb_has_region( $name )is for conditional markup
Or hook WordPress itself
No theme file required. Blocks can attach to core actions, ordered by priority.
wp_head,wp_body_open,wp_footerloop_start,loop_endget_header,get_footer,get_sidebar- Before and After The Content on the singular main query
- Extend the list with the
gt_pb_positionsfilter
Place a section from the editor, a shortcode, or HTTP.
Shortcode
[page_block id="42"][page_block slug="cta-footer"]- Renders a published library block with its CSS and JS settings
- Unpublished blocks render nothing
WP-CLI
wp gt-pb migrate-blockswp gt-pb migrate-blocks --dry-run- Rewrites stored
marketers-delight/page-blockdelimiters togt-page-block/page-block - Does not bump post modified dates
REST API, pbb/v1
Read needs edit_posts. Writes need manage_options. Authenticate with an application password or a REST nonce.
| Method | Route | What it does |
|---|---|---|
| GET | /wp-json/pbb/v1/blocks | List. Search, status, page, per_page up to 100, orderby, order. Totals in X-WP-Total and status headers. |
| POST | /wp-json/pbb/v1/blocks | Create. Title is required. |
| GET | /wp-json/pbb/v1/blocks/<id> | One block. |
| PUT / PATCH | /wp-json/pbb/v1/blocks/<id> | Update fields, including restoring trash via status. |
| DELETE | /wp-json/pbb/v1/blocks/<id> | Trash. ?force=true deletes permanently. |
| POST | /wp-json/pbb/v1/blocks/<id>/duplicate | Copy with a new slug and “(Copy)” title. |
| GET | /wp-json/pbb/v1/blocks/<id>/render | Server-rendered html, css, and js. |
Item fields include id, title, slug, status, content, css, js, js_location, output, php_exec, format, position, priority, created_at, and updated_at. The plugin does not ship a bundled MCP server. If you want an agent in the loop, point it at this API.
Fast by omission. Safe by default.
No front-end runtime
There is no builder framework on the public page. Section CSS is collected into one head style, or written to cacheable files in uploads.
File or inline
Per block, CSS and JS can be inline or written to wp-content/uploads/gt-page-blocks/. JS can sit in the footer or next to the section.
PHP is double-gated
Execute PHP is opt-in on the block. Render also checks gt_pb_can_execute_php. When it fails, tags are stripped, never printed.
- Preview JS runs in an isolated iframe. PHP previews use the same gate as the front end.
- REST writes require
manage_options. AJAX endpoints are nonce-protected. - Only grant block-editing access to people you would trust with a theme file.
- Optional frontend CSS packs: semantic reset, typography, and used-only utility classes.
Came from Marketers Delight. Stays compatible.
The plugin started as the Page Blocks dropin (2018–2026). 2.6.0 renamed the block to gt-page-block/page-block. Existing content keeps rendering.
- The legacy
marketers-delight/page-blockname stays registered server-side - In the editor it appears as Page Block (legacy), hidden from the inserter, with a one-click transform
- Admin migration: Page Blocks → Settings → Tools → Dry run or Migrate blocks
- CLI:
wp gt-pb migrate-blocks [--dry-run] - The rewrite uses exact-name boundaries and does not fire
save_postside effects
Built for people who still want the source.
If you need a drag canvas for clients who never open code, this is the wrong tool. If the page has to outlive the plugin, it is the right one.
Theme developers
Turn a lean theme into editable, versioned regions without locking the site to a builder format.
Agencies
Ship client sites whose sections remain ordinary post_content after you leave.
Solo builders
Keep Gutenberg as the host. Write the section, or draft it with your own AI key and then own the result.
A free page builder without a Pro tier.
One zip. The Gutenberg block, the visual builder, the library, theme regions, REST, WP-CLI, and optional AI.
$0 once, forever
- Native
gt-page-block/page-blockin Gutenberg - CodePen-like HTML, CSS, and JS editors with live preview
- Optional AI with your OpenAI, Anthropic, or Gemini key
- MCP-ready REST at
pbb/v1for agents you already run - Library, shortcode, theme regions, hooks, and WP-CLI
- GPL-2.0-or-later. No seats or renewal emails
- Your sections remain HTML if you deactivate it
Divi Yearly is $89 a year for unlimited sites. Divi Lifetime is $249 once. Elementor Pro is sold as a yearly subscription on Elementor’s public pricing page. This plugin is $0 and GPL. Checked on elegantthemes.com/join and elementor.com/pricing on August 17, 2026. Those products are visual builders. This one is a code workbench native to the Block Editor.
Free checkout. Pick the zip after the order screen. No card required for a $0 product.
Asked before installing, answered straight.
- Is it a native Block Editor block?
- Yes. The block is
gt-page-block/page-blockin the Page Blocks category. The visual builder writes the same block into post_content. - Is the UI really CodePen-like?
- HTML, CSS, and JS sit in separate editors with a live preview, viewport presets, and a dark toggle. The GitHub tagline is “plain HTML, CSS and JS using CodePen like UI.”
- Do I need AI?
- No. AI stays off until you add your own OpenAI, Anthropic, or Gemini key. Theme CSS context is sent only when you generate.
- Does it come with MCP?
- It is MCP-ready through the documented
pbb/v1REST API. The plugin does not bundle an MCP server binary. Point Claude, Cursor, or any MCP client at that API with an application password. - Will it work with my theme?
- Yes, any theme. Previews load your theme stylesheet. Theme regions are optional one-line function calls.
- What happens if I deactivate the plugin?
- Inline sections are standard blocks in post_content. Library shortcodes stop rendering. The HTML you saved is still in the database.
- Does it slow down the front end?
- There is no front-end builder runtime. CSS lands in one head style tag or in cacheable files under uploads.
- Can blocks run PHP?
- Yes, opt-in per block, then gated by
gt_pb_can_execute_php. When execution is off, tags are stripped, never printed.
Straight talk before you install
This is a code workbench inside Gutenberg, not a replacement for Elementor or Divi. You still write or review the HTML. If you would not trust someone with a theme file, do not give them block-editing access with PHP enabled.
I run this site on it. That proves the workflow, not that every AI draft is ready to publish. Staging still comes first. There is no bundled MCP server in this version. Use REST if you want an agent in the loop.
Hey, I’m Gaurav
I got tired of page builders that own the markup the moment you need to leave. So I built a plugin that stores sections as ordinary HTML in Gutenberg and uses it on this site.
- Building since 2008 · 18 years in public
- WordPress plugins used on more than 10,000 websites
- This site is assembled from Page Blocks, not a locked canvas
Keep the markup. Keep Gutenberg.
A native Block Editor section, a CodePen-like workbench, optional AI on your keys, and MCP-ready REST so an agent can list, write, and render the same blocks.
v3.0.0 · WordPress 6.0+ · PHP 8.1+ · any theme · source on GitHub