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.

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

Enable alpha (opacity) in Global Styles color pickers. #43045

Merged

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented Aug 6, 2022

What?

Enables alpha (opacity) in Global Styles color pickers which fixes #42999 and #43041

Why?

Alpha was enabled previously at the block level but not in Global Styles. This PR corrects that and establishes consistency.

How?

Simply add enableAlpha to the ColorPicker component that is used in Global Styles.

Testing Instructions

  1. Navigate to the Site Editor and the Global Styles panel.
  2. Navigate to the Colors panel and edit a color and you will now see the alpha (opacity) slider.

Screenshots or screencast

image

@ndiego ndiego added [Type] Enhancement A suggestion for improvement. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Aug 6, 2022
@ndiego ndiego requested a review from ajitbohra as a code owner August 6, 2022 14:42
@ndiego ndiego self-assigned this Aug 6, 2022
@ndiego ndiego linked an issue Aug 6, 2022 that may be closed by this pull request
@ndiego
Copy link
Member Author

ndiego commented Aug 8, 2022

This solution was tested and proved to work as expected here.

Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

@ndiego, do you happen to know the PR that enabled alpha colors?

I think this change will enable alpha support everywhere the PaletteEdit component is used. Do we want this?

@ndiego
Copy link
Member Author

ndiego commented Aug 9, 2022

@Mamaduka yeah it will, but it only looks like PaletteEdit is used in the Site Editor and Global Styles. Offhand, I cannot think of a reason why we wouldn't want this functionality since alpha is supported via theme.json. 🤔

I believe this is the original PR for alpha support: #37731

I did just test a few additional things, such as setting colors with opacity at the block level in Global Styles and then exporting the changes. The exported theme.json file correctly includes the alpha hex codes. Reimporting the theme and then making additional changes in Global Styles all work as expected.

I believe we should move forward with this for 13.9 and then continue testing. If we need to restrict alpha functionality elsewhere, we can prior to 6.1, but this PR moves us closer to consistency between the Editors.

@ndiego ndiego added this to the Gutenberg 13.9 milestone Aug 9, 2022
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

@ndiego, okay, let's give this a try. It should be easy to revert.

@Mamaduka Mamaduka added the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Aug 10, 2022
@ndiego
Copy link
Member Author

ndiego commented Aug 10, 2022

Thanks @Mamaduka and @carolinan! 🚢ing

@ndiego ndiego merged commit 22801cf into WordPress:trunk Aug 10, 2022
@ndiego ndiego deleted the add/alpha-in-global-styles-color-picker branch August 10, 2022 12:52
@priethor
Copy link
Contributor

Cherry-picked to the 13.9 branch and released in Gutenberg 13.9-rc2 ✅

@priethor priethor removed the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Aug 12, 2022
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
5 participants