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

How can I create a custom Gutenberg block with React components?

Asked on Oct 20, 2025

Answer

Creating a custom Gutenberg block with React components involves using the WordPress Block Editor's JavaScript APIs. You'll primarily work with `@wordpress/scripts` to set up your development environment and `@wordpress/blocks` to register the block.

<!-- BEGIN COPY / PASTE -->
    // Import necessary WordPress packages
    import { registerBlockType } from '@wordpress/blocks';
    import { useBlockProps } from '@wordpress/block-editor';

    // Register a new block
    registerBlockType('my-plugin/my-custom-block', {
      title: 'My Custom Block',
      icon: 'smiley',
      category: 'widgets',
      edit: () => {
        const blockProps = useBlockProps();
        return (
          <div {...blockProps}>
            <p>Hello, Gutenberg!</p>
          </div>
        );
      },
      save: () => {
        const blockProps = useBlockProps.save();
        return (
          <div {...blockProps}>
            <p>Hello, Gutenberg!</p>
          </div>
        );
      },
    });
    <!-- END COPY / PASTE -->

Additional Comment:

Ensure you have Node.js and npm installed to use `@wordpress/scripts` for building your block.
Use `wp-scripts` to manage your build process, which simplifies the setup of Babel and Webpack.
Consider using `create-guten-block` as a boilerplate to quickly scaffold a new block project.
Test your block thoroughly in the WordPress editor to ensure compatibility and performance.

✅ Answered with WordPress best practices.

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

How can I create a custom Gutenberg block with React components?

Asked on Oct 20, 2025

Answer

The Q&A Network