Added enableAlpha prop to CustomGradientPicker and GradientPicker components #66974

wwdes · 2024-11-13T16:44:35Z

What?

This PR adds enableAlpha prop to GradientPicker component, which is already supported within CustomGradientBar subcomponent.

Why?

Firstly, both ColorPicker and ColorPalette component's have this feature under enableAlppha prop, so adding it to GradientPicker would only be consistent. Secondly, I have found a use for this feature within my own project, where a block can not be allowed transparency, but wants to utilize other features of the GradientPicker component.

How?

The GradientPicker's subcomponent's subcomponent "CustomGradientBar" already supports disabling alpha for custom gradients. All i did was add enableAlpha prop to GradientPicker and its subcomponent, CustomGradientPicker, in order to take advantage of the feature within CustomGradientBar component.

This is my first attempt at contributing, and I do not expect it to be free of faults.

Testing Instructions

When using GradientPicker component, simply add the enableAlpha prop with 'false' as the value, or omit the prop to let it resort to default value of 'true'.

github-actions · 2024-11-13T16:44:48Z

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: @wwdes.

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

Co-authored-by: tyxla <[email protected]>
Co-authored-by: mirka <[email protected]>

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

github-actions · 2024-11-13T16:45:11Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @wwdes! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

tyxla

Thanks for working on it @wwdes!

Generally looks good, I've left a few minor suggestions.

The only thing I'm worried about is the prop name. ColorPicker's disableAlpha prop is deprecated in favor of the opposite enableAlpha prop. Ideally it would be nice to follow the same pattern for all components that use ColorPicker under the hood. Whether we want to do it here or in another PR, I'd defer to @ciampo @mirka who I assume will have more context about our intentions back then.

packages/components/CHANGELOG.md

tyxla · 2024-11-20T07:40:54Z

packages/components/src/gradient-picker/index.tsx

@@ -213,6 +213,7 @@ export function GradientPicker( {
 	onChange,
 	value,
 	clearable = true,
+	disableAlpha = false,


It will make sense to add the new prop to the GradientPicker README.

I'll try to get #67250 merged first so we don't need to do this manually 🙂

Done. @wwdes If you rebase on or merge back trunk, running npm run docs:components should automatically update the README according to the TypeScript data.

tyxla · 2024-11-20T07:43:41Z

packages/components/src/custom-gradient-picker/types.ts

+	/**
+	 * Whether to disable alpha transparency options in the picker.
+	 */
+	disableAlpha?: boolean;


disableAlpha was deprecated for the underlying ColorPicker, but CustomGradientPicker correctly uses the proper enableAlpha prop, so we should be good.

I wonder if we intended to follow the same pattern for this disableAlpha prop, @ciampo @mirka?

The only thing I'm worried about is the prop name. ColorPicker's disableAlpha prop is deprecated in favor of the opposite enableAlpha prop. Ideally it would be nice to follow the same pattern for all components that use ColorPicker under the hood. Whether we want to do it here or in another PR

Yes, I think we should flip it to be enableAlpha, if only for consistency between relevant components. And we should do it in this PR.

If we flip the prop to enableAlpha, what should the default value be? ColorPicker defaults it to false, but GradientPicker was always set to have alpha enabled.

We don't want to change the default behavior, so the default should be true 👍

In that case, I'll make the flip within GradientPicker component, and leave disableAlpha prop in custom-gradient-picker and custom-gradient-bar as is.

OK, the changes are made.

I changed the prop name to enableAlpha in both GradientPicker and CustomGradientPicker components and the flip is done within CustomGradientPicker. I left the disableAlpha prop as it was in CustomGradientBar.

Note that I rolled back previous commits and did everything in one go instead while also updating and rebasing trunk. However, I am not sure that I did everything correctly regarding git workflow.

mirka

Looks good and tests well! I also confirmed that nothing problematic happens in GradientPicker when a user chooses a gradient preset with an alpha (e.g. linear-gradient(135deg,rgba(6,147,227,0.5) 0%,rgb(155,81,224) 100%)) while enableAlpha is false. Nothing blows up for the existing alpha gradient, just the alpha slider is disabled.

I just had some small formatting nits. Everything else is ready to go!

packages/components/CHANGELOG.md

packages/components/src/custom-gradient-picker/types.ts

packages/components/src/gradient-picker/types.ts

Co-authored-by: Lena Morita <[email protected]>

mirka

Great work here, thank you!

github-actions · 2024-12-02T23:08:36Z

Congratulations on your first merged pull request, @wwdes! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

…mponents (WordPress#66974) * add enableAlpha prop to GradientPicker and custom-gradient-picker * Update packages/components/CHANGELOG.md Co-authored-by: Lena Morita <[email protected]> * Update packages/components/src/custom-gradient-picker/types.ts Co-authored-by: Lena Morita <[email protected]> * Update packages/components/src/gradient-picker/types.ts Co-authored-by: Lena Morita <[email protected]> * packages/components/src/gradient-picker/README.md update --------- Unlinked contributors: wwdes. Co-authored-by: tyxla <[email protected]> Co-authored-by: mirka <[email protected]>

…mponents (#66974) * add enableAlpha prop to GradientPicker and custom-gradient-picker * Update packages/components/CHANGELOG.md Co-authored-by: Lena Morita <[email protected]> * Update packages/components/src/custom-gradient-picker/types.ts Co-authored-by: Lena Morita <[email protected]> * Update packages/components/src/gradient-picker/types.ts Co-authored-by: Lena Morita <[email protected]> * packages/components/src/gradient-picker/README.md update --------- Unlinked contributors: wwdes. Co-authored-by: tyxla <[email protected]> Co-authored-by: mirka <[email protected]>

wwdes requested a review from ajitbohra as a code owner November 13, 2024 16:44

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 13, 2024

wwdes mentioned this pull request Nov 13, 2024

Add enableAlpha property to GradientPicker component. #66878

Closed

wwdes force-pushed the update/GradientPicker branch from f1c6608 to 1fdacb4 Compare November 13, 2024 17:25

mirka assigned wwdes Nov 15, 2024

mirka requested a review from a team November 15, 2024 22:48

mirka added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Nov 15, 2024

mirka linked an issue Nov 15, 2024 that may be closed by this pull request

Add enableAlpha property to GradientPicker component. #66878

Closed

tyxla reviewed Nov 20, 2024

View reviewed changes

mirka mentioned this pull request Nov 23, 2024

GradientPicker: Auto-generate readme #67250

Merged

add enableAlpha prop to GradientPicker and custom-gradient-picker

acf91da

wwdes force-pushed the update/GradientPicker branch from 8835923 to acf91da Compare November 26, 2024 23:54

mirka reviewed Nov 27, 2024

View reviewed changes

packages/components/CHANGELOG.md Outdated Show resolved Hide resolved

packages/components/src/custom-gradient-picker/types.ts Outdated Show resolved Hide resolved

packages/components/src/gradient-picker/types.ts Outdated Show resolved Hide resolved

wwdes and others added 4 commits December 2, 2024 20:46

Update packages/components/CHANGELOG.md

898a344

Co-authored-by: Lena Morita <[email protected]>

Update packages/components/src/custom-gradient-picker/types.ts

35008c7

Co-authored-by: Lena Morita <[email protected]>

Update packages/components/src/gradient-picker/types.ts

92ab9c7

Co-authored-by: Lena Morita <[email protected]>

packages/components/src/gradient-picker/README.md update

0dbeb11

mirka approved these changes Dec 2, 2024

View reviewed changes

mirka merged commit 6ef2f24 into WordPress:trunk Dec 2, 2024
62 checks passed

github-actions bot added this to the Gutenberg 19.9 milestone Dec 2, 2024

ciampo changed the title ~~Added disableAlpha prop to CustomGradientPicker and GradientPicker components~~ Added enableAlpha prop to CustomGradientPicker and GradientPicker components Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added enableAlpha prop to CustomGradientPicker and GradientPicker components #66974

Added enableAlpha prop to CustomGradientPicker and GradientPicker components #66974

wwdes commented Nov 13, 2024 •

edited by ciampo

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024

tyxla left a comment

tyxla Nov 20, 2024

mirka Nov 23, 2024

mirka Nov 25, 2024

tyxla Nov 20, 2024

mirka Nov 23, 2024

wwdes Nov 26, 2024

mirka Nov 26, 2024

wwdes Nov 26, 2024

wwdes Nov 27, 2024 •

edited

Loading

mirka left a comment

mirka left a comment

github-actions bot commented Dec 2, 2024

Added enableAlpha prop to CustomGradientPicker and GradientPicker components #66974

Added enableAlpha prop to CustomGradientPicker and GradientPicker components #66974

Conversation

wwdes commented Nov 13, 2024 • edited by ciampo Loading

What?

Why?

How?

Testing Instructions

github-actions bot commented Nov 13, 2024 • edited Loading

Unlinked Accounts

github-actions bot commented Nov 13, 2024

tyxla left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wwdes Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

mirka left a comment

Choose a reason for hiding this comment

mirka left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 2, 2024

wwdes commented Nov 13, 2024 •

edited by ciampo

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

wwdes Nov 27, 2024 •

edited

Loading