---

name: generating-wordpress-fse-blocks description: Generates WordPress Full Site Editing blocks and theme files. Use when the user asks about block.json, Gutenberg blocks, FSE themes, WordPress block development, or theme.json configuration.

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

Step 2: Create Block Structure

Copymkdir -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

Copy{
  "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

Copy{
  "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)

Copynpm 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