majiayu000 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
renderkey. - TypeScript errors: Install @wordpress/blocks types:
npm i -D @types/wordpress__blocks.