How to Create a Custom Gutenberg Block

At the heart of this transformative power lies Gutenberg, the modern block editor that has revolutionized content creation in WordPress, including the creation of custom Gutenberg blocks. Gutenberg has introduced a new era of content design, enabling users to build rich, dynamic, and interactive content with ease. Whether you’re a WordPress enthusiast or a developer seeking to enhance your skill set, this guide will walk you through the steps to harness the full potential of creating a custom Gutenberg block and transform your digital presence.

Create Custom Gutenberg Block

What is a Block in Gutenberg

In the context of WordPress’s Gutenberg editor, a “block” refers to a fundamental unit of content or functionality. Gutenberg is designed to provide a more flexible and intuitive way to create and structure content in WordPress, moving away from the traditional WYSIWYG editor. Instead, it breaks down content into individual blocks, each serving a specific purpose. These blocks can be text, images, headings, lists, embeds, widgets, or even custom content elements created by users or developers.

Create Your First Custom Gutenberg Block

Creating a Custom Gutenberg block involves several steps. Here’s a basic example of how you can create a custom Gutenberg block:

1. Set up your development environment: You need to have Node.js and npm installed. You also need to install the @wordpress/scripts package which provides a set of common scripts for building WordPress plugins and blocks.
2. Create a new plugin directory: Gutenberg blocks are typically distributed as plugins. Create a new directory in your wp-content/plugins directory.
3. Create a main plugin file: In your new plugin directory, create a PHP file. This file will be used to enqueue your block’s JavaScript and CSS.
4. Create a block JavaScript file: This file will contain the code for your block.
5. Build and enqueue your block: Use @wordpress/scripts to build your block and then enqueue the output files in your main plugin file.

Here’s what the code might look like for creating your custom Gutenberg block:

main-plugin-file.php

<?php
/**
 * Plugin Name: My Custom Block
 */

function my_custom_block_enqueue() {
    wp_enqueue_script(
        'my-custom-block',
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_enqueue' );

Now create a src folder and create an index.js file where keep the following codes:-

src/index.js

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

registerBlockType( 'my-plugin/my-custom-block', {
    title: 'My Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: ( props ) => {
        const { attributes: { content }, setAttributes, className } = props;
        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };

        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
                placeholder={ __( 'Write your custom message', 'text-domain' ) }
            />
        );
    },
    save: ( props ) => {
        return <RichText.Content tagName="p" value={ props.attributes.content } />;
    },
} );

Your package.json file will have the following configuration, I hope you know about it.

package.json

{
    "name": "my-custom-block",
    "version": "1.0.0",
    "description": "My Custom Block for Gutenberg",
    "main": "src/index.js",
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start"
    },
    "devDependencies": {
        "@wordpress/scripts": "^12.0.0"
    }
}

After creating these files, you can run npm install to install the necessary dependencies and then npm run start start the development build process. Your block will now be available in the Gutenberg editor.

the output of the above codes is the following custom Gutenberg block:-

the blog post is made from the Gutenbergkits’s official post related to custom Gutenberg block development.