4

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.

0 Answers0