Ask any question about WordPress here... and get an instant response.
Post this Question & Answer:
How can I create custom Gutenberg blocks with React in WordPress?
Asked on Feb 17, 2026
Answer
Creating custom Gutenberg blocks with React in WordPress involves using the Block Editor's JavaScript APIs. This process allows developers to extend WordPress functionality with custom block types.
<!-- BEGIN COPY / PASTE -->
// Register a new block type
wp.blocks.registerBlockType('my-plugin/custom-block', {
title: 'Custom Block',
icon: 'smiley',
category: 'common',
edit: function(props) {
return wp.element.createElement(
'div',
{ className: props.className },
'Hello, World!'
);
},
save: function(props) {
return wp.element.createElement(
'div',
{ className: props.className },
'Hello, World!'
);
}
});
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you have Node.js and npm installed to manage dependencies and build processes.
- Use the WordPress @wordpress/scripts package to simplify the setup of build tools like webpack and Babel.
- Place your block registration code in a JavaScript file and enqueue it using the wp_enqueue_script function in your theme or plugin.
- Consider using the create-guten-block toolkit for a streamlined block development setup.
Recommended Links:
