Gutenberg InnerBlocks 预定义块支持

Question

我正在使用 InnerBlocks 模板并添加预定义属性，如标题级别和段落占位符：

const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { level: 3 } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];
 
//...
 
    edit: () => {
        return (
            <InnerBlocks
                template={ MY_TEMPLATE }
                templateLock="all"
            />
        );
    },

这很好用，但我们如何为 block supports 添加预定义值？

例如，当注册一个块时，我可以设置支持值：

supports: {      
    className: false // Remove the support for the generated className.
    color: { // Text UI control is enabled.
        background: false, // Disable background UI control.
        gradients: true // Enable gradients UI control.
    }
}

如何通过 InnerBlocks 模板设置支撑值？例如，我想从块中删除默认的 wp-block- class 名称。我试过了：

const MY_TEMPLATE = [
  [ 'my-block/icon', { supports: { classname: false } } ],
  [ 'core/heading', {} ]
];

支撑没有传递到块。我怎样才能使这项工作？或者有别的办法吗

Answer 1

您的 InnerBlocks 模板在 supports: { classname: false }（是 case-sensitive）中有一个小错字，应该是 className:

const MY_TEMPLATE = [
  [ 'my-block/icon', { supports: { className: false } } ],
  ...
];

您的 my-block/icon 块注册中的支持定义是正确的。假设您的 save() 函数可以正确处理 <InnerBlocks.Content>，并修复了 className 拼写错误，它应该可以工作。

当在编辑器视图中检查应用到您的块的类时，仍然会有更多的类（例如“wp-block-my-block 等”）应用到您的块- 需要它们才能启用编辑器功能。要确认内部块上的支持是否正常工作，请在 post/page 发布后检查前端应用的类。

Gutenberg InnerBlocks 预定义块支持

Gutenberg InnerBlocks predefined block supports

reactjs

wordpress-gutenberg

gutenberg-blocks