The Gutenberg editor (also known as the Block Editor) is now the default editor in WordPress. It allows users to build content using blocks—from simple text to advanced layouts. But what if you need a block that doesn’t exist?

In this guide, you’ll learn how to create a custom Gutenberg block in WordPress using PHP and JavaScript. By the end, you’ll be able to register your own block and use it directly inside the block editor.

Step 1: Create a Plugin for Your Block

First, we’ll create a plugin to hold our custom Gutenberg block.

  1. Go to your WordPress installation → wp-content/plugins/
  2. Create a new folder named:
my-custom-block
  1. Inside it, create a main file: my-custom-block.php

Add this code:

<?php
/**
 * Plugin Name: My Custom Block
 * Description: A simple custom Gutenberg block for WordPress.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

// Load block script
function my_custom_block_register() {
    wp_register_script(
        'my-custom-block-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    register_block_type( 'myplugin/custom-block', array(
        'editor_script' => 'my-custom-block-script',
    ) );
}
add_action( 'init', 'my_custom_block_register' );

Step 2: Create the Block JavaScript File

Now, create a file named block.js inside your plugin folder. This file will define how the block works in the editor.

const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;

registerBlockType('myplugin/custom-block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'widgets',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },

    edit({ attributes, setAttributes }) {
        const { content } = attributes;

        return (
            <RichText
                tagName="p"
                placeholder="Write your custom block text..."
                value={content}
                onChange={(newContent) => setAttributes({ content: newContent })}
            />
        );
    },

    save({ attributes }) {
        return <RichText.Content tagName="p" value={attributes.content} />;
    },
});

Step 3: Activate Your Plugin

  • Go to WordPress Dashboard → Plugins
  • Find My Custom Block → Click Activate

Now, open the Gutenberg editor, and search for Custom Block.

Step 4: Use Your Custom Gutenberg Block

  1. Open a post or page in Gutenberg editor.
  2. Click the + icon and search for “Custom Block”.
  3. Add it to your content and type some text.
  4. Save → Your custom block is now live.

Benefits of Creating Custom Gutenberg Blocks

  • Flexibility: Build blocks that match your exact project needs.
  • Performance: No need for heavy third-party plugins.
  • Reusable Components: Use the same block across multiple posts/pages.
  • Future-Proof: Gutenberg is the future of WordPress editing.

Conclusion

That’s it! You’ve successfully learned how to create a custom Gutenberg block in WordPress. This simple example only covers text, but you can extend it with images, buttons, custom styles, and dynamic data.