This content originally appeared on DEV Community and was authored by Naimur Rahman Nahid
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"
This content originally appeared on DEV Community and was authored by Naimur Rahman Nahid
Naimur Rahman Nahid | Sciencx (2025-11-14T06:18:08+00:00) How to Build a Fully Custom WordPress Block Using React. Retrieved from https://www.scien.cx/2025/11/14/how-to-build-a-fully-custom-wordpress-block-using-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.