Ask any question about WordPress here... and get an instant response.
Post this Question & Answer:
How can I create a custom Gutenberg block for my WordPress theme?
Asked on Jan 31, 2026
Answer
Creating a custom Gutenberg block involves using the Block Editor API and JavaScript to define the block's functionality and appearance. This process requires some familiarity with JavaScript and the WordPress REST API.
<!-- BEGIN COPY / PASTE -->
// Register a new block type
wp.blocks.registerBlockType('mytheme/custom-block', {
title: 'Custom Block',
icon: 'smiley',
category: 'common',
edit: function(props) {
return wp.element.createElement('p', {}, 'Hello, Gutenberg!');
},
save: function(props) {
return wp.element.createElement('p', {}, 'Hello, Gutenberg!');
}
});
<!-- END COPY / PASTE -->Additional Comment:
- Ensure you enqueue the block's JavaScript file in your theme's functions.php using wp_enqueue_script().
- Use npm and tools like webpack or Babel to manage and compile your block's JavaScript code.
- Refer to the WordPress Block Editor Handbook for detailed guidance on block development.
Recommended Links:
