How to Build a Fully Custom WordPress Block Using React

The WordPress Block Editor (Gutenberg) has transformed the way content is created and managed. Instead of relying on classic shortcodes or page builders, developers can now build reusable, React-powered custom blocks that integrate directly into WordPress. If you want to modernize your WordPress development workflow, learning how to build custom blocks is a valuable skill.

In this guide, we will walk through how to create a fully custom WordPress block using React and the official WordPress block development tools.

Prerequisites

• Before starting, you should be familiar with:
• Basic WordPress theme or plugin development
• ESNext JavaScript and React
• Node.js and npm

Your development environment should include:

• Node.js v16 or higher
• A local WordPress installation
• A custom plugin folder to contain your block source files

Step 1: Setting up the project structure

Inside your WordPress installation, navigate to:

wp-content/plugins/

Create a new folder named:

my-custom-block

Inside this folder, create the following structure:

my-custom-block/
  ├─ build/
  ├─ src/
  │   └─ index.js
  ├─ block.php
  └─ package.json

*Step 2: Initialize the project using @wordpress/scripts
*
npm init @wordpress/block


Follow the on-screen prompts. This will automatically generate:

• package.json
• src/index.js
• block.json
• Build configuration

Your plugin now has a working starter block.

Step 3: Register the block in PHP
**
Inside **block.php, add:

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

function create_custom_block_init() {
    register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );

Step 4: Editing the React block code

Open src/index.js:

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

registerBlockType('myplugin/custom-block', {
    title: 'Custom Block',
    icon: 'admin-customizer',
    category: 'design',

    attributes: {
        content: { type: 'string', source: 'html', selector: 'p' }
    },

    edit({ attributes, setAttributes }) {
        return (
            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(value) => setAttributes({ content: value })}
                placeholder="Write something..."
            />
        );
    },

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

Step 5: Adding Inspector Controls

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

Update the edit function:

edit({ attributes, setAttributes }) {
    return (
        <>
            <InspectorControls>
                <PanelBody title="Settings">
                    <TextControl
                        label="Extra Class"
                        value={attributes.className}
                        onChange={(value) =>
                            setAttributes({ className: value })
                        }
                    />
                </PanelBody>
            </InspectorControls>

            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(value) => setAttributes({ content: value })}
            />
        </>
    );
}

Step 6: Build the block

npm run build

For development:

npm start

Step 7: Activate and test
Go to WordPress dashboard

Open Plugins

• Activate “Custom Gutenberg Block”
• Insert it into any post or page
• Your block is now fully functional.

Building custom Gutenberg blocks with React gives you full control over how content is created in WordPress.

By using @wordpress/scripts, the setup becomes much simpler and more efficient.

You can visit our more website:
Nijer Info BD Blogging Website
Web Development agency "Naimur Rahman Nahid"