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

Answer 1

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