Social Links: Support icon color via theme.json

[dhananjaykuber]

What does this PR do?

Implements #39989 allow theme authors to set default icon colors for the Social Links block using theme.json.

Previously, setting styles.blocks.core/social-links.color.text in theme.json had no effect on icon colors because the generated CSS targeted the block wrapper element, and brand-specific color rules applied directly to each icon element would always win (inherited values lose to directly applied values).

How does it work?

This PR uses the block.json selectors API to redirect the generated color.text CSS to target .wp-block-social-links .wp-social-link (the individual icon <li> elements) rather than the block wrapper.

CSS specificity comparison:

• Theme.json generated: :root :where(.wp-block-social-links .wp-social-link) { color: X; } → specificity 0-1-0 (:root is a pseudo-class, :where() contributes 0)
• Brand colors: :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-amazon { color: #fff; } → specificity 0-1-0 (:where() contributes 0, class selector is 0-1-0)

Because global styles are loaded after block styles in the stylesheet, the theme.json color wins at equal specificity. If a user additionally sets an icon color via the editor sidebar, the inline style attribute has highest priority and overrides everything.

Changes

• packages/block-library/src/social-links/block.json:

  • Enable color.text support
  • Add text: false to __experimentalDefaultControls so the standard "Text color" picker is hidden by default (the block already provides a dedicated "Icon color" control, so exposing a second text color picker would be confusing)
  • Add a selectors section to redirect color.text CSS to the individual icon elements

• phpunit/class-wp-theme-json-test.php: New test test_get_styles_for_block_color_text_subfeature_selector verifies that styles.blocks.core/social-links.color.text generates CSS with the custom selector

• docs/reference-guides/core-blocks.md: Regenerated to reflect updated color support

How to test

Add to your theme's theme.json:

{
  "styles": {
    "blocks": {
      "core/social-links": {
        "color": {
          "text": "var:preset|color|primary"
        }
      }
    }
  }
}

The Social Links block icons should use the specified color as their default, overriding per-brand colors. A user-set icon color from the editor sidebar still takes precedence.

Closes #39989

[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: @enoversum.

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: enoversum.

Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

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

[Copilot]

Pull request overview

Enables theme authors to set default Social Links icon color via theme.json by mapping styles.blocks.core/social-links.color.text to the individual social-link <li> elements, allowing Global Styles to override brand-specific default colors.

Changes:

• Enabled supports.color.text for core/social-links and redirected generated color.text CSS to .wp-block-social-links .wp-social-link via the block.json selectors API.
• Added a PHPUnit test to verify color.text subfeature selectors generate CSS for the custom selector.
• Regenerated core block reference docs to reflect updated color support.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
phpunit/class-wp-theme-json-test.php	Adds coverage ensuring block subfeature selectors (color.text) correctly influence generated CSS selectors.
packages/block-library/src/social-links/block.json	Enables color.text support and maps it to inner .wp-social-link elements so theme.json can override per-brand colors.
docs/reference-guides/core-blocks.md	Updates generated documentation to reflect core/social-links now supports color.text.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.