1

我正在尝试在 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>
        );
    },
} );
4

1 回答 1

3

对于将来可能遇到此问题的任何人：

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>
        );
    },
} );
于 2018-12-12T14:48:33.693 回答