Skip to main content
This guide demonstrates the basic principles of block development in WordPress using a hands-on approach. You’ll create a custom block plugin that displays the copyright symbol (©) and the current year—the perfect addition to any website’s footer.

​
Prerequisites

Before starting, ensure you have Node.js and npm installed on your computer. Review the installation guide if you haven’t set up your development environment yet.

​
Scaffold the block plugin

1

Navigate to your plugins directory

If you have a local WordPress development environment, navigate to the plugins/ folder using the terminal:
cd /path/to/wordpress/wp-content/plugins/
You can use create-block to scaffold a block anywhere and then use wp-env inside the generated plugin folder. This creates a local WordPress development environment with your new block plugin installed and activated.
2

Run the create-block command

Use the @wordpress/create-block package with the tutorial template to scaffold the complete plugin:
npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
The slug provided (copyright-date-block) defines:
  • The folder name for the scaffolded plugin
  • The internal block name
The create-block package installs wp-scripts and adds the most common scripts to the block’s package.json file automatically.
3

Activate the plugin

Navigate to the Plugins page of your local WordPress installation and activate the “Copyright Date Block” plugin. The example block will then be available in the Editor.

​
Start development

With the plugin scaffolded and activated, you can start developing: 
cd copyright-date-block && npm start
The npm start command:
  • Starts a development server
  • Watches for changes in the block’s code
  • Automatically rebuilds the block whenever modifications are made
When you’re finished making changes, run npm run build to optimize the block code and make it production-ready.

​
Test with wp-env

The scaffolded plugin includes configuration for wp-env, making it easy to test your block:
1

Ensure Docker is running

You must have Docker installed and running on your machine.
2

Start the environment

Run the following command from your plugin directory:
npx wp-env start
Once the script finishes, you can access the local environment at: http://localhost:8888
3

Log in and test

Log into the WordPress dashboard using:
  • Username: admin
  • Password: password
The plugin will already be installed and activated. Open the Editor or Site Editor and insert the Copyright Date Block as you would any other block.

​
Project structure

Here’s what create-block generates for you: 
copyright-date-block/
├── build/              # Compiled production files
├── src/                # Source files
│   ├── edit.js        # Block editor interface
│   ├── save.js        # Block save function
│   ├── block.json     # Block metadata
│   └── index.js       # Block registration
├── package.json        # Dependencies and scripts
├── copyright-date-block.php  # Main plugin file
└── readme.txt         # Plugin readme

​
Key files explained

​
block.json

The block.json file contains all metadata for your block: 
{
  "apiVersion": 2,
  "name": "create-block/copyright-date-block",
  "title": "Copyright Date Block",
  "category": "text",
  "icon": "smiley",
  "description": "Example block showing copyright with current year.",
  "supports": {
    "html": false
  },
  "textdomain": "copyright-date-block",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

​
edit.js

Defines how your block appears in the editor: 
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
  return (
    <p {...useBlockProps()}>
      © {new Date().getFullYear()}
    </p>
  );
}

​
save.js

Defines how your block is saved to the database: 
import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
  return (
    <p {...useBlockProps.save()}>
      © {new Date().getFullYear()}
    </p>
  );
}

​
Common npm scripts

The scaffolded plugin includes these useful scripts: 
# Start development mode with watch
npm start

# Build for production
npm run build

​
Customize your block

Now that you have a working block, try customizing it:
  1. Change the icon - Modify the icon property in block.json
  2. Add styling - Edit editor.scss for editor styles or style.scss for frontend styles
  3. Add attributes - Define custom attributes in block.json to make your block configurable
  4. Add controls - Use WordPress components like TextControl or ColorPicker in edit.js

​
Next steps

Block Editor Handbook

Explore comprehensive tutorials, API references, and guides.

Block development examples

Browse example blocks demonstrating different features and techniques.

Core blocks source

Study how WordPress core blocks are implemented.

WordPress Developer Blog

Stay updated with the latest WordPress development articles.

​
Additional resources

Build docs developers (and LLMs) love

Get started for freeTalk to us