WordPress Gutenberg自定义块：如何禁用或处理Dimensions宽度设置？

一、禁用该宽度控制功能 #

如果你不需要这个宽度设置选项，可直接在自定义块的注册配置中关闭尺寸相关支持：

1. JavaScript注册块时 #

在registerBlockType的supports配置里，精确关闭宽度控制：

registerBlockType( 'your-namespace/your-block', {
  // 其他块配置...
  supports: {
    dimensions: {
      width: false, // 仅关闭宽度控制
      // 若要完全关闭所有尺寸功能，直接设置为 dimensions: false
    },
  },
} );

2. PHP注册块时 #

对应在supports数组中配置：

register_block_type( 'your-namespace/your-block', array(
  // 其他块配置...
  'supports' => array(
    'dimensions' => array(
      'width' => false,
    ),
  ),
) );

全局禁用（不推荐） #

若需全局关闭所有块的该功能，可通过PHP过滤器修改编辑器设置：

add_filter( 'block_editor_settings_all', function( $settings ) {
  $settings['__experimentalFeatures']['layout']['allowCustomWidth'] = false;
  return $settings;
} );

注意：此选项属于实验性功能，后续Gutenberg版本可能调整。

二、处理宽度设置并实现保存 #

如果想保留宽度控制功能，需要让自定义块支持宽度属性，并完成保存与渲染逻辑：

1. 开启宽度支持 #

在块的supports中启用宽度控制：

supports: {
  dimensions: {
    width: true,
  },
},

2. 确保属性包含style #

如果自定义了块的attributes，需补充style属性（Gutenberg默认会自动处理，但若手动定义属性需添加）：

attributes: {
  style: {
    type: 'object',
    default: {},
  },
},

3. 编辑组件中应用样式 #

在编辑界面的组件里，将样式传递给块容器：

export default function Edit( { attributes } ) {
  const { style } = attributes;
  return (
    <div style={ style?.dimensions }>
      {/* 你的块内容 */}
    </div>
  );
}

4. 前端渲染时应用样式 #

PHP渲染场景

从块属性中提取样式并输出：

$style = $attributes['style'] ?? [];
$dimensions_css = isset( $style['dimensions'] ) ? wp_style_engine_get_styles( [ 'dimensions' => $style['dimensions'] ] )['css'] : '';

echo sprintf( '<div style="%s">', esc_attr( $dimensions_css ) );
// 渲染块内容
echo '</div>';

React前端渲染场景

和编辑组件逻辑一致，直接将样式应用到容器元素即可。

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