Ask any question about WordPress here... and get an instant response.

How can I create a custom Gutenberg block in WordPress?

Asked on Nov 05, 2025

Answer

Creating a custom Gutenberg block in WordPress involves using the Block Editor's JavaScript APIs. You'll need to write some JavaScript code to define your block and enqueue it properly in your theme or plugin.

<!-- BEGIN COPY / PASTE -->
    // Register a new block type
    wp.blocks.registerBlockType('my-plugin/my-custom-block', {
      title: 'My Custom Block',
      icon: 'smiley',
      category: 'common',
      edit: function(props) {
        return wp.element.createElement(
          'p',
          { className: props.className },
          'Hello, Gutenberg!'
        );
      },
      save: function() {
        return wp.element.createElement(
          'p',
          null,
          'Hello, Gutenberg!'
        );
      },
    });
    <!-- END COPY / PASTE -->

Additional Comment:

Ensure you have Node.js and npm installed to set up your development environment.
Use the "wp-scripts" package to simplify the build process for your block.
Enqueue your block's JavaScript file using "wp_enqueue_script" in your theme's "functions.php" or your plugin's main file.
Refer to the official WordPress Block Editor Handbook for more detailed guidance and advanced block features.

✅ Answered with WordPress best practices.

Ask any question about WordPress here... and get an instant response.

How can I create a custom Gutenberg block in WordPress?

Asked on Nov 05, 2025

Answer

The Q&A Network