Add list item wrapper to social links when used in navigation block

[talldan]

What?

Fixes #61385

Why?

As mentioned in that issue, when the social block is used in the navigation block, the front-end markup has a <ul> nested in a <ul>, when it seems the proper thing to do is have a wrapping <li> tag.

How?

There's an array $needs_list_item_wrapper in the server render callback for the navigation block, and adding social links to that seems to do the trick.

Testing Instructions

1. Add a navigation block
2. Add a social link to the navigation block
3. Save and (pre)view the frontend content
4. Inspect the markup of the social links block, it should now be wrapped in an <li> tag

Also check that none of the styling is broken (this is my greatest concern with the change).

Screenshots or screencast

[carolinan]

This solves the invalid markup, I would say this can be merged when the PHP coding standard issue is fixed.

There is always a risk that the markup change makes existing third party CSS invalid, so there needs to be a dev note/ added to the "What's new in Gutenberg" etc; some outreach to extenders.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @timofey-drozhzhin.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: timofey-drozhzhin.

Co-authored-by: talldan <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[talldan]

Thanks @carolinan!

[talldan]

Dev Note (draft)

As of WordPress 6.6, the social links block will be wrapped in a list item (<li> tag) when used in the navigation block. The change fixed an issue where the navigation block produced invalid HTML (the social links block's <ul> was nested directly under the navigation block's <ul>).

This may affect some themes that depend on the exact nesting of the HTML elements, for example using a selector like .wp-block-navigation__container > .wp-block-social-links.

Here are some examples of how the HTML has changed:

Example of navigation block and social links markup before WordPress 6.6

<ul class="wp-block-navigation__container wp-block-navigation">
  <ul class="wp-block-social-links is-layout-flex wp-block-social-links-is-layout-flex">
  </ul>
</ul>

Example of navigation block and social links markup after WordPress 6.6

<ul class="wp-block-navigation__container wp-block-navigation">
  <li class="wp-block-navigation-item">
    <ul class="wp-block-social-links is-layout-flex wp-block-social-links-is-layout-flex">
    </ul>
  </li>
</ul>