Design with native WordPress blocks, write your own HTML, CSS and JavaScript, or let your AI agent draft sections through Site Agent. The canvas, the source editors and the live preview work together, and the source stays in WordPress.
Most of the high-end pages on gauravtiwari.org, including this one, are built with it.
Try it in your browser first: no signup, a private WordPress workspace. Or see what you can build.
The live demo opens the actual plugin in a fresh, private WordPress workspace with sample content ready to edit. No signup, no download.
Opens demo.gatilab.com in a new tab. The first launch can take a minute.
Page Blocks BuilderLive demo workspace Choose where to start The Visual CanvasA page made from native blocks. Select the headline and make the first change.The Code EditorsA code page with a working calculator. Change the source and watch it respond.The Reusable LibraryA shared announcement block. Compare a linked placement with a copy. Launch the Visual Builder Build on the page, refine the source and move between both as the work changes. Version 4.2 adds the newest piece: your own AI agent, working through the same safe save path.
Add a pricing section to the launch page.
contextpage.sectionspage.set_sectionstagedVersion 4.2
With Site Agent 0.4 or later, a connected agent such as Claude, ChatGPT or Cursor gets the Page Blocks skill automatically. It can draft pages, edit sections and manage the library.
Version 4.0
Native groups, headings, images and buttons, edited in place with type, color and spacing controls.
Version 4.0
Keep blocks in flow, or drag and resize on desktop with snapping guides. Freeform stacks in reading order at 768px and below.
Version 4.0
Drag files from your desktop into the canvas. They upload to the Media Library as native Image, Video, Audio or File blocks.
Version 4.1
Convert supported sections in either direction, with undo. Unsupported or ambiguous markup stays code.
Version 4.1
Move an element or a whole section with the shortcuts you already use, or the editor clipboard.
Version 4.1
A page template with no theme header or footer, on classic and block themes. WordPress scripts and styles still load.
A page can do more than display content. Pick an example, use it, switch to a phone width, then open the same source in the playground and make it your own.
These run in sandboxed frames with sample content. Accounts, payments and stored data need the right WordPress backend or external service.
Every component below runs in this page, built from plain HTML, CSS, SVG and a few lines of JavaScript inside Page Blocks. Pricing, charts, configurators, bookings and forms are all sections you own and can reuse.
HTML CSS JS
$15per month
$40per month
Billed monthly. Sample prices.
SVG CSS JS
Hover or focus a point. Sample data.
SVG CSS
SVG JS
Coral, 8 oz$14
HTML JS
Pick a day and a time.
HTML JS
Type to filter. Use the arrow keys and Enter.
SVG CSS JS
Start from a native section or paste code you already have.
Switch modes per section. The source stays yours.
Preview every width, check the cost, then save.
Step 1 of 3
HTML JS
Until the new year
Calculated in the visitor’s own timezone.
HTML CSS JS
Demo form. Nothing is sent or stored.
Choose an example, edit the HTML or CSS and watch the preview change. Update the JavaScript and select Run Code to try its behavior.
HTML and CSS update as you type. Cmd/Ctrl+Enter runs JavaScript.Runs in your browser only. Nothing is saved to WordPress.
Most of the high-end pages and posts on gauravtiwari.org are built with Page Blocks Builder, including the page you’re reading. It isn’t a demo plugin. It carries a real site’s homepage, service pages, product pages and long-form resources.
More than 430 published pages, posts, product pages and study notes on gauravtiwari.org use Page Blocks.
//services//services/web-development-services//work//wordpress-plugins//emdash-plugins//math-puzzles//product/gt-extensions-for-fluentcart/Start in the mode that suits the section. Selecting a visual block opens Visual mode; selecting a code section brings its editors into view.
Use native WordPress groups, headings, paragraphs, images and buttons, edited directly in the visual canvas.
Keep HTML, CSS and JavaScript in separate CodeMirror editors beside the preview. Existing code sections keep their workflow.
Shortcuts follow focus: typing and undo act on the editor you’re in, while section commands apply to the page.
Site Agent is a free plugin that connects AI clients such as Claude, ChatGPT and Cursor to your site over MCP, signed in with OAuth. With Site Agent 0.4 or later and Page Blocks Builder 4.2, a connected agent finds the Page Blocks skill on its own. No extra setup.
Add a three-plan pricing section after the features on our launch page. Keep it as a draft.
contextRead the site, plugin version and theme positionspage.sectionsListed 6 sections on /launch/page.sectionRead section 3, Featurespage.set_sectionInserted Pricing after FeaturesStaged as autosaveChanges to a published page are saved as your autosave unless you ask the agent to publish.
Every write carries the hash from the latest read. If the page changed in between, the save is refused.
Agents can’t turn on PHP execution, and sections that already run PHP stay editable only in the block editor.
Section markup goes through WordPress’s block serializer, so quotes, — and script tags stay intact.
contextpage.sectionspage.sectionpage.set_sectionpage.createsection.markupblocks.listblocks.createblocks.updateblocks.renderCommands run as the WordPress user the agent is connected as, through gt_pb_agent(). Library commands also work over the pbb/v1 REST API with an application password.
A section can belong to one page or stay connected to a shared library block. Choose the ownership that fits the job.
A copy is independent. Changing one page’s section leaves the other copies alone.
Use copies for one-off designs. Use linked sections when the same change should reach every placement.
Try the color change, then switch ownership.
Library shortcodes render published blocks only. Keep a shared block in draft while you prepare it, because a linked update can change several live pages at once.
A reusable section can serve a page, a shortcode, a WordPress hook or a theme region. Pick a route to see what it needs.
Use an inline Page Block when the section belongs to one page. Keep blockId at 0 and blockSlug empty so a library reference can’t override its source.
<!-- wp:gt-page-block/page-block {"blockId":0,"blockSlug":"","name":"Contact Section","content":"<section>...</section>","css":"","js":"","phpExec":false} /-->Use the page_block shortcode anywhere shortcodes run. Refer to the block by its ID or slug, and opt into conditions when you want them applied.
[page_block slug="footer-cta"]
[page_block slug="footer-cta" conditions="true"]Set a library block’s position to a WordPress hook, choose its priority and narrow its conditions. The hook has to fire in your theme or template.
position: wp_footer
priority: 10
status: publish
conditions:
{ "post_types": ["page"] }Assign the block to a region and have the theme call the helper. A region assignment alone doesn’t add a header, footer or sidebar to a template.
position: region:footer
<?php
gt_pb_region( 'footer', array( 'wrap' => false ) );
?>Narrow placement by post type, page type and post ID. Page types include the front page, singular content, archives, search and 404.
Positioned blocks and theme regions enforce conditions. Gutenberg links use respectConditions; shortcodes opt in with conditions="true".
Values in one group are alternatives; separate groups must all match. An empty rule set is broad, so review it before a site-wide placement.
A published page loads only the styles and scripts its sections need. Choose the delivery for each section and inspect the cost before you save.
These are diagnostics, not a PageSpeed score. Some markup checks need WordPress 6.2 or later.
CSSJS
Use the in-editor assistant with your own provider key, or script the library through REST and WP-CLI. Both respect WordPress permissions.
Connect OpenAI, Anthropic or Gemini to draft or edit section code with Cmd/Ctrl+K. Bring your own API key; provider usage is billed separately. Review generated HTML, CSS and JavaScript before you save, since requests can include section content and theme context.
| Method | Route | Purpose |
|---|---|---|
| GET | /wp-json/pbb/v1/blocks | List and search library blocks, with status and pagination filters. |
| GET | /wp-json/pbb/v1/blocks/{id} | Read one library block and its saved fields. |
| POST | /wp-json/pbb/v1/blocks | Create a block. Use draft status and an empty position while you prepare it. |
| PUT / PATCH | /wp-json/pbb/v1/blocks/{id} | Update supported fields on an existing block. |
| POST | /wp-json/pbb/v1/blocks/{id}/duplicate | Create an independent duplicate. |
| DELETE | /wp-json/pbb/v1/blocks/{id} | Move a block to trash; permanent deletion is separate. |
| GET | /wp-json/pbb/v1/blocks/{id}/render | Rendered output, subject to the plugin’s rendering rules. |
Inspect the library or preview a legacy migration. Sample slugs must match real library items on your site.
wp gt-pb block list --status=publish --format=json
wp gt-pb block get footer-cta
wp gt-pb migrate-blocks --dry-runedit_posts; writes need manage_options.php_exec and js_location; Gutenberg attributes use phpExec and jsLocation.gt-page-block/page-block[page_block slug="footer-cta"]gt_pb_region()gt_pb_agent()
Free GPL-2.0-or-later
The visual canvas, code editors, reusable library, optional AI and the Site Agent skill are all included.
Checkout gives you a free update key for automatic updates. AI-provider charges are separate.
Complete the free checkout and download the plugin.
Activate the plugin and allow the post types you want to edit.
Insert a Page Block in Gutenberg or open the visual builder, then check the published result.
Install Site Agent 0.4+ and your AI client gets the Page Blocks skill.
Requires WordPress 6.0+ and PHP 8.1+. Source and releases on GitHub
Everything here is quick to set up, light on your pages and built to do one real job well. I only charge for the tools that can make you money. The rest are free.
I design, build and support every product on this site myself. When you email me, the person reading it is the one who wrote the code.
I’d rather ship one tool you’d miss if it vanished than ten that sit in your plugin list doing nothing.
18+years building websites, plugins and stores, since 2008
Switch a feature off and it loads nothing. What does load stays small. A tool that replaces a plugin shouldn’t make your pages slower.
Clear screens, sensible defaults and settings written in plain English. If you need a tutorial for the basics, that’s my design mistake, not yours.
Full keyboard support, visible focus, proper labels and text you can actually read. When more people can use your store, more people can buy from it.
My paid tools help you sell, renew, license or convert. If one just sits in your stack, I haven’t done my job.
I won’t charge for anything that can’t make you money. The free tools get the same care as the paid ones, down to the last setting.
Editing choices, agents, compatibility and the practical limits.
Saved source stays in WordPress, but Page Blocks and library shortcodes need the plugin to render. Ask a product question.
Yes. The visual canvas, code editors, library, Site Agent skill and the other builder tools work without a license key. The free checkout gives you an update key for automatic updates. Optional AI uses your own provider API key, billed by the provider.
No. You can build supported visual sections with native WordPress blocks. Use HTML, CSS and JavaScript when you want custom layouts, calculators or other interactions, or bring code from another tool or your AI agent.
Yes, with Site Agent 0.4 or later connected. The agent can draft pages and edit sections, but changes to a published page are staged as your autosave unless you ask it to publish. It can’t turn on PHP execution, and a save is refused if the page changed since its last read.
Yes. Both sit on the same page, and selecting a section switches to its editing mode. Conversion is an explicit choice for supported content. Unsupported or ambiguous markup stays code, and converted native block code needs 4.1.0 or later.
Yes. The plugin works with classic and block themes. Keep the theme’s page shell or choose the Blank canvas template for a page without a header or footer. Named theme regions need matching gt_pb_region() calls in the theme.
Yes. Existing code sections, linked library references and legacy Page Block names remain supported, and version 4 doesn’t convert them automatically. Keep the code workflow and add visual sections when you need them.
You can build the interface and its browser interactions in HTML, CSS and JavaScript, like the components above. Accounts, payments, database storage and server processing need the right backend or integration. Optional PHP needs explicit site-level and per-block permission.
Start with a visual block, a piece of code or a prompt to your AI agent.