Gutenberg InnerBlock.Content is not being saved or rendered in the front end

Question

I created a custom block for author-bio and i have included the social icons built-in block into my custom block

after importing InnerBlocks into my block js file i have used this code in edit function:

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

and to display social icons in the frontend i have used this code:

<InnerBlocks.Content/>

But it saved and rendered only in the editor and does not saved or rendered in the frontend

How to make it rendered and displayed in the frontend

Could you please post the code of your `save()` function of your custom block? If you are only seeing the content in the Editor, the issue is likely within the `save()` function or the save function is missing/undefined. — S.Walsh, Feb 09 '23 at 10:57

score 0 · Answer 1 · answered Feb 11 '23 at 11:40

The Social Links block actually consists of two blocks: the parent [core/social-link] and one or more child [core/social-links] blocks. In your allowedBlocks, you are restricting the <InnerBlocks> to only allow the parent [core/social-link] which removes the child blocks from save() even if they are defined in the template.

Example setup for edit():

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>
    )
}

Gutenberg InnerBlock.Content is not being saved or rendered in the front end

1 Answers1