How can I create a custom Gutenberg block with React components?
Asked on Oct 20, 2025
Answer
Creating a custom Gutenberg block with React components involves using the WordPress Block Editor's JavaScript APIs. You'll primarily work with `@wordpress/scripts` to set up your development environment and `@wordpress/blocks` to register the block.
<!-- BEGIN COPY / PASTE -->
// Import necessary WordPress packages
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
// Register a new block
registerBlockType('my-plugin/my-custom-block', {
title: 'My Custom Block',
icon: 'smiley',
category: 'widgets',
edit: () => {
const blockProps = useBlockProps();
return (
<div {...blockProps}>
<p>Hello, Gutenberg!</p>
</div>
);
},
save: () => {
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<p>Hello, Gutenberg!</p>
</div>
);
},
});
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you have Node.js and npm installed to use `@wordpress/scripts` for building your block.
- Use `wp-scripts` to manage your build process, which simplifies the setup of Babel and Webpack.
- Consider using `create-guten-block` as a boilerplate to quickly scaffold a new block project.
- Test your block thoroughly in the WordPress editor to ensure compatibility and performance.
Recommended Links: