Ask any question about WordPress here... and get an instant response.
Post this Question & Answer:
How can I create a custom Gutenberg block in WordPress?
Asked on Jan 22, 2026
Answer
Creating a custom Gutenberg block in WordPress involves using JavaScript and the WordPress Block Editor API. You'll need to register the block using JavaScript and enqueue the necessary scripts in your theme or plugin.
<!-- BEGIN COPY / PASTE -->
// Enqueue block editor assets
function my_custom_block_enqueue() {
wp_enqueue_script(
'my-custom-block',
get_template_directory_uri() . '/js/my-custom-block.js',
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(get_template_directory() . '/js/my-custom-block.js')
);
}
add_action('enqueue_block_editor_assets', 'my_custom_block_enqueue');
// JavaScript file: my-custom-block.js
wp.blocks.registerBlockType('my-plugin/my-custom-block', {
title: 'My Custom Block',
icon: 'smiley',
category: 'common',
edit: function() {
return wp.element.createElement('p', null, 'Hello from the editor!');
},
save: function() {
return wp.element.createElement('p', null, 'Hello from the saved content!');
},
});
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you have Node.js and npm installed to manage JavaScript dependencies if needed.
- Consider using a build tool like Webpack or Babel for ES6+ syntax support.
- Use the WordPress Block Editor Handbook for detailed API documentation and examples.
Recommended Links:
