UnitControl - Block has encountered an error

Question

I am trying to use UnitControl in my custom Gutenberg block to define the line-height of text. I receive the "This block has encountered an error and cannot be previewed" when I try to access the block in the WordPress editor. I am unsure what is causing this error. I've even tried removing references to the UnitControl in the return and save such as lineHeight:headlineSpacing to see if it would stop flagging the error. It still gives me the error so I am unsure if I am using UnitControl correctly at all or if perhaps I've made a mistake in the <UnitControl> element.

CODE:

const { registerBlockType } = wp.blocks;
const { 
    RichText, 
    InspectorControls, 
    ColorPalette,
    MediaUpload,
    MediaUploadCheck,
    Button,
    RawHTML,
    FontSizePicker,
    __experimentalUnitControl,
    InnerBlocks
} = wp.blockEditor;

const { PanelBody, IconButton } = wp.components;

registerBlockType('mycustomsite/small-jumbo', {
    //Built-in Attributes
    title: 'Small Jumbo',
    description: 'Block to generate a smaller jumbotron',
    icon: 'align-full-width',
    category: 'design',

    //Custom Attributes
    attributes: {
        title: {
        type: 'string',
        source: 'html',
        selector: 'h1'
        }
    },

    //Built-in Functions
    edit({attributes, setAttributes}) {
        const{
            title,
            headlineSize,
            headlineSpacing,
        } = attributes;

        const headlineSizes = [
            {
                name: '14px',
                slug: 'fourteen',
                size: 14
            },
            {
                name: '16px',
                slug: 'sixteen',
                size: 16
            },
            {
                name: '18px',
                slug: 'eighteen',
                size: 18
            },
            {
                name: '24px',
                slug: 'twentyfour',
                size: 24
            }
        ];

        //Custom Functions

        function onChangeTitle(newTitle) {
            setAttributes( { title: newTitle } );
        }

        function onChangeHeadlineSize( newHeadlineSize ) {
            setAttributes( { headlineSize: newHeadlineSize } );
        }

        function onChangeHeadlineSpacing( newHeadlineSpacing) {
            setAttributes( { headlineSize: newHeadlineSpacing } );
        }

        return ([
            <InspectorControls style={ { marginBottom: '40px' } }>
                <p><strong>Customize Top Text</strong></p>
                <PanelBody title={ 'Headline Size' }>
                    <FontSizePicker
                        fontSizes={ headlineSizes }
                        value={ headlineSize }
                        onChange={ onChangeHeadlineSize }
                    />
                    </PanelBody>
                    <PanelBody title={ 'Line Height' }>
                    <UnitControl
                        label="Line Height"
                        isUnitSelectTabbable
                        value={ headlineSpacing } 
                        onChange={ onChangeHeadlineSpacing }
                    />
                </PanelBody>
            </InspectorControls>,

        <div> 
            <RichText 
                key="editable"
                tagName="h1"
                placeholder="H1 Title" 
                value= { title }
                onChange= { onChangeTitle }
                style= { { fontSize:headlineSize, lineHeight:headlineSpacing} }
            />
        </div>
        ]);
    },

    save({ attributes }) {
        const {
        title,
        headlineSize,
        headlineSpacing,
        } = attributes;

        return (
            <div>
                <RichText.Content style={ {fontSize:headlineSize, lineHeight:headlineSpacing } } tagName="h1" value={title} />
            </div>
        );
    }
});

Answer 1

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