UnitControl - Block has encountered an error

The problem in your code is that UnitControl is not actually defined anywhere:

If you look at the example in the documentation, the UnitControl is defined as follows:

import { __experimentalUnitControl as UnitControl } from '@wordpress/components';

I.e. It uses the __experimentalUnitControl component in wp.components and not wp.blockEditor, and secondly, it imports the component as UnitControl.

So you should also do the same.

And the equivalent syntax with the const keyword is:

const { __experimentalUnitControl: UnitControl } = wp.components;
// I.e. const { <actual name>: <alias> }

So you should remove the __experimentalUnitControl, line in your code and import the one in the wp.components (or the @wordpress/components package) instead. I.e.

// Change this:
const { PanelBody, IconButton } = wp.components;

// to this one:
const {
    PanelBody,
    IconButton,
    __experimentalUnitControl: UnitControl
} = wp.components;

And with that, the error “This block has encountered an error” would now be gone.

Additional Issues in your code:

~~You’ve made a typo in your onChangeTitle() code: You misspelled setAttributes as etAttributes and it will cause an error because etAttributes is not defined. 🙂~~

~~And secondly,~~ if you return an array of elements, then you should set a key for each of the elements:

return ([ // add a key for each direct child
    <InspectorControls style={ { marginBottom: '40px' } } key="foo-key">
        ...
    </InspectorControls>,

    <div key="bar-key">
        ...
    </div>
]);

Additional Issues in your code:

Related Posts: