WordPress Block Builder

Name: WordPress Block Builder
Availability: InStock
Author: Thrivemattic

Free Verified 368 lines By Thrivemattic Content Marketing CRO

Description

Generate valid WordPress Gutenberg block markup that passes editor validation on the first try. Covers Cover blocks, Query Loops, navigation menus, template parts, and theme.json design tokens — all deployable via WP-CLI. Includes attribute-to-HTML mapping rules, anti-patterns that break validation, and layout width control for breaking out of theme constraints.

How It Works

Click to enlarge

What Claude Learns

→ Block Markup Syntax
→ Cover Block Pattern
→ Query Loop Grid
→ Navigation Menus
→ Template Parts
→ Layout Width Control
→ WP-CLI Deployment
→ SEO Meta Tags
→ theme.json Tokens
→ Anti-Patterns

Installation

1. Run: npx mkt-skills install wordpress-blocks
2. Or manually copy SKILL.md to ~/.claude/skills/wordpress-blocks/SKILL.md
3. Restart Claude Code to load the skill

Use Cases

Block Markup Syntax

Cover Block Pattern

Query Loop Grid

Navigation Menus

Template Parts

Related Skills

Frequently Asked Questions

How detailed is the WordPress Block Builder skill?

WordPress Block Builder contains 368 lines of structured instructions covering 10 key areas. It provides comprehensive guidance including specific implementation patterns, not just surface-level tips.

Is WordPress Block Builder free to use?

Yes, WordPress Block Builder is completely free. You can download the SKILL.md file or copy it to your clipboard directly from the skill page.

What will Claude Code learn from this skill?

Claude Code will gain expertise in: Block Markup Syntax; Cover Block Pattern; Query Loop Grid; and 7 more areas.

Download SKILL.md GitHub

---
name: wordpress-blocks
description: Generate valid WordPress block markup for pages, posts, and templates. Produces block editor-compatible HTML that passes validation — covers Cover blocks, Query Loops, navigation menus, template parts, and theme.json design tokens. Use when building or updating WordPress pages programmatically via WP-CLI or the REST API.
user-invocable: true
disable-model-invocation: false
argument-hint: "[page-description] [--type page|post|template|pattern] [--style design-system-name]"
allowed-tools: Read, Glob, Grep, Bash, AskUserQuestion, Write
---

# WordPress Block Builder

Generate valid WordPress Gutenberg block markup that passes editor validation on the first try. Covers page creation, post styling, template parts, Query Loops, Cover blocks, and design token integration — all deployable via WP-CLI.

## Invocation

```bash
# Generate a page with block content
/wordpress-blocks "Create a photography portfolio page with masonry grid"

# Generate a blog listing page with category filters
/wordpress-blocks "Blog page with 3-column card grid and category filter bar" --type page

# Generate a custom header template part
/wordpress-blocks "Site header with logo, nav menu, and CTA button" --type template

# Generate a block pattern
/wordpress-blocks "Work showcase card with image, client name, metric" --type pattern
```

## When to Activate

- User asks to create or update a WordPress page programmatically
- User needs block markup that works in the Gutenberg editor without "invalid content" errors
- User is building pages via WP-CLI (`wp post create/update`)
- User wants Query Loop, Cover block, or template part markup
- User mentions WordPress blocks, patterns, or theme.json

## Core Principle

**WordPress block markup is a serialization format, not HTML.** Every block is wrapped in HTML comments (``) containing a JSON object of attributes. The HTML between comments must match *exactly* what WordPress would generate — wrong classes, missing attributes, or extra whitespace causes block validation failures.

## Block Markup Syntax

### Basic Structure

```html

<div class="wp-block-group my-class">
  
  <p>Content here</p>
  
</div>

```

**Rules:**
- The JSON in the comment must match the HTML attributes below it
- Self-closing blocks use ``
- Never place non-block HTML comments between blocks (causes parser errors)
- Only `` and `` comments are allowed inside block content

### Attribute-to-HTML Mapping

When block JSON specifies style attributes, the HTML element must include corresponding utility classes:

| JSON Attribute | Required HTML Class |
|---|---|
| `"style":{"color":{"text":"#hex"}}` | `class="has-text-color"` + `style="color:#hex"` |
| `"style":{"color":{"background":"#hex"}}` | `class="has-background"` + `style="background-color:#hex"` |
| `"textColor":"preset-slug"` | `class="has-preset-slug-color has-text-color"` |
| `"backgroundColor":"preset-slug"` | `class="has-preset-slug-background-color has-background"` |
| `"align":"full"` | `class="alignfull"` |
| `"align":"wide"` | `class="alignwide"` |
| `"textAlign":"center"` | `class="has-text-align-center"` |

**Critical:** If JSON says `{"style":{"color":{"text":"#54505B"}}}`, the HTML MUST include `class="has-text-color"`:

```html

<p class="has-text-color" style="color:#54505B">Text here</p>

```

Without `has-text-color`, the block editor shows "Block contains unexpected or invalid content."

## Block Reference

### Cover Block (with background image)

The most error-prone block. The image must be a plain `<img>` tag — NOT an inner `` block.

```html

<div class="wp-block-cover is-dark custom-class" style="border-radius:8px;min-height:380px">
  <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
  <img class="wp-block-cover__image-background wp-image-123" alt="Description" src="http://example.com/photo.jpg" data-object-fit="cover"/>
  <div class="wp-block-cover__inner-container">
    
  </div>
</div>

```

**Cover block rules:**
- `url` and `id` go in the block comment JSON, not as an inner Image block
- Image uses `class="wp-block-cover__image-background wp-image-{id}"`
- Add `data-object-fit="cover"` attribute on the img
- `isDark: true` → class `is-dark`; `isDark: false` → class `is-light`
- `dimRatio` maps to `has-background-dim-{value}` on the span
- Inner content headings inherit white text from `is-dark` — don't set explicit text color on them (avoids `has-text-color` validation issues)

### Query Loop (Blog Card Grid)

```html

<div class="wp-block-query">
  
    
    <div class="wp-block-group">
      
      
      <div class="wp-block-group" style="padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px">
        
        
        
        
      </div>
      
    </div>

<p class="has-text-align-center">No posts found.</p>
    
  
</div>

```

**Query Loop rules:**
- `"inherit": true` → uses the main WordPress query (for archive/category templates)
- `"inherit": false` → uses its own query (for standalone pages like /blog/)
- WordPress ignores page content when a page is set as `page_for_posts` — use a regular page with `inherit: false` instead
- Dynamic blocks (`post-featured-image`, `post-title`, `post-date`, `post-terms`, `post-excerpt`) are self-closing

### Navigation Menu

First create a `wp_navigation` post, then reference it in template parts:

```bash
# Create menu
wp post create --post_type=wp_navigation --post_title="Main Menu" --post_status=publish \
  --post_content='

'
```

Then reference by ID in templates:
```html

```

**Navigation rules:**
- `"opensInNewTab": true` makes links open in new tab
- Without `"ref"`, WordPress auto-generates a menu from all pages (usually not desired)
- Footer navigation: use `"overlayMenu":"never"` and `"orientation":"vertical"` for stacked links

### Template Parts (Header/Footer)

WordPress block themes load template parts from `wp_template_part` posts. To override the theme's default:

```bash
# Create custom header
wp post create --post_type=wp_template_part --post_title="Header" --post_name="header" \
  --post_status=publish --post_content="$(cat header.html)"

# Associate with theme and set area
wp post term set {ID} wp_theme twentytwentyfive
wp post meta update {ID} wp_theme_part_area header
```

Template structure must include header/footer references:
```html

<main class="wp-block-group">
  
</main>

```

### List Block

```html

<ul class="custom-list"><li>Item one</li><li>Item two</li><li>Item three</li></ul>

```

**List rules:**
- Keep `<ul>` and `<li>` on a single line with no extra whitespace between them
- Indented `<li>` with line breaks causes validation mismatches

## Layout & Width

### Breaking Out of Theme Content Width

Block themes (like TT5) constrain content to `contentSize` (often 700px). To use full width:

```html

<div class="wp-block-group alignfull" style="padding-left:48px;padding-right:48px">
  
</div>

```

**Key:** `"align":"full"` + class `alignfull` breaks out of the theme constraint. Side padding prevents edge-to-edge content on small screens. Inner blocks can then use their own `contentSize` (e.g., 700px for article text, 1200px for grids).

### Constrained vs Default Layout

- `"layout":{"type":"constrained","contentSize":"700px"}` → centers content with max-width, children inherit
- `"layout":{"type":"default"}` → no width constraint, fills parent
- `"layout":{"type":"flex","justifyContent":"space-between"}` → flexbox row

## WP-CLI Deployment

### Create a page from an HTML file

```bash
# Create
wp post create --post_type=page --post_title="Page Title" --post_name="slug" \
  --post_status=publish --post_content="$(cat page-content.html)"

# Update
wp post update {ID} --post_content="$(cat page-content.html)"

# Set as homepage
wp option update show_on_front page
wp option update page_on_front {ID}
```

### Media import in Docker

```bash
# MUST use -u 33:33 (www-data) for file permissions
docker compose run --rm -u 33:33 wpcli media import /path/to/file.jpg --title="Image Title"
```

Without `-u 33:33`, media import fails with "The uploaded file could not be moved."

### Verify block validity

After creating/updating a page, open the editor to check:
```bash
# Check for validation errors in browser console
# "Block validation: Block validation failed" = broken markup
# "Block successfully updated" = valid
```

## Anti-Patterns

### Things that break block validation

1. **Using `` inside Cover blocks** — use plain `<img>` with `wp-block-cover__image-background` class
2. **Missing `has-text-color` class** when using inline `style.color.text`
3. **HTML comments between blocks** — `` between closing `</div>` and next `` confuses the parser
4. **Extra whitespace in list markup** — indented `<li>` elements cause validation mismatch
5. **Setting explicit text color inside dark Cover blocks** — let `is-dark` handle inheritance; explicit colors require `has-text-color` class

### Things that look right but break layout

1. **Content stuck at 700px** — outer Group needs `"align":"full"` to escape theme's `contentSize`
2. **Lists with huge left margin** — theme's constrained layout auto-centers list blocks; fix with `max-width: 700px; margin-left: auto; margin-right: auto; box-sizing: border-box;`
3. **Featured images cropping** — TT5 single template uses `"aspectRatio":"3/2"` on `post-featured-image`; create custom single template without it
4. **Page title showing above hero** — hide with `h1.wp-block-post-title { display: none; }` and provide your own heading
5. **Duplicate header/footer** — when page content includes navigation blocks AND the theme template has them; use `body:has(.custom-hero) header.wp-block-template-part { display: none; }`

## SEO Meta via PHP (No Plugin)

Add to a plugin's PHP:

```php
function output_seo_meta() {
    if ( is_singular() ) {
        $post  = get_queried_object();
        $title = get_the_title( $post ) . ' — Site Name';
        $desc  = wp_strip_all_tags( $post->post_excerpt ?: substr( $post->post_content, 0, 160 ) );
        $url   = get_permalink( $post );
        $image = get_the_post_thumbnail_url( $post, 'large' );
    } elseif ( is_category() ) {
        $term  = get_queried_object();
        $title = $term->name . ' — Site Name';
        $desc  = $term->description ?: 'Posts about ' . $term->name;
        $url   = get_term_link( $term );
    }
    // Output tags
    echo '<meta name="description" content="' . esc_attr( $desc ) . '" />';
    echo '<meta property="og:title" content="' . esc_attr( $title ) . '" />';
    echo '<meta property="og:description" content="' . esc_attr( $desc ) . '" />';
    echo '<meta property="og:url" content="' . esc_url( $url ) . '" />';
    echo '<meta property="og:image" content="' . esc_url( $image ) . '" />';
    echo '<meta name="twitter:card" content="summary_large_image" />';
}
add_action( 'wp_head', 'output_seo_meta', 1 );
```

## theme.json Design Tokens

Plugins can inject design tokens via filter:

```php
function inject_theme_json( $theme_json ) {
    $tokens = json_decode( file_get_contents( __DIR__ . '/theme.json' ), true );
    $theme_json->update_with( $tokens );
    return $theme_json;
}
add_filter( 'wp_theme_json_data_theme', 'inject_theme_json' );
```

**theme.json structure:**
```json
{
  "version": 3,
  "settings": {
    "color": { "palette": [...] },
    "typography": { "fontFamilies": [...], "fontSizes": [...] },
    "spacing": { "spacingSizes": [...] },
    "layout": { "contentSize": "700px", "wideSize": "1200px" },
    "shadow": { "presets": [...] }
  }
}
```

Tokens become available in the editor UI (color picker, spacing controls, font selector).

## Output Format

When generating block content:

1. **Write to an HTML file** (e.g., `page-content.html`) — never try to pass multiline block markup directly on the command line
2. **Deploy via WP-CLI**: `wp post create --post_content="$(cat file.html)"`
3. **Verify in the editor** — open the page in wp-admin and check for "invalid content" warnings
4. **Check console** — `Block validation failed` = broken; `Block successfully updated` = valid

## Key Principles

1. **Block markup is a serialization contract** — the JSON attributes and the HTML must agree exactly
2. **Cover blocks are special** — they're the #1 source of validation errors; always use `url`/`id` in JSON + plain `<img>` tag
3. **`has-text-color` is not optional** — if you set `style.color.text` in JSON, add the class
4. **Test in the editor, not just the frontend** — a page can render fine on the frontend but break in the editor
5. **Use `alignfull` to escape theme constraints** — then set your own `contentSize` on the inner Group
6. **`-u 33:33` for Docker media import** — WordPress runs as www-data (uid 33)
7. **No HTML comments between blocks** — only `` comments are allowed
8. **Lists: single line, no whitespace** — `<ul><li>One</li><li>Two</li></ul>`
9. **`inherit: false` for standalone blog pages** — `inherit: true` only for archive templates
10. **Write block content to files, deploy via WP-CLI** — never construct block markup inline in shell commands