如何为 Gutenberg Block Editor (WordPress) 定义 InnerBlocks 模板的默认样式

Question

我正在使用 gutenbergs 的核心块使用 InnerBlock 制作另一个块。所以，我想改变他们的默认样式，比如文本对齐 center.To 开始，我使用官方支持的方式来创建块 Create-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: '0' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/button', { placeholder : 'Buy Now' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

WordPress 使用 has-text-align-left class 对齐块中的文本。有什么方法可以在 core/button 的文本对齐中定义默认样式以在模板内居中。

Answer 1

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

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

生成的 HTML 应用了 built-in 样式 aligncenter，按钮现在居中对齐：

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

如何为 Gutenberg Block Editor (WordPress) 定义 InnerBlocks 模板的默认样式

How to define default style for InnerBlocks template for Gutenberg Block Editor (WordPress)

wordpress

reactjs

wordpress-gutenberg

gutenberg-blocks