WordPress Gutenberg BoxControl仅显输入框，值无法保存为对象问题

你的问题核心是BoxControl的属性配置和组件绑定不匹配，导致控件自动降级为单值输入模式，同时保存的值不符合预期。以下是具体错误点和修复方法：

1. block.json 属性定义错误（最关键） #

如果你的padding属性被定义为string或number类型，BoxControl会自动显示单个输入框，且保存为单值。必须将其定义为对象类型，并明确子属性结构：

错误配置示例： #

"attributes": {
  "padding": {
    "type": "string",
    "default": "0"
  }
}

正确配置示例： #

"attributes": {
  "padding": {
    "type": "object",
    "default": {
      "top": 0,
      "right": 0,
      "bottom": 0,
      "left": 0
    },
    "properties": {
      "top": { "type": "number" },
      "right": { "type": "number" },
      "bottom": { "type": "number" },
      "left": { "type": "number" }
    }
  }
}

• type: "object" 告诉Gutenberg这是一个多属性对象
• default 设置初始的四边默认值
• properties 明确子属性的类型，确保数据结构正确

2. 编辑器组件BoxControl绑定错误 #

即使属性定义正确，如果组件绑定的value不是对象，也会触发单输入框模式。确保value直接绑定到属性对象，并且onChange正确接收对象格式的新值：

错误组件示例： #

<BoxControl
  label="Padding"
  value={ attributes.padding } // 如果attributes.padding是字符串/数字，会显示单输入框
  onChange={ ( newValue ) => setAttributes( { padding: newValue } ) }
/>

正确组件示例： #

import { BoxControl } from '@wordpress/components';

// 确保attributes.padding是对象类型后，使用如下配置
<BoxControl
  label="Padding"
  value={ attributes.padding }
  onChange={ ( newValue ) => setAttributes( { padding: newValue } ) }
  allowReset={ true }
  enableUnits={ [ 'px', 'em', 'rem' ] } // 可选：启用常用单位
/>

当value为对象时，BoxControl会自动显示四边独立的输入控件（即你预期的多侧边样式）。

3. 保存函数的样式处理错误 #

如果在save函数中错误地直接使用padding对象作为CSS值，会导致前端渲染异常。需要将对象转换为符合CSS语法的字符串：

错误save函数示例： #

save( { attributes } ) {
  const { padding } = attributes;
  return <div style={ { padding } }>内容</div>; // 直接传对象会报错
}

正确save函数示例： #

save( { attributes } ) {
  const { padding } = attributes;
  // 将对象转换为CSS padding的简写格式
  const paddingStyle = padding 
    ? `${ padding.top || 0 }px ${ padding.right || 0 }px ${ padding.bottom || 0 }px ${ padding.left || 0 }px`
    : '';
  return <div style={ { padding: paddingStyle } }>内容</div>;
}

内容的提问来源于stack exchange，提问作者Phil Huhn