WordPress Gutenberg BoxControl renders just input box

Question

I'm trying to use the BoxControl to edit the padding of top, right, bottom and left values. The following is a stripped-down example:

const { __ } = wp.i18n;
import metadata from './block.json';
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';
import { PanelBody, __experimentalNumberControl as BoxControl } from '@wordpress/components';
//
registerBlockType( metadata.name, {
  apiVersion: metadata.apiVersion,
  title: metadata.title,
  //
  edit: ( { attributes, setAttributes } ) => {
    const { content, padding } = attributes;
    const blockProps = useBlockProps( );
    //
    return (
      <>
      <InspectorControls key="setting">
        <PanelBody
          title={ __('Padding', 'givecamp-block-controls' ) }
          initialOpen={ false }
          >
          <BoxControl
            values={ padding }
            units={['px']}
            sides={['top', 'right', 'bottom', 'left']}
            allowReset={true}
            onChange={ ( values ) => setAttributes( { padding: values } ) }
          />
        </PanelBody>
      </InspectorControls>
      <RichText
        { ...blockProps }
        aria-hidden="true"
        tagName="p"
        placeholder={ 'Write text here ...' }
        value={ content }
        onChange={ ( value ) => setAttributes( { content: value } ) }
      />
      </>
    );
  },
  save: ( { attributes } ) => {
    const { content } = attributes;
    const blockProps = useBlockProps.save( );
    //
    return (
      <>
      <RichText
        { ...blockProps }
        aria-hidden="true"
        tagName="p"
        value={ content }
      />
      </>
    );
  },
} );

The following is a snippet of block.json:

 {
    ...
    "attributes": {
        "content":  {
            "type": "string",
            "source": "html",
            "selector": "p",
            "default": ""
        },
        "padding": {
            "type": "object",
            "default": { "top": "5px", "right": "2px", "bottom": "5px", "left": "2px" }
        }
    },
    ...
 }

In page edit, I only see a rectangle input box. It does not look like the following:

https://wp-gb.com/boxcontrol/

When I change a value, it changes to a single value, not an object. What is not configured correctly?

Answer 1

Your import statement is importing the wrong component for BoxControl, change:

import { PanelBody, __experimentalNumberControl as BoxControl } from '@wordpress/components';

to:

import { PanelBody, __experimentalBoxControl as BoxControl } from '@wordpress/components';