WordPress Gutenberg Zarejestruj wiele niestandardowych bloków

Próbuję stworzyć kilka niestandardowych bloków w obrębie Gutenberga. Pozwala mi rejestrować się tylko po jednym na raz.

Próbowałem połączyć recipe_card_block() i first_block(), ale to nie pomaga.

Oba bloki działają poprawnie indywidualnie. Jeśli usunę recipe_card_block(), first_block() pojawi się w inserterze (i odwrotnie). Jednak gdy oba są obecne, pojawi się tylko pierwszy. Zmiana kolejności, w jakiej są rejestrowane, wpływa na to, które z nich się pojawia.

Wydaje mi się, że jakoś się nadpisują, ale nie widzę, jak to się dzieje.

Oto kod w functions.php.

function recipe_card_block(){
    wp_register_script(
        'recipe-card-script', // name of script
        get_template_directory_uri() . '/js/recipe-card.js', // path to script
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ) // dependencies
    );

    wp_register_style(
        'recipe-card-style',
        get_template_directory_uri() . '/css/recipe-card-style.css',
        array( 'wp-edit-blocks' )
    );

    register_block_type('gadam/recipe-card', array(
        'editor_script' => 'recipe-card-script', // default script / script to define behavior within the editor
        'style'         => 'recipe-card-style' // default styles
    ) );
}
add_action( 'init', 'recipe_card_block' );

function first_block(){
    wp_register_script(
        'first-block-script', // name of script
        get_template_directory_uri() . '/js/first-block.js', // path to script
        array( 'wp-blocks', 'wp-element', 'wp-editor' ) // dependencies
    );
    // styles for editor view
    wp_register_style(
        'first-block-editor-style',
        get_template_directory_uri() . '/css/first-block-editor-style.css',
        array( 'wp-edit-blocks' )
    );
    // default styles
    wp_register_style(
        'first-block-style',
        get_template_directory_uri() . '/css/first-block-style.css',
        array( 'wp-edit-blocks' )
    );

    register_block_type('gadam/first-block', array(
        'editor_script' => 'first-block-script', // default script / script to define behavior within the editor
        'editor_style'  => 'first-block-editor-style', // styles for editor view
        'style'         => 'first-block-style' // default styles
    ) );
}
add_action( 'init', 'first_block' );

To jest kod w first-block.js

const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
const { Fragment } = wp.element;

registerBlockType( 'gadam/first-block', {
    title: 'First Block',
    icon: 'welcome-learn-more',
    category: 'custom-blocks',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p'
        },
        alignment: {
            type: 'string'
        },
        fontSize: {
            type: 'number',
            default: 18
        }
    },

    edit( { attributes, className, setAttributes } ) {
        const { content, alignment, fontSize } = attributes;
        const fontSizes = [
            {
                name: 'Small',
                slug: 'small',
                size: 14
            },
            {
                name: 'Normal',
                slug: 'normal',
                size: 18
            },
            {
                name: 'Large',
                slug: 'large',
                size: 24
            }
        ];

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

        function onChangeAlignment( newAlignment ) {
            setAttributes( { alignment: newAlignment } );
        }

        function onChangeFontSize( newFontSize ) {
            setAttributes( { fontSize: newFontSize } );
        }

        return (
            <Fragment>
                <BlockControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                </BlockControls>
                <InspectorControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                    <FontSizePicker
                        fontSizes={ fontSizes }
                        value={ fontSize }
                        onChange={ onChangeFontSize }
                    />
                </InspectorControls>
                <RichText
                    key="editable"
                    tagName="p"
                    className={ className }
                    style={ { textAlign: alignment, fontSize: fontSize } }
                    onChange={ onChangeContent }
                    value={ content }
                />
            </Fragment>
        );
    },

    save( { attributes } ) {
        const { content, alignment, fontSize } = attributes;
        const baseClass = 'wp-block-gadam-first-block';

        return (
            <div class="container">
                <div class={ baseClass }>
                    <RichText.Content
                        style={ { textAlign: alignment, fontSize: fontSize } }
                        value={ content }
                        tagName="p"
                    />
                </div>
            </div>
        );
    },
} );

I wreszcie, to jest recipe-card.js

const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
const { Fragment } = wp.element;

registerBlockType( 'gadam/recipe-card', {
    title: 'Recipe Card',
    icon: 'index-card',
    category: 'custom-blocks',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p'
        },
        alignment: {
            type: 'string'
        },
        fontSize: {
            type: 'number',
            default: 18
        }
    },

    edit( { attributes, className, setAttributes } ) {
        const { content, alignment, fontSize } = attributes;
        const fontSizes = [
            {
                name: 'Small',
                slug: 'small',
                size: 14
            },
            {
                name: 'Normal',
                slug: 'normal',
                size: 18
            },
            {
                name: 'Large',
                slug: 'large',
                size: 24
            }
        ];

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

        function onChangeAlignment( newAlignment ) {
            setAttributes( { alignment: newAlignment } );
        }

        function onChangeFontSize( newFontSize ) {
            setAttributes( { fontSize: newFontSize } );
        }

        return (
            <Fragment>
                <BlockControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                </BlockControls>
                <InspectorControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                    <FontSizePicker
                        fontSizes={ fontSizes }
                        value={ fontSize }
                        onChange={ onChangeFontSize }
                    />
                </InspectorControls>
                <RichText
                    key="editable"
                    tagName="p"
                    className={ className }
                    style={ { textAlign: alignment, fontSize: fontSize } }
                    onChange={ onChangeContent }
                    value={ content }
                />
            </Fragment>
        );
    },

    save( { attributes } ) {
        const { content, alignment, fontSize } = attributes;
        const baseClass = 'wp-block-gadam-recipe-card';

        return (
            <div class="container">
                <div class={ baseClass }>
                    <RichText.Content
                        style={ { textAlign: alignment, fontSize: fontSize } }
                        value={ content }
                        tagName="p"
                    />
                </div>
            </div>
        );
    },
} );