Gutenberg InnerBlock.Content 未在前端保存或呈现答案

【问题标题】：Gutenberg InnerBlock.Content is not being saved or rendered in the front endGutenberg InnerBlock.Content 未在前端保存或呈现
【发布时间】：2023-02-11 19:45:41
【问题描述】：

我为 author-bio 创建了一个自定义块，并将社交图标内置块包含到我的自定义块中

将 InnerBlocks 导入我的块 js 文件后，我在编辑功能中使用了这段代码：

<InnerBlocks allowedBlocks={['core/social-links']} />

并在前端显示社交图标我使用了这段代码：

<InnerBlocks.Content/>

但它只在编辑器中保存和渲染，而不会在前端保存或渲染

如何让它在前端渲染显示

【问题讨论】：

您能否发布自定义块的save()函数的代码？如果您只能在编辑器中看到内容，则问题可能出在 save() 函数中，或者保存函数丢失/未定义。
我为保存功能添加的唯一代码行是 <InnerBlocks.Content/>

标签： wordpress-gutenberg gutenberg-blocks create-guten-block acf-gutenberg

【解决方案1】：

社交链接块实际上由两个块组成：父块[core/social-link]和一个或多个子块[core/social-links]。在你的allowedBlocks中，你将<InnerBlocks>限制为只允许父[core/social-link]从中删除子块节省（）即使它们是在 template 中定义的。

示例设置编辑（）:

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

export default function Edit({ attributes, setAttributes }) {

    const blockProps = useBlockProps();

    const SOCIAL_LINKS = [
        ['core/social-links', {}, [
            ['core/social-link', {
                url: "https://wordpress.com/me", // Required to render on frontend
                service: "wordpress",            // **
                label: "WordPress"
            }],
            ['core/social-link', {
                url: "https://example.com",      // Required to render on frontend
                service: "chain",                // **
                label: "My Site"
            }],
            ]
        ]];
        
    return (
        <div { ...blockProps }>
            <InnerBlocks
                allowedBlocks={['core/social-links', 'core/social-link']} // Parent & Child
                template={SOCIAL_LINKS}
            />
        </div>
    )
}

【讨论】：