如何在Gutenberg区块开发中设置core/buttons区块默认居中对齐

正确解决方案：使用contentJustification属性 #

core/buttons区块的内容对齐是通过**contentJustification**属性控制的，这是官方推荐的原生属性，既能实现默认居中，还能避免编辑器交互冲突，完全替代硬编码类的方案。

修改你的模板代码如下：

const CUSTOM_TEMPLATE = [
    [
        "core/heading",
        {
            placeholder: "Enter title here",
            textAlign: "center",
        },
    ],
    [
        "core/buttons",
        {
            className: "mrz-cta-button",
            contentJustification: "center", // 控制按钮组对齐的正确属性
        },
        [
            [
                "core/button",
                {
                    placeholder: "Click Now",
                    text: "Click Me",
                },
            ],
        ],
    ],
];

为什么之前的方法无效？ #

• align属性是用来控制区块在编辑器画布中的整体布局（比如全宽、宽屏），而非按钮组内部的内容对齐，所以对core/buttons无效。
• 硬编码is-content-justification-center类会和Gutenberg内部的样式控制逻辑冲突：编辑器切换对齐时会尝试添加/移除对应类，但手动写死的类不会被自动移除，导致切换左对齐时需要先点其他对齐再切回来才能生效。

额外优势 #

用contentJustification设置默认对齐后：

• 完全遵循Gutenberg原生设计，无样式冲突
• 用户在编辑器里可通过按钮组的对齐控件正常切换左/中/右对齐，属性会自动同步更新，无需额外处理。

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