How can I create a custom Gutenberg block without using a plugin?
Asked on Oct 16, 2025
Answer
Creating a custom Gutenberg block without using a plugin involves adding code directly to your theme's files. This requires a combination of PHP and JavaScript to register and define the block. Here's a basic overview of how to achieve this.
<!-- BEGIN COPY / PASTE -->
// Add this to your theme's functions.php
function my_custom_block() {
wp_register_script(
'my-block-script',
get_template_directory_uri() . '/js/my-block.js',
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(get_template_directory() . '/js/my-block.js')
);
register_block_type('mytheme/my-custom-block', array(
'editor_script' => 'my-block-script',
));
}
add_action('init', 'my_custom_block');
<!-- END COPY / PASTE -->Additional Comment:
- Create a JavaScript file (e.g., my-block.js) in your theme's js directory to define the block's behavior and appearance.
- Ensure your JavaScript file uses the WordPress block editor's APIs to register the block.
- Use enqueue functions to load scripts and styles only when needed.
- Test the block thoroughly to ensure it works as expected in the Gutenberg editor.
Recommended Links: