Social Links block: Add color classes so icon colors correctly reflect changes in Global Styles #51020
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ndiego
added
[Type] Bug
carolinan
approved these changes
May 27, 2023
Contributor
carolinan
left a comment
carolinan
left a comment
There was a problem hiding this comment.
This is a big improvement for switching style variations and themes. Works well in my test.
cbravobernal
added
the
Backport to Gutenberg RC
cbravobernal
removed
the
Backport to Gutenberg RC
cbravobernal
added
the
Backport to Gutenberg Minor Release
cbravobernal
pushed a commit
that referenced
this pull request
Jun 2, 2023
…t changes in Global Styles (#51020) * Add color classes. * Linting.
Contributor
|
Cherry-picked for 15.9.1 |
bph
added
the
Needs Dev Note
24 tasks
glendaviesnz
removed
the
Backport to Gutenberg Minor Release
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
…t changes in Global Styles (WordPress#51020) * Add color classes. * Linting.
9 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #36462, #35480, and partially fixes #46547
This PR supersedes #42284, but props to @BE-Webdesign for kicking this off.
What? & Why?
Before this PR, social icon colors were essentially hardcoded as hex values. This implementation is problematic if a color is set to a value in the color palette, and then you change the color palette value in Global Styles, or you select a different style variation. The icon colors did not update to the new values. This issue is best illustrated in the videos below.
How?
This PR adds the CSS classes that correspond to the selected color values. Therefore, if an icon is set to the color
base, wheneverbasechanges in Global Styles or in theme.json, the icon will update accordingly.That said, the hardcoded hex values are important, and this PR does not remove them. The CSS classes just take priority. If you just used CSS classes, if a user switched to a theme that did not support
base, the icons would not display correctly. In this situation, the hardcoded hex values kick in.Testing Instructions
Screenshots or screencast
Before:
social-before.mp4
After:
social-after.mp4