Social Links block changes in WordPress 6.6

WordPress 6.6 includes some changes affecting both the social link and social links blocks.

HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. changes when using a social links blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. inside a Navigation Block

As of WordPress 6.6, the social links block will be wrapped in a list item (li tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) when used in the navigation block. This change fixed an issue where the navigation block produced invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally 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>

Class name changes to the social link block

As of WordPress 6.6, the social link block will no longer output the components-button class name on its button element within the block editor.

Themes targeting this class name for editor styles should use the existing wp-block-social-link-anchor class instead.

It’s expected that most themes will be doing this already, so for most no change will be required.

Why was this class name present?

The class name was a side-effect of using the Button ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. component from the @wordpress/components package (which can also be referenced as wp.components.Button) within the social link block’s implementation.

Why is this being changed?

• The components from @wordpress/components are intended for use in the editor’s general interface and have a lot of opinionated CSSCSS Cascading Style Sheets., while the on-canvas part of a block is intended to be styled by a theme and should have minimal CSS.
• Updates made to styles in the @wordpress/components can have unintended side-effects for the block’s appearance, and can also raise or lower the specificity of the styles above or below what a theme implementer might expect. The change to the block’s implementation leads to more stable and predictable css specificity.
• There’s no guarantee the styles from @wordpress/components will continue to work in the iframed editor canvas, some CSS variable references in the styles were already not working as expected.
• The styles that were previously added to the social link block contravene the CSS guidelines used by developers on the WordPress project.

Props to @ramonopoly and @juanmaguitar for review

#6-6, #dev-note, #dev-notes, #dev-notes-6-6