如何将完全自定义添加到自定义 wordpress gutenberg 块中？

Question

我正在编写自己的自定义 wordpress 块。在编辑器中它看起来像这样： edtor screenshot

保存后看起来像这样： page screenshot

问题是我正在使用 RichText wordpress 组件作为块右侧的文本，但我无法在其中添加一些列表、按钮或其他媒体。如何将此功能添加到我的自定义块？

Answer 1

使用 InnerBlocks to create a container block for multiple different components. In your screenshot example, instead of using a RichText control, the core/paragraph 块具有格式控制，如果需要还可以将段落转换为列表。

如果您的块设计是 'fixed' 布局，其中总是有“文本/列表/按钮”，您可以定义一个模板，其中允许在 InnerBlocks 中使用哪些块，然后将模板锁定为新的块不能添加，例如：

const MY_TEMPLATE = [
    ['core/paragraph'],
    ['core/list'],
    ['core/buttons'],
];

// ...
edit: () => {
    return (
        <InnerBlocks
            templateLock="all" // optional
            template={MY_TEMPLATE}
        />
    );
},

上面的示例将在编辑器中创建一个块布局，如下所示：

有关如何实施 InnerBlocks 的完整概述和示例，请参阅 WordPress 开发人员文档： https://developer.wordpress.org/block-editor/tutorials/block-tutorial/nested-blocks-inner-blocks/

如何将完全自定义添加到自定义 wordpress gutenberg 块中？

How to add full customization into custom wordpress gutenberg block?

wordpress

wordpress-theming

wordpress-gutenberg