Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Social Links block: Add color classes so icon colors correctly reflect changes in Global Styles #51020

Merged
merged 2 commits into from
May 29, 2023
Merged

Social Links block: Add color classes so icon colors correctly reflect changes in Global Styles #51020

merged 2 commits into from
May 29, 2023

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented May 26, 2023 •
edited
Loading

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, whenever base changes 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

  1. Use TT3 or a similar theme. (Themes with style variations make this easy to test)
  2. Insert a new Social Icons block and add a few icons.
  3. Set the icon color and icon background color to colors in the theme palette.
  4. In Global Styles either change the theme colors or choose a different style variation.
  5. Confirm that the icons colors have been updated to reflect the changes, both in the Editor and on the front end.

Screenshots or screencast

Before:

social-before.mp4

After:

social-after.mp4

@ndiego ndiego added [Type] Bug An existing feature does not function as intended [Block] Social Affects the Social Block - used to display Social Media accounts labels May 26, 2023
@ndiego ndiego self-assigned this May 26, 2023
@ndiego ndiego requested a review from ajitbohra as a code owner May 26, 2023 20:57
carolinan
carolinan approved these changes May 27, 2023
View reviewed changes
Copy link
Contributor

@carolinan carolinan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a big improvement for switching style variations and themes. Works well in my test.

@cbravobernal cbravobernal merged commit dd99224 into WordPress:trunk May 29, 2023
@cbravobernal cbravobernal added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label May 29, 2023
@github-actions github-actions bot added this to the Gutenberg 16.0 milestone May 29, 2023
@cbravobernal cbravobernal removed the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label May 30, 2023
@ajlende ajlende mentioned this pull request May 31, 2023
Open
@ndiego ndiego mentioned this pull request May 31, 2023
Closed
@ndiego ndiego deleted the try/make-social-link-colors-dynamic branch May 31, 2023 20:08
@cbravobernal cbravobernal added the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Jun 2, 2023
cbravobernal pushed a commit that referenced this pull request Jun 2, 2023
@ndiego @cbravobernal
Social Links block: Add color classes so icon colors correctly reflec…
2dc5a90 
…t changes in Global Styles (#51020)

* Add color classes.

* Linting.
@cbravobernal
Copy link
Contributor

Cherry-picked for 15.9.1

@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 9, 2023
@Leonardus-Nugraha Leonardus-Nugraha mentioned this pull request Jun 14, 2023
Closed
24 tasks
@glendaviesnz glendaviesnz removed the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Jul 4, 2023
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
@ndiego @sethrubenstein
Social Links block: Add color classes so icon colors correctly reflec…
9dcbe88 
…t changes in Global Styles (WordPress#51020)

* Add color classes.

* Linting.
@femkreations femkreations mentioned this pull request Jul 17, 2023
Open
9 tasks
@t-hamano t-hamano mentioned this pull request Dec 22, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@carolinan carolinan carolinan approved these changes

@Mamaduka Mamaduka Awaiting requested review from Mamaduka

@richtabor richtabor Awaiting requested review from richtabor

@aaronrobertshaw aaronrobertshaw Awaiting requested review from aaronrobertshaw

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees

@ndiego ndiego

Labels
[Block] Social Affects the Social Block - used to display Social Media accounts Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 15.9
5 participants
@ndiego @cbravobernal @carolinan @bph @glendaviesnz