古腾堡块开发中如何设置核心/按钮块默认居中对齐？

Question

我正在开发一个自定义古腾堡块，我在自定义块模板中使用核心/按钮块。我希望在渲染块时默认将按钮对齐到中心，但我还没有找到任何使用对齐属性或类似设置来实现此目的的直接方法。

这是我尝试过的：

• 使用

  align

  属性并将其设置为

  center

  ，但它似乎不适用于

  core/buttons

  块。

• 我尝试使用

  className

  属性来添加

  is-content-justification-center

  类作为 hack，但这种方法有一些问题。具体来说，即使我将对齐方式设置为左，由于硬编码的类，按钮仍保持居中。为了正确地将按钮移动到左侧，我必须首先单击居中或右对齐，然后单击左对齐。这是该问题的屏幕截图：https://prnt.sc/vZ0yKfZ7XJah。

这是我当前代码的一部分：

const CUSTOM_TEMPLATE = [
    [
        "core/heading",
        {
            placeholder: "Enter title here",
            textAlign: "center",
        },
    ],
    [
        "core/buttons",
        {
            className: "mrz-cta-button is-content-justification-center", // Hack to force center alignment
            align: "center", // Not working
        },
        [
            [
                "core/button",
                {
                    placeholder: "Click Now",
                    text: "Click Me",
                    align: "center", // Not working
                },
            ],
        ],
    ],
];

我在寻找：

• 是否有一种干净、推荐的方法将核心/按钮块的默认对齐方式设置为居中？

• 可以使用属性或更合适的方法来实现这一点，而不是依赖手动添加类吗？

任何有关如何处理此问题的帮助或见解将不胜感激！

Answer 1

Buttons 块中所有子按钮的对齐方式由

layout

属性（

justifyContent: "center"

的

core/buttons

）控制。在您的模板中，将其调整为：

const CUSTOM_TEMPLATE = [
        ...
        [
            "core/buttons",
            {
                // nb. remove additional classes that replicate centering
                layout:
                {
                    type: "flex", // required
                    justifyContent: "center" // controls layout of child buttons
                }
            },
            [
                [
                    "core/button",
                    {
                        placeholder: "Click Now",
                        text: "Click Me",
                    },
                ],
            ],
        ],
    ];

其他

justifyContent

选项包括

left

、

right

和

space-between

（均与弹性框相关）。如果您想查找在模板中使用的其他属性，最快的方法是使用 UI 控件在编辑器中创建块，然后切换到代码视图以发现属性。