WordPress ошибка загрузки блока неверный параметр attributes

I am attempting to extend an existing block which is registered in the Tasty Recipes plugin. I’ve added a control to the sidebar to handle selection of a given diet type, however when an option is selected, the following error is displayed:

Error loading block: Invalid parameter(s): attributes

Currently running on WordPress 5.2.1 and I am attempting to extend the 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');

Hoping I’m missing something simple… Not entirely familiar with Gutenberg so I could definitely just be misunderstanding the docs.

I managed to get an attribute working in my plugin. Well, sort of. I can read and write the attribute props.attributes.content . But I get the message in the Gutenberg block itself:

Error loading block: Invalid parameter(s): attributes

And in the network inspector I see a 400:

data: {status: 400, params: {attributes: «content is not a valid property of Object.»}}
params: {attributes: «content is not a valid property of Object.»}

Here is the relevant code:

registerBlockType('simpletoc/toc', {
  title: __('SimpleTOC', 'simpletoc'),
  icon: simpletocicon,
  category: 'layout',
  attributes: {
        content: {
            type: 'string',
      source: 'text',
      selector: 'div',
        },
    },
  edit: function(props) {
    props.setAttributes( { content: "newContent" } );
    
    console.info(props.attributes.content);

    const mycontent = props.attributes.content;

    return (
    <div>
    <InspectorControls>
      <ToggleControl
          label={mycontent}
      />
    </InspectorControls>
    <BlockControls>
      <ToolbarGroup>
        <ToolbarButton
          className="components-icon-button components-toolbar__control"
          label={__('Update table of contents', 'simpletoc')}
          onClick={function() {
            sendfakeAttribute(props)
          }}
          icon="update"
        />
      </ToolbarGroup>
  </BlockControls>
  <p className={props.className}>
    <ServerSideRender block={props.name} attributes={props.attributes} />
  </p>
  </div>
    )
  },
  save: props => {
    return null;
  },
});

But I can write the attribute with

props.setAttributes( { content: "newContent" } );

with console.info and my ToggleControl I can actually read the value! What is going on?

Я пытаюсь расширить существующий блок, который зарегистрирован в плагине Tasty Recipes. Я добавил элемент управления на боковую панель для обработки выбора данного типа диеты, однако, когда выбран вариант, отображается следующая ошибка:

Ошибка при загрузке блока: неверные параметры: атрибуты

В настоящее время работает на WordPress 5.2.1, и я пытаюсь расширить плагин Tasty Recipes

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

Надеюсь, я упускаю что-то простое… Не совсем знаком с Гутенбергом, так что я могу просто неправильно понять документы.

Describe the bug
When trying to use the Filter by Tag block, after selecting a tag, I get an error shown within the block.

Error loading block: Invalid parameter(s): attributes

To Reproduce
Steps to reproduce the behavior:

1. Add Filter by Tag block a page.
2. Select a tag to display
3. See error

Expected behavior
I expected to be able to see my tagged products.
Screenshots

Image link: https://cld.wthms.co/siTTkj

Image link: https://cld.wthms.co/zJP6Eg

WordPress (please complete the following information):

• Core version: 5.3
• Gutenberg version (if installed): 6.9.0
• WooCommerce version: 3.8.0
• WooCommerce Blocks version: 2.5.0
• Site language: English
• Any other plugins installed:

### Active Plugins (24) ###

Query Monitor: by John Blackbourn – 3.4.0
Animated Blocks: by Virgiliu Diaconu – 1.0.5
Atomic Blocks - Gutenberg Blocks Collection: by atomicblocks – 2.2.0
AutomateWoo: by WooCommerce – 4.7.3
Block Gallery: by GoDaddy – 1.1.6
CoBlocks: by GoDaddy – 1.17.2
Code Snippets: by Shea Bunge – 2.13.3
Email Log: by Sudar – 2.3.1
Gutenberg: by Gutenberg Team – 6.9.0
Jetpack by WordPress.com: by Automattic – 7.9.1
Posts List Block: by Automattic – 1.1
User Switching: by John Blackbourn & contributors – 1.5.3
WooCommerce Blocks: by Automattic – 2.5.0
WooCommerce Admin: by WooCommerce – 0.22.0
WooCommerce Advanced Shipping Packages: by Jeroen Sormani – 1.1.6 – Not tested with the active version of WooCommerce
WooCommerce PayPal Checkout Gateway: by WooCommerce – 1.6.17 – Not tested with the active version of WooCommerce
WooCommerce PayPal Pro (Classic and PayFlow Editions) Gateway: by WooCommerce – 4.4.17 – Not tested with the active version of WooCommerce
WooCommerce Stripe Gateway: by WooCommerce – 4.3.1
WooCommerce Points and Rewards: by WooCommerce – 1.6.25
WooCommerce Product Bundles: by SomewhereWarm – 5.14.0
WooCommerce FedEx Shipping: by WooCommerce – 3.4.24
WooCommerce USPS Shipping: by WooCommerce – 4.4.35
WooCommerce Square: by WooCommerce – 2.0.7
WooCommerce: by Automattic – 3.8.0

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.