Native Block Development

Creating native WordPress blocks for the Oh My Brand! FSE theme using @wordpress/scripts.

When to Use

• Creating new WordPress blocks with editor and frontend components
• Configuring block metadata and supports
• Writing PHP render templates for server-side rendering
• Registering block assets (styles, scripts)

Block File Structure

Every block lives in src/blocks/{block-name}/:

src/blocks/gallery/
├── block.json          # Block metadata and registration
├── index.js            # Block registration entry point
├── edit.tsx            # Editor React component
├── render.php          # Server-side render template
├── helpers.php         # Block-specific helper functions
├── style.css           # Frontend styles (auto-enqueued)
├── editor.css          # Editor-only styles (optional)
├── view.ts             # Frontend TypeScript (Web Component)
└── view.test.ts        # Unit tests

File Templates

Use templates from block-scaffolds:

block.json Key Properties

Common Supports

"supports": {
    "align": ["wide", "full"],
    "anchor": true,
    "className": true,
    "color": {
        "background": true,
        "text": true
    },
    "spacing": {
        "margin": true,
        "padding": true,
        "blockGap": true
    }
}

Render Template Guidelines

Helper Function Guidelines

Asset Handling

Automatic Loading

Assets defined in block.json are automatically enqueued:

Assets only load when the block is present on the page.

Step-by-Step Creation

1. Create directory: mkdir -p src/blocks/my-block
2. Add block.json: Copy from template, replace placeholders
3. Create edit.tsx: See block-editor-components
4. Create render.php: Copy from template
5. Create helpers.php: Copy from template
6. Create view.ts: See web-components
7. Add style.css: See css-standards
8. Write tests: See vitest-testing
9. Build: pnpm run build
10. Verify: Check block appears in editor

Related Skills

• block-scaffolds - Copy-paste templates
• web-components - Frontend view scripts
• block-editor-components - Editor components
• php-standards - PHP conventions
• css-standards - CSS conventions
• acf-block-registration - ACF blocks

References

• WordPress Block API
• block.json Specification
• @wordpress/scripts