Repository navigation
Social Links: Restore the larger icon size for the Logos Only style - #85506
Conversation
Wrapping the Logos Only selector in `:where()` lowered the specificity of its `1.25em` icon size below the default `1em` rule, so the larger size stopped applying. Move the size rule out of `:where()` so it wins again. Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CPZ2BEgwGY3FgZ5TnS7pE
Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CPZ2BEgwGY3FgZ5TnS7pE
🤖 PR meta 🤖🎉 PropsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Props Bot commandsYou can trigger Props Bot actions by commenting on this PR:
Updated as activity occurs, without notifying anyone named here. Add the 📦 Bundle sizeSize Change: +24 B (0%) Total Size: 8.57 MB 📦 View Changed
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. moves selected text into another paragraph in
|
t-hamano
added
[Type] Bug
Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CPZ2BEgwGY3FgZ5TnS7pE
It's a shame there was the regression in 6.6 (my fault). For me, I don't really understand why If it were 1.5rem then the size and spacing would match perfectly: With how it is in trunk, the user can also bump up the size of the 'Logos only' icons to make them match (Large Logos Only vs Default looks the same as 1.5rem): So personally I wonder if it's worth fixing this (and potentially breaking the styles of sites further). |
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
There was a problem hiding this comment.
I think the right size is only a hard question because the new rule locks it in at 0-3-1. If both svg size rules use :root :where() like the padding rules, 1.25em becomes a default themes can override.
:root :where(.wp-block-social-links .wp-social-link svg) {
width: 1em;
height: 1em;
}
:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link svg) {
width: 1.25em;
height: 1.25em;
}The base rule has to move too, or its 0-2-1 still wins.
| Icon size | Default style | Logos Only 1em (trunk) |
1.25em (this PR) |
1.5em |
|---|---|---|---|---|
| Small | 24px | 16px | 20px | 24px |
| Normal | 36px | 24px | 30px | 36px |
| Large | 54px | 36px | 45px | 54px |
| Huge | 72px | 48px | 60px | 72px |
A theme can then pick 1.5em to match the other styles, or 1em to keep today's look:
"core/social-links": {
"variations": {
"logos-only": {
"css": "& .wp-social-link svg { width: 1.5em; height: 1.5em; }"
}
}
}That fixes the regression without forcing one value on every site. It also fits the font size support I'm looking at for these blocks.
Additionally, I've also been working on migrating the Social Icon/s blocks to use our block supports. This particular area has been a little on the back burner due to needing to choose between font-size and width/height supports for sizing.
For now though we can at least make the styles here compatible with Global Styles.
…rides Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CPZ2BEgwGY3FgZ5TnS7pE
Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CPZ2BEgwGY3FgZ5TnS7pE # Conflicts: # packages/block-library/CHANGELOG.md
Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CPZ2BEgwGY3FgZ5TnS7pE
|
Thank you both for the reviews! The |
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Thanks for iterating here 👍
✅ With no overrides, Logos Only icons are 1.25em
✅ Default and Pill Shape keep 1em
✅ Editor and fontend match
✅ Block level & .wp-social-link svg rule in Additional CSS still wins
✅ Sizes are unchanged across nine themes covering block and classic themes
LGTM 🚢
We'll just need a quick rebase and changelog conflict to be resolved.
Co-authored-by: t-hamano <54422211+t-hamano@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011g9URx4BWpCNVd6FVeYx4K
What?
Follow up to #63049.
Restores the
1.25emicon size of the Social Icons block's "Logos Only" style.Why?
#63049 wrapped the Logos Only selector in
:where()so that colors defined in theme.json could override the per-icon colors. However, the same selector also contains the rule that makes the logos larger, and lowering its specificity caused the default1emicon size to win. As a result, Logos Only icons have been rendered at1eminstead of1.25em.How?
Keeps the color-related rules inside:where()so that #63049 keeps working, and moves only the icon size rule out of it.Keeps the color-related rules inside
:where()so that #63049 keeps working, and moves both icon size rules (the default1emand the Logos Only1.25em) to:root :where()with a specificity of 0-1-0, like the existing padding rules. This restores the1.25emsize for the Logos Only style, while letting themes override it via theme.json. For example:Note that
1emhas effectively been the Logos Only icon size since WordPress 6.6, so this change makes Logos Only icons on existing sites slightly larger.Testing Instructions
Screenshots or screencast
Ipsum:
Twenty Twenty-Five:
Twenty Twenty:
Use of AI Tools
This PR was investigated and authored with Claude Code, and reviewed by me.