Ask any question about WordPress here... and get an instant response.
How can I create a custom Gutenberg block in WordPress?
Asked on Nov 24, 2025
Answer
Creating a custom Gutenberg block in WordPress involves using JavaScript and PHP to define the block's functionality and appearance. This process requires familiarity with WordPress's block editor and some coding skills.
<!-- BEGIN COPY / PASTE -->
// JavaScript: Register a new block
wp.blocks.registerBlockType('myplugin/custom-block', {
title: 'Custom Block',
icon: 'smiley',
category: 'common',
edit: function(props) {
return wp.element.createElement('p', {}, 'Hello, World!');
},
save: function(props) {
return wp.element.createElement('p', {}, 'Hello, World!');
}
});
// PHP: Enqueue block scripts
function myplugin_enqueue_block_editor_assets() {
wp_enqueue_script(
'myplugin-block',
plugins_url('block.js', __FILE__),
array('wp-blocks', 'wp-element')
);
}
add_action('enqueue_block_editor_assets', 'myplugin_enqueue_block_editor_assets');
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you have Node.js and npm installed to manage dependencies and build your block.
- Use the WordPress Block Editor Handbook as a reference for detailed block creation steps.
- Consider using a tool like Create Guten Block to scaffold your block project more easily.
- Test your block thoroughly in different browsers and WordPress environments.
Recommended Links:
