如何为古腾堡块编辑器 (WordPress) 的 InnerBlocks 模板定义默认样式

Question

我正在使用古腾堡的核心块来使用 InnerBlock 制作另一个块。所以，我想更改它们的默认样式，例如文本对齐中心。首先，我使用官方支持的方式来创建块 创建 Guten-Block。我的代码如下：

import {
    InnerBlocks, useBlockProps
} from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
    return (
        <div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/paragraph', { content: '$200' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/button', { placeholder : 'Buy Now' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

WordPress uses has-text-align-left class to align a text in the block. Is there any way to define default style inside the core/button's text-align to center inside the template.

Answer 1

是的，core/button 块 支持对齐并且可以在InnerBlocks模板内的块属性align中设置，例如：

...
    ['core/button', { placeholder: 'Buy Now', align: 'center' }],
...

生成的HTML将应用内置样式aligncenter并且按钮现在居中对齐：

<div class="wp-block-button aligncenter">
    <a class="wp-block-button__link">Buy Now</a>
</div>