WordPress FSE Theme Code Generator

When to use this skill

• User asks to create a Gutenberg block
• User mentions Full Site Editing or FSE
• User wants to scaffold block.json files
• User asks about WordPress theme.json
• User needs block templates or patterns

Workflow

• Identify block or theme requirement
• Generate block.json with attributes
• Create edit component (React/JSX)
• Create save component
• Add block styles
• Register in PHP
• Update theme.json if needed

Instructions

Step 1: Identify Block Type

Block Type	Use Case	Complexity
Static	Content display only	Low
Dynamic	Server-rendered, PHP callback	Medium
Interactive	Client-side JS behavior	High
Inner Blocks	Container with nested blocks	Medium

Step 2: Create Block Structure

mkdir -p src/blocks/my-block
touch src/blocks/my-block/{block.json,edit.tsx,save.tsx,index.ts,style.scss,editor.scss}

Step 3: Generate Block Files

See examples/block-templates.md for complete templates:

• block.json with attributes and supports
• Edit component with InspectorControls and MediaUpload
• Save component (static) and render.php (dynamic)
• Block registration (JS and PHP)
• Block styles (frontend and editor)

Step 4: Configure theme.json

See examples/theme-json.md for:

• Color palette and typography settings
• Spacing scale configuration
• Layout settings (content/wide)
• Custom font registration
• Block-specific styles
• Template parts and custom templates

Step 5: Setup functions.php

See examples/functions-php.md for:

• Block registration hooks
• Asset enqueueing
• Block category registration
• Block patterns
• Theme support setup

Quick Reference: block.json Attributes

{
  "attributes": {
    "text": { "type": "string", "default": "" },
    "number": { "type": "number", "default": 0 },
    "boolean": { "type": "boolean", "default": false },
    "array": { "type": "array", "default": [] },
    "object": { "type": "object", "default": {} }
  }
}

Quick Reference: Block Supports

{
  "supports": {
    "html": false,
    "align": ["wide", "full"],
    "color": { "background": true, "text": true },
    "spacing": { "margin": true, "padding": true },
    "typography": { "fontSize": true }
  }
}

Validation

Before completing:

• block.json schema validates
• Block appears in inserter
• Edit component renders in editor
• Save outputs valid HTML
• Styles apply correctly
• PHP render works (if dynamic)

npm run build
npm run lint:js
npm run lint:css

Error Handling

• Block not appearing: Check block.json name matches registration and category exists.
• Validation error: Ensure save output matches stored content exactly.
• Styles not loading: Verify file paths in block.json are correct.
• PHP render not working: Check render.php exists and block.json has render key.
• TypeScript errors: Install @wordpress/blocks types: npm i -D @types/wordpress__blocks.

Resources

• Block Editor Handbook
• block.json Schema
• theme.json Reference
• @wordpress/scripts