Introduction to Block Development

Welcome to Block Development

The WordPress Block Editor (Gutenberg) has fundamentally changed how content is created in WordPress. As a developer, understanding block development opens up powerful possibilities for custom content experiences.

In this tutorial, you'll build real-world custom blocks including:

• A testimonial block with avatar and rating
• A pricing table block with dynamic features
• A posts grid block with filtering
• Interactive blocks with frontend JavaScript

What is a Gutenberg Block?

A block is an atomic unit of content in the editor. Every paragraph, image, heading, and embed is a block. Blocks are:

• Self-contained – Each block manages its own rendering
• Configurable – Users can customize via toolbar and sidebar
• Reusable – Blocks can be saved as patterns
• Transformable – Convert between block types

Block Architecture

Every block consists of these parts:

Setting Up Your Environment

You need Node.js 18+ and npm. We'll use the official @wordpress/create-block scaffolding tool:

cd wp-content/plugins
npx @wordpress/create-block testimonial-block
cd testimonial-block
npm start

This creates:

testimonial-block/
├── build/                 # Compiled assets
├── src/
│   ├── block.json        # Block metadata
│   ├── edit.js           # Editor component
│   ├── save.js           # Save component
│   ├── index.js          # Registration
│   ├── style.scss        # Frontend styles
│   └── editor.scss       # Editor styles
├── testimonial-block.php  # Plugin file
└── package.json

The block.json File

This is the heart of your block definition:

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "theme/testimonial",
    "version": "1.0.0",
    "title": "Testimonial",
    "category": "widgets",
    "icon": "format-quote",
    "description": "Display customer testimonials with rating.",
    "keywords": ["quote", "review", "feedback"],
    "supports": {
        "html": false,
        "align": ["wide", "full"],
        "color": {
            "background": true,
            "text": true
        }
    },
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": ".testimonial-content"
        },
        "author": {
            "type": "string",
            "default": ""
        },
        "rating": {
            "type": "number",
            "default": 5
        }
    },
    "textdomain": "testimonial-block",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

Understanding Attributes

Attributes are the block's data model. They define what's stored and where it comes from:

"attributes": {
    "title": {
        "type": "string",
        "default": "Hello World"
    },
    "items": {
        "type": "array",
        "default": []
    },
    "mediaId": {
        "type": "number"
    },
    "mediaUrl": {
        "type": "string",
        "source": "attribute",
        "selector": "img",
        "attribute": "src"
    }
}

Block Supports

Enable built-in features without custom code:

"supports": {
    "align": true,
    "anchor": true,
    "className": true,
    "color": {
        "background": true,
        "text": true,
        "link": true,
        "gradients": true
    },
    "spacing": {
        "margin": true,
        "padding": true
    },
    "typography": {
        "fontSize": true,
        "lineHeight": true
    }
}

Development Workflow

Start the build watcher:

npm start

This watches for changes and rebuilds automatically. For production:

npm run build

Next Steps

In the next lesson, we'll build the Edit component using React, handling user input and block attributes.