Description

The Social Icons Block doesn't receive the appropriate layout styles in the Post Content Block/Site Editor.

In the Block Editor, things look great.

By default the Social Icons block container has the following layout block support styles in the Block Editor:

{
    display: flex;
    gap: var( --wp--style--block-gap, 0.5em );
    flex-wrap: wrap;
    align-items: center;
}

Since #32083 we're rendering these styles via wp_footer in lib/block-supports/layout.php.

However since the styles are no longer rendered inline, and therefore no longer part of the post content, the Post Content Block does not retrieve them. Reverting this change sees things working as expected.

This is because the Post Content Block renders server-side, and uses the REST API to fetch the post content. The REST API’s response doesn’t include wp_footer, so the layout styles are not passed along.

Step-by-step reproduction instructions

1. In a site where your homepage displays your latest posts, insert a new post and add a Social Icons Block in the Block Editor.
2. Add a bunch of social media icons. The icons should display in a flex layout, with the appropriate layout styles applied to the container.
3. Save the file, then open up the Site Editor.
4. Observe that the Social Icons block does not have the required layout styles applied to the container.

Screenshots, screen recording, code snippet

Block Editor

Site Editor

Displayed within a Post Content Block

Environment info

• WP 5.8, Gutenberg 11.7, TT1 theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes