WordPress：如何为Gutenberg groups区块添加aligncenter对齐选项

完全可以扩展核心区块的基础设置，WordPress块编辑器提供了官方的过滤器机制用于修改核心区块的配置、控件和渲染逻辑，不需要修改核心代码。

实现逻辑 #

Group区块默认只声明了wide和full两种对齐支持，我们只需要通过块编辑器的JS过滤器修改它的supports.align配置，追加center选项即可，添加后会和图片等区块的对齐控件完全一致，不需要自定义额外UI。

具体实现步骤 #

• 第一步：编写编辑器侧JS代码，修改Group区块配置

wp.hooks.addFilter(
  'blocks.registerBlockType',
  'custom/extend-group-align',
  (settings, blockName) => {
    // 只针对核心Group区块修改
    if (blockName === 'core/group') {
      return {
        ...settings,
        supports: {
          ...settings.supports,
          // 原有对齐配置基础上追加center
          align: [...settings.supports.align, 'center']
        }
      };
    }
    return settings;
  }
);

• 第二步：将上述JS文件入队到块编辑器环境
  需要在主题的functions.php或者自定义插件中添加PHP入队逻辑：

add_action('enqueue_block_editor_assets', function () {
  wp_enqueue_script(
    'custom-group-align-extension',
    // 替换为你实际的JS文件路径
    get_template_directory_uri() . '/assets/js/group-align-extension.js',
    // 依赖的编辑器脚本包
    array('wp-blocks', 'wp-hooks'),
    filemtime(get_template_directory() . '/assets/js/group-align-extension.js')
  );
});

• 第三步：补全对齐样式（可选）
  如果你的主题已经默认支持区块的aligncenter样式，这一步可以跳过，否则需要添加对应的CSS：

.wp-block-group.aligncenter {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wp--style--global--content-size);
}

补充说明 #

这种扩展方式是WordPress官方支持的标准扩展方案，和registerBlockStyle同属于块编辑器的原生扩展能力，区别在于：

• registerBlockStyle用于新增区块的样式变体，不会修改区块的原生设置控件
• 过滤器方案直接修改区块的原生配置，新增的对齐选项属于核心功能的一部分，和其他原生支持center对齐的区块体验完全统一

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