Gutenberg blocks give you the power to create rich content editing experiences in WordPress. In this step-by-step guide, you’ll learn how to build a custom Gutenberg block from scratch.

1. Set Up Your Plugin Structure

• Create a new folder in /wp-content/plugins/
• Add plugin-name.php with basic plugin header

2. Register Block with block.json

• Define block name, title, category, and scripts/styles
• Example:

{
  "name": "myplugin/custom-block",
  "title": "Custom Block",
  "category": "widgets",
  "editorScript": "file:./index.js"
}

3. Create index.js for Block Logic

• Use registerBlockType()
• Add edit and save functions

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('myplugin/custom-block', {
  title: 'Custom Block',
  icon: 'smiley',
  category: 'widgets',
  edit({ attributes, setAttributes }) {
    return <RichText tagName="p" value={attributes.content} onChange={(content) => setAttributes({ content })} />;
  },
  save({ attributes }) {
    return <RichText.Content tagName="p" value={attributes.content} />;
  }
});

4. Enqueue Block Scripts

• In plugin-name.php, enqueue the block script with dependencies

5. Test and Refine

• Activate the plugin
• Use the block in the editor
• Add styles or enhance functionality as needed

Conclusion: Creating custom Gutenberg blocks is now more streamlined. With a few files and clean code, you can offer unique experiences directly in the editor.