将相同的自定义样式注册到古腾堡中的多个块类型

Question

我想为不止一种块类型添加一些样式。

目前我正在为每个这样的块类型执行此操作，例如仅将 'core/paragraph' 部分更改为 'core/heading'。

有没有办法同时对多个区块执行此操作？

wp.blocks.registerBlockStyle(
'core/paragraph',
[
    {
        name: 'default',
        label: 'Default',
        isDefault: true,
    },
    {
        name: 'lead',
        label: 'Lead',
    },
    {
        name: 'subline',
        label: 'Subline',
    },
]
);

Answer 1

如果您知道要添加样式的块的名称，则可以在 forEach() 循环中使用 registerBlockStyle() 将多个样式批量注册到多个块，例如：

const blocks = ["core/quote", "core/heading", "core/paragraph"]; //etc..

const styles = [
    {
        name: 'default',
        label: 'Default',
        isDefault: true,
    },
    {
        name: 'lead',
        label: 'Lead',
    },
    {
        name: 'subline',
        label: 'Subline',
    }
];

// Loop through each block and register all custom styles in one go..
blocks.forEach(function(blocks) {
    wp.blocks.registerBlockStyle(blocks, [...styles]);
});

要查找所有当前注册的块的名称，请使用：

wp.blocks.getBlockTypes().map(block => block.name);

即使您可以将您的样式应用到每个块，请仅在需要的块上谨慎使用它 - 不要同时使用所有块..

将相同的自定义样式注册到古腾堡中的多个块类型

Register same custom styles to multiple block types in gutenberg

javascript

wordpress

wordpress-gutenberg