Is there an obvious error in this React code for customizing a Gutenberg Block?

Question

I am trying to add a select field and a title field to a certain block. I used this example as starting point:

https://www.liip.ch/en/blog/how-to-extend-existing-gutenberg-blocks-in-wordpress

My code is


const { assign } = lodash;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;

// Enable content type on the following blocks
const enableBlockContentTypeAttribute = [
    'uagb/section',
];

// Available content type options
const contenttypeControlOptions = [
    {
        label: __( 'None' ),
        value: '',
    },
    {
        label: __( 'Exercise' ),
        value: 'exercise',
    },
    {
        label: __( 'Workshop' ),
        value: 'workshop',
    },
    {
        label: __( 'Something' ),
        value: 'something',
    },
];

/**
 * Add content type and content title attribute to block.
 *
 * @param {object} settings Current block settings.
 * @param {string} name Name of block.
 *
 * @returns {object} Modified block settings.
 */
const addBlockContentTypeAttribute = ( settings, name ) => {
    // Do nothing if it's another block than our defined ones.

    if ( ! enableBlockContentTypeAttribute.includes( name ) ) {
        return settings;
    }
    console.log('Add content type option');
    // Use Lodash's assign to gracefully handle if attributes are undefined
    settings.attributes = assign( settings.attributes, {
        contenttype: {
            type: 'string',
            default: contenttypeControlOptions[ 0 ].value,
        },
        contenttitle: {
            type: 'string',
            default: '',
        }

    } );

    return settings;
};

addFilter( 'blocks.registerBlockType', 'my-mods/attribute/contenttype', addBlockContentTypeAttribute );

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody, PanelRow, SelectControl, TextControl } = wp.components;

/**
 * Create HOC to add content type control to inspector controls of block.
 */
const withContentTypeControl = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
    // Do nothing if it's another block than our defined ones.
    if ( ! enableBlockContentTypeAttribute.includes( props.name ) ) {
        return (
            <BlockEdit { ...props } />
        );
    }
    console.log(props.attributes);
    const { contenttype } = props.attributes;
    const { contenttitle } = props.attributes;

    // add has-contenttype class to block
    if ( contenttype ) {
        props.attributes.className = `has-contenttype-${ contenttype }`;
    }

    function getContentTitle ( content ) {
        props.setAttributes({contenttitle: content});
    }

    return (
        <Fragment>
        <BlockEdit { ...props } />
            <InspectorControls>
                <PanelBody>
                    title={ __( 'Choose Content Type' ) }
                    initialOpen={ true }
                    <PanelRow>
                        <SelectControl>
                            label={ __( 'Content Type' ) }
                            value={ contenttype }
                            options={ contenttypeControlOptions }
                            onChange={ ( selectedContentTypeOption ) => {
                                props.setAttributes( {
                                    contenttype: selectedContentTypeOption,
                                } );
                            } }
                        </SelectControl>
                    </PanelRow>
                    <PanelRow>
                        <TextControl>
                            label={ __( 'Content Title' ) }
                            value={ contenttitle }
                            onChange={ ( getContentTitle ) => {
                                props.setAttributes( {
                                    contenttitle: getContentTitle,
                                });
                             }}
                        </TextControl>
                    </PanelRow>
                 </PanelBody>
            </InspectorControls>
        </Fragment>
);
};
}, 'withSpacingControl' );

addFilter( 'editor.BlockEdit', 'my-mods/with-contenttype-control', withContentTypeControl );

I am getting this error:

Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

When I go to the link I see

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Can’t figure out what is causing this. Everything was working fine when I just had the select control. Then added the text control and it broke. Ideas? I am new to React so probably something I am not understanding about syntax or something.

0
Brian 2 years 2019-11-22T07:01:19-05:00 0 Answers 82 views 0

Leave an answer

Browse
Browse