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

How can I create a custom Gutenberg block?

Asked on Nov 04, 2025

Answer

Creating a custom Gutenberg block in WordPress involves using the block editor's JavaScript framework to define and register your block. This process requires some knowledge of JavaScript, React, and WordPress development practices.

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

Additional Comment:

Ensure you have a development environment set up with Node.js and npm.
Use the WordPress @wordpress/scripts package to simplify the build process.
Include the block's JavaScript file in your theme or plugin using wp_enqueue_script().
Consider using create-guten-block or similar tools to streamline block development.

✅ Answered with WordPress best practices.

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

How can I create a custom Gutenberg block?

Asked on Nov 04, 2025

Answer

The Q&A Network