如何修复 WordPress 中的“错误加载块：无效参数：属性”错误

Question

我正在尝试扩展在 Tasty Recipes 插件中注册的现有块。我在侧边栏添加了一个控件来处理给定饮食类型的选择，但是当选择一个选项时，会显示以下错误：

加载块时出错：无效参数：属性

目前在 WordPress 5.2.1 上运行，我正在尝试扩展Tasty Recipes 插件

扩展TastyRecipes.js

/**
 * Add custom attribute to store diet type
 */

var addCustomAttributes = function( settings, name ) {

    if ( name !== 'wp-tasty/tasty-recipe' ) {
        return settings;
    }

    settings.attributes = Object.assign( settings.attributes, {
        dietType: {
            type: 'string',
            // ? Setting default here causes break
        },
    } );

    return settings;
}

wp.hooks.addFilter( 'blocks.registerBlockType', 'wp-tasty/tasty-recipe', addCustomAttributes );


/**
 * Create HOC to add diet type control to inspector controls of block.
 */
var el = wp.element.createElement;
var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
    return function ( props ) {

        function onChangeDietType (newDietType) {
            props.setAttributes( { dietType: newDietType } );
        }

        return el(
            wp.element.Fragment,
            {},
            el(
                BlockEdit,
                props
            ),
            el(
                wp.editor.InspectorControls,
                {},
                el(
                    wp.components.PanelBody,
                    {},
                    el (
                        wp.components.SelectControl,
                        {
                            label: 'Diet Type',
                            onChange: onChangeDietType,
                            options: [
                                { label: 'Paleo', value: 'paleo' },
                                { label: 'Vegan', value: 'vegan' },
                                { label: 'Vegetarian', value: 'vegetarian' },
                            ],
                        },
                    )
                )
            )
        );
    };
    }, 'withInspectorControls' );
    wp.hooks.addFilter( 'editor.BlockEdit', 'wp-tasty/tasty-recipe', withInspectorControls );


    /**
     * Not sure this is even necessary as the plugin I'm extending handles rendering on server
     *  -- extra --
     * @param {Object} extraProps 
     * @param {Object} blockType 
     * @param {Object} attributes 
     */
    function addSaveProps( element ) {
        return element; // This returns null
    }
    wp.hooks.addFilter( 'blocks.getSaveElement', 'wp-tasty/tasty-recipe', addSaveProps );

函数.php

/**
 * Add custom attribute to store diet type
 */

var addCustomAttributes = function( settings, name ) {

    if ( name !== 'wp-tasty/tasty-recipe' ) {
        return settings;
    }

    settings.attributes = Object.assign( settings.attributes, {
        dietType: {
            type: 'string',
            // ? Setting default here causes break
        },
    } );

    return settings;
}

wp.hooks.addFilter( 'blocks.registerBlockType', 'wp-tasty/tasty-recipe', addCustomAttributes );


/**
 * Create HOC to add diet type control to inspector controls of block.
 */
var el = wp.element.createElement;
var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
    return function ( props ) {

        function onChangeDietType (newDietType) {
            props.setAttributes( { dietType: newDietType } );
        }

        return el(
            wp.element.Fragment,
            {},
            el(
                BlockEdit,
                props
            ),
            el(
                wp.editor.InspectorControls,
                {},
                el(
                    wp.components.PanelBody,
                    {},
                    el (
                        wp.components.SelectControl,
                        {
                            label: 'Diet Type',
                            onChange: onChangeDietType,
                            options: [
                                { label: 'Paleo', value: 'paleo' },
                                { label: 'Vegan', value: 'vegan' },
                                { label: 'Vegetarian', value: 'vegetarian' },
                            ],
                        },
                    )
                )
            )
        );
    };
    }, 'withInspectorControls' );
    wp.hooks.addFilter( 'editor.BlockEdit', 'wp-tasty/tasty-recipe', withInspectorControls );


    /**
     * Not sure this is even necessary as the plugin I'm extending handles rendering on server
     *  -- extra --
     * @param {Object} extraProps 
     * @param {Object} blockType 
     * @param {Object} attributes 
     */
    function addSaveProps( element ) {
        return element; // This returns null
    }
    wp.hooks.addFilter( 'blocks.getSaveElement', 'wp-tasty/tasty-recipe', addSaveProps );

希望我错过了一些简单的东西......不完全熟悉古腾堡，所以我肯定只是误解了文档。