如何修复WordPress中的``错误加载块:无效参数:属性''错误

时间:2019-06-06 22:18:16

标签: wordpress wordpress-gutenberg gutenberg-blocks

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

  

错误加载块:无效参数:属性

当前在WordPress 5.2.1上运行,我正在尝试扩展Tasty Recipes Plugin

extendTastyRecipes.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 );

functions.php

function extendTastyRecipes() {

    $blockPath = get_stylesheet_directory_uri() . '/assets/scripts/modules/extendTasyRecipes.js';

    wp_enqueue_script(
        'extend-tasty-recipes-js',
        $blockPath,
        [ 'wp-i18n', 'wp-edit-post', 'wp-element', 'wp-editor', 'wp-components', 'wp-data', 'wp-plugins', 'wp-edit-post', 'wp-api' ]
    );
}
add_action('init', 'extendTastyRecipes');

希望我缺少一些简单的东西...对古腾堡并不完全熟悉,所以我肯定会误会文档。

0 个答案:

没有答案