javascript - UnitControl - Block has encountered an error

admin管理员组

文章数量:1303412

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 } = wpponents;

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

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 } = wpponents;

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

• javascript
• block-editor

Share Improve this question edited Mar 18, 2021 at 18:55 user5854648 asked Mar 18, 2021 at 17:48 user5854648user5854648 1631717 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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 wpponents 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 } = wpponents;
// I.e. const { <actual name>: <alias> }

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

// Change this:
const { PanelBody, IconButton } = wpponents;

// to this one:
const {
    PanelBody,
    IconButton,
    __experimentalUnitControl: UnitControl
} = wpponents;

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

本文标签： javascriptUnitControlBlock has encountered an error