Gutenberg Block

Lesson 4 of 15 4 min read
  • JNext lesson
  • KPrevious lesson
  • FSearch lessons
  • EscClear search

The Page Block (marketers-delight/page-block) is the core building block of the plugin. It’s a dynamic Gutenberg block that stores HTML, CSS, and JavaScript as block attributes and renders them server-side.

Block Registration

The block is registered under the “Marketers Delight” category. If the category doesn’t exist yet, the plugin creates it automatically. The block appears in the block inserter as “Page Block” with the editor-code dashicon.

Block Attributes

Each Page Block instance stores six attributes.

content (string, default: empty). The HTML content of the section. This can include any valid HTML markup, shortcodes, and optionally PHP code.

css (string, default: empty). CSS styles for this section. Rendered as an inline <style> tag immediately before the HTML content.

js (string, default: empty). JavaScript code for this section. Can be rendered inline or in the footer depending on the jsLocation setting.

jsLocation (string, default: “footer”). Controls where the JavaScript is rendered. Set to “footer” to queue the script for wp_footer, or “inline” to render it immediately after the HTML content.

format (boolean, default: false). When enabled, the HTML content is passed through WordPress’s the_content filter, which applies wpautop (automatic paragraph formatting) and processes shortcodes with full filter chain.

phpExec (boolean, default: false). When enabled, PHP code in the HTML content is executed before rendering. See the PHP Execution chapter for details and security considerations.

Editor Interface

In the Gutenberg editor, each Page Block shows a tabbed code editor with three tabs: HTML, CSS, and JS. The editors use CodeMirror (the same code editor used in the WordPress theme/plugin editor) with syntax highlighting, line numbers, code folding, and bracket matching.

The editor has two modes.

Editor mode. Shows the tabbed code editors. Tabs that contain code show a dot indicator so you can tell at a glance which fields have content.

Preview mode. Shows a live preview of the block’s rendered output in an iframe. Click the eye icon to switch to preview mode, and the pencil icon to switch back to editor mode.

Settings Panel

In the block’s Inspector Controls sidebar (right panel in Gutenberg), you’ll find three settings.

JavaScript Location. A dropdown to choose between “Footer” and “Inline” placement for the block’s JavaScript.

WordPress formatting (wpautop). A toggle to enable WordPress content formatting. When on, your HTML is processed through the the_content filter chain.

Execute PHP code. A toggle to enable PHP execution in the HTML content. Only available to administrators.

Theme Class Autocomplete

The plugin scans your active theme’s CSS files (both child and parent theme) and extracts class names. When editing the HTML tab, you get autocomplete suggestions for CSS classes as you type inside class="..." attributes. Trigger autocomplete manually with Ctrl+Space or Cmd+Space.

The autocomplete scans up to 2,000 unique classes from these locations in your theme directory.

  • style.css (root stylesheet)
  • css/ directory (recursive)
  • assets/css/ directory (recursive)

Server-Rendered Preview

When either format or phpExec is enabled, the block editor requests a server-rendered preview instead of building the preview purely from the raw code. This ensures you see the actual processed output, including wpautop formatting and PHP execution results.

The preview request goes through the md_page_blocks_builder_preview AJAX endpoint, which validates the user’s nonce and capabilities before rendering.

Frontend Rendering

The block uses a PHP render callback (not a save function in JavaScript). The JavaScript save function returns null, meaning the block is fully dynamic and renders server-side on every page load.

The render callback outputs content in this order.

  1. If CSS exists: a <style> tag containing the minified CSS.
  2. The HTML content, optionally processed through PHP execution and/or the_content filter.
  3. If JavaScript exists and jsLocation is “inline”: a <script> tag immediately after the HTML.
  4. If JavaScript exists and jsLocation is “footer”: the script is queued and output during wp_footer.

Each script tag gets a unique ID based on an MD5 hash of the JavaScript content (e.g., page-block-js-pb-a1b2c3d4).

Rank Math SEO Integration

The plugin includes automatic integration with Rank Math SEO. When Rank Math is active, the plugin hooks into Rank Math’s content analysis and feeds the text content from all Page Block instances on the page. This means Rank Math’s SEO scoring reflects the actual content of your Page Blocks, not just the raw block markup.

The integration strips HTML tags and PHP code before passing the text to Rank Math, and automatically refreshes the analysis when block content changes.

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