How do I create a custom block for the WordPress block editor?

Question

This question explores WordPress and addresses practical considerations related to: How do I create a custom block for the WordPress block editor?

Q&A Network · Accepted Answer

Creating a custom block for the WordPress block editor involves using the Block API provided by WordPress. This typically requires some knowledge of JavaScript, especially React, as blocks are built using these technologies.

( function( blocks, editor, i18n, element ) {
        var el = element.createElement;
        var __ = i18n.__;
        var RichText = editor.RichText;

blocks.registerBlockType( 'my-plugin/my-custom-block', {
            title: __( 'My Custom Block', 'my-plugin' ),
            icon: 'universal-access-alt',
            category: 'common',
            attributes: {
                content: {
                    type: 'string',
                    source: 'html',
                    selector: 'p',
                },
            },
            edit: function( props ) {
                var content = props.attributes.content;

function onChangeContent( newContent ) {
                    props.setAttributes( { content: newContent } );
                }

return el(
                    RichText,
                    {
                        tagName: 'p',
                        className: props.className,
                        onChange: onChangeContent,
                        value: content,
                    }
                );
            },
            save: function( props ) {
                return el( RichText.Content, {
                    tagName: 'p',
                    value: props.attributes.content,
                } );
            },
        } );
    } )( window.wp.blocks, window.wp.blockEditor, window.wp.i18n, window.wp.element );

ADDITIONAL COMMENT:

Ensure you have a development environment set up with Node.js and npm to manage dependencies and build processes.
Use the `@wordpress/scripts` package to simplify the build setup for your block.
Register your block in a JavaScript file and enqueue it using `wp_enqueue_script` in your theme or plugin.
Consider using the WordPress Block Editor Handbook for detailed guidance on block development.

✅

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

How do I create a custom block for the WordPress block editor?

Asked on Mar 14, 2026

Answer

Real Questions. Clear Answers.