How properly use social link block in template part

Question

How I must use social links block in template part?

This variance give me that icons don't render in frontend part:

1.

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link /--></ul>
<!-- /wp:social-links -->

<!-- wp:social-links /-->

I don't understand, why it don't working - others blocks like

<!-- wp:site-logo /-->
<!-- wp:site-title /-->
<!-- wp:navigation /-->

works perfectly

Answer 1

Different blocks work differently. Some blocks are just a comment, while some require HTML. Others depend on inner blocks for their actual content. The Social Links block is a wrapper block and each social link is a variation of the Social Link block.

But no matter how the block actually works, the easiest way to get the markup for use in a template part is to add it to the editor an copy and paste the result. If I add a Social Links block with two links inside it then this is what the markup looks like (indentation corrected for clarity):

<!-- wp:social-links -->
<ul class="wp-block-social-links">
    <!-- wp:social-link {"service":"facebook"} /-->
    <!-- wp:social-link {"service":"twitter"} /-->
</ul>
<!-- /wp:social-links -->