wp-block-markup

Explain and validate WordPress Gutenberg block markup syntax and attribute serialization.

14|1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/wpgaurav/WordPress-skills --skill wp-block-markup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wp-block-markup
Source: https://github.com/wpgaurav/WordPress-skills/tree/main/skills/wordpress/wp-block-markup
Command: npx skills add https://github.com/wpgaurav/WordPress-skills --skill wp-block-markup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers and content editors often struggle to understand and validate how WordPress Gutenberg blocks are delimited, nested, and serialized in post_content. This skill clarifies block markup syntax, the delimiter conventions, and how block attributes are stored and reconstructed by the save() method.

Core Features & Use Cases

  • Explains the three block forms (balanced, self-closing, and nested blocks) and how to serialize attributes between the HTML and comment JSON representations.
  • Provides concrete examples of paragraph, image, list, and group blocks, plus the rules for nesting and inner blocks.
  • Use cases include debugging "Block contains unexpected content" errors, converting HTML to block markup for templates, and validating generated markup against Gutenberg expectations.

Quick Start

Convert a sample HTML block into the corresponding Gutenberg block markup and explain the mapping.

Frequently Asked Questions about wp-block-markup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert HTML to WordPress Gutenberg block markup?

WordPress Gutenberg block markup uses specific comment delimiters to define block boundaries and JSON to store block attributes. This structure allows the editor to parse, validate, and reconstruct nested or self-closing blocks from raw post_content.

How are block attributes serialized in WordPress post_content?

Block attributes in WordPress are serialized in HTML comment delimiters as JSON. The save() method defines how these attributes are reconstructed and rendered in the final HTML output, ensuring the block remains stable and valid.

Why does my WordPress block contain unexpected content errors?

The 'Block contains unexpected content' error occurs when the saved HTML does not match the expected block markup generated by the save() method. Validating the block delimiters, attribute serialization, and nesting rules helps debug and resolve this discrepancy.

What are the three forms of WordPress Gutenberg blocks?

The three forms of WordPress Gutenberg blocks are balanced, self-closing, and nested blocks. Each form follows specific delimiter conventions and nesting rules to ensure proper parsing and serialization within the post_content structure.

Can I use HTML tags directly inside WordPress block delimiters?

Yes, HTML tags are used directly inside WordPress block delimiters for the rendered output, while block attributes are stored separately in JSON comments. Understanding this mapping is crucial for debugging post_content and building valid templates.