Introduction

  • JNext lesson
  • FSearch lessons
  • EscClear search

GT Page Blocks Builder is a standalone WordPress plugin that gives you a visual, section-based page builder powered by raw HTML, CSS, and JavaScript. Each section you create is stored as a native Gutenberg block (marketers-delight/page-block), so your content stays portable and isn’t locked into a proprietary format.

The plugin works with any WordPress theme. It was originally part of the Marketers Delight theme and has been extracted into a standalone plugin that any site can use.

What It Does

The plugin provides two editing interfaces for creating section-based pages.

Gutenberg Block Editor Integration. A custom “Page Block” is registered in the WordPress block editor. Each block instance holds three code fields (HTML, CSS, JavaScript) and renders them on the frontend. You can add as many Page Block instances as you need, each one representing a distinct section of your page.

Frontend Visual Builder. A full-screen visual builder that runs outside the WordPress admin. It shows a live preview of your page alongside code editors, a section sidebar for managing and reordering sections, and viewport controls for testing responsive layouts. When you save, the builder writes your sections back to the post as Gutenberg blocks.

Who It’s For

This plugin is built for developers and technical content creators who want full control over their page output. If you’re comfortable writing HTML and CSS (and optionally JavaScript and PHP), this plugin lets you build pages without the overhead of a traditional page builder. There are no drag-and-drop widgets, no predefined row/column systems, and no abstraction layers between what you write and what gets rendered.

Key Capabilities

Raw code editing. Each section has dedicated fields for HTML, CSS, and JavaScript. CodeMirror provides syntax highlighting, code folding, bracket matching, and autocomplete for theme CSS classes.

Live preview. The visual builder renders your code in a sandboxed iframe with your theme’s stylesheets loaded. Changes appear in real time as you type.

Server-rendered preview. When you enable WordPress formatting (wpautop) or PHP execution on a section, the preview fetches rendered output from the server so you see the actual processed result.

Theme-aware. The builder automatically loads your active theme’s CSS files into the preview iframe, so your sections render with the same styles they’ll have on the live site. It also extracts class names from your theme stylesheets and offers them as autocomplete suggestions in the HTML editor.

Section management. Add, duplicate, delete, reorder (via drag-and-drop), and collapse sections. Each section is independently configurable.

Two page templates. A “Page Blocks Builder” template that keeps your theme’s header and footer but removes layout constraints, and a “Full Page Builder” template that strips everything for complete control.

Autosave. The visual builder saves a draft to your browser’s localStorage every 5 seconds. If you close the tab or your browser crashes, you’ll be prompted to restore the draft next time you open the builder.

SEO integration. The plugin feeds Page Block content into Rank Math‘s analysis so your SEO scores reflect the actual page content.

Architecture

The plugin is a single PHP class (GT_Page_Blocks_Builder) plus a license manager (GT_PB_License_Manager). There are no build steps, no npm dependencies, and no framework requirements. The JavaScript is vanilla ES5 that runs on the WordPress-bundled CodeMirror and uses the native fetch API for AJAX.

All data flows through WordPress. Sections are stored as serialized Gutenberg blocks in post_content. The visual builder reads and writes to this field via AJAX endpoints that validate nonces and check user capabilities. There’s no custom database table and no custom post type.

Disclaimer: This site is reader-supported. If you buy through some links, I may earn a small commission at no extra cost to you. I only recommend tools I trust and would use myself. Your support helps keep gauravtiwari.org free and focused on real-world advice. Thanks. - Gaurav Tiwari