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