skills.rest
iwritec0de
iwritec0deCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gutenberg-layout

Compose Gutenberg blocks into semantic, accessible WordPress layout markup.

1|Updated Apr 19, 2026
Search Tags:#accessibility#layout#frontend#wordpress#gutenberg#block-patterns#block-markup
One-click install
npx skills add https://github.com/iwritec0de/wp-dev --skill gutenberg-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gutenberg-layout
Source: https://github.com/iwritec0de/wp-dev/tree/main/skills/gutenberg-layout
Command: npx skills add https://github.com/iwritec0de/wp-dev --skill gutenberg-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translating user requests into valid Gutenberg layouts, this skill eliminates the manual overhead of crafting block markup and ensures accessible, semantic WordPress layouts.

Core Features & Use Cases

  • Discover available blocks on a WordPress site via MCP to tailor layouts to the exact block inventory.
  • Assemble layouts by combining core, plugin, and theme blocks into structured markup compliant with Gutenberg conventions.
  • Produce ready-to-deploy HTML markup with the corresponding block comments for use in themes, templates, or post content.
  • Use Case: Design a landing page layout that includes a hero cover, feature grid, and CTA section using available blocks.

Quick Start

Ask me to build a Gutenberg layout for a landing page and I will return the complete block markup ready for paste-in.

Frequently Asked Questions about gutenberg-layout

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

FAQPage Schema
How do I build a Gutenberg layout with semantic blocks for WordPress?▼

Build Gutenberg layouts by composing available blocks into semantic, accessible markup. This assembles valid block markup with corresponding comments, producing ready-to-deploy HTML for themes, templates, or post content.

Can I discover available WordPress blocks before assembling a layout?▼

Discovering available blocks on a WordPress site via MCP tailors layouts to the exact block inventory. This ensures the assembled markup only uses core, plugin, and theme blocks currently active on the site.

How do I generate block markup for a WordPress landing page?▼

Generate block markup for a landing page by combining core, plugin, and theme blocks into structured compositions. This creates complete HTML with block comments for hero covers, feature grids, and CTA sections.

Does this approach to Gutenberg layout construction support reusable block patterns?▼

Gutenberg layout construction supports reusable block patterns across WordPress sites. It applies semantic block composition to both full-page layouts and single-section compositions for consistent deployment.

What is the best way to ensure accessible markup in Gutenberg block patterns?▼

Ensure accessible markup by composing blocks into semantic structures compliant with Gutenberg conventions. This eliminates manual overhead and validates block markup for accessible WordPress layouts.

Related Skills

Explore More Design & Creative Skills→
AutomatticAutomattic
7

theme-creator

Design and implement WordPress block themes using theme.json and template parts.

Official
Advanced
RebelliousSmileRebelliousSmile
1

wp-blocks

Validate WordPress block markup by simulating editor behavior with Playwright.

Community
Advanced
wpgauravwpgaurav
14

wp-block-markup

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

Community
Advanced
josecontijoseconti
12

Klytos Gutenberg Blocks

Markup Klytos page content with Gutenberg block delimiters for editor parsing.

Community
Intermediate