WordPress Gutenberg注册多个自定义块

Question

我正在尝试在Gutenberg中创建几个自定义块。它只允许我一次注册一个。

我尝试将recipe_card_block()和first_block()组合使用，但这无济于事。

两个块分别正常工作。如果删除recipe_card_block()，first_block()将出现在插入器中（反之亦然）。但是，当两者同时出现时，只会显示第一个。更改它们的注册顺序会影响出现的顺序。

在我看来，他们在某种程度上互相覆盖，但我不知道这是怎么回事。

这是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' );

这是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>
        );
    },
} );

最后，这是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>
        );
    },
} );

Answer 1

对于以后可能遇到此问题的任何人：

查看我发布的两个js文件的顶部。一个文件中声明的常量由所有后续注册的块共享。所以发生的事情是当我注册first-block时定义了常量。当我注册recipe-card时，它将尝试在文件顶部定义常量，但是它们已经由first-block定义了。

recipe-card.js的代码应删除first-block已经定义的常量。

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>
        );
    },
} );