Fix: Duotone unset button #69981
Fix: Duotone unset button #69981
Conversation
|
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 If 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. |
| @@ -76,7 +76,7 @@ function DuotonePicker( { | |||
| [ colorPalette ] | |||
| ); | |||
|
|
|||
| const isUnset = value === 'unset'; | |||
| const isUnset = value === 'unset' || value === undefined; | |||
There was a problem hiding this comment.
I'm unsure about this change. The "Unset" is similar to the clear button; I don't think it should be selected when no Duotone value is set.
There was a problem hiding this comment.
Makes sense, but the current implementation is also not working, that's the reason why I have introduced undefined
Apart from undefined nothing seems to be working here to get the check option for unset button
There was a problem hiding this comment.
It then seems we're trying to solve the wrong problem in the wrong place. Why?
- The
unsetis a valid filter and can remove the globally set Duotone filter. It shouldn't be treated asundefined. - When this filter is selected, selection should be visible, and it should also be clearable.
The following changes fix these issues in my tests:
diff --git packages/block-editor/src/hooks/duotone.js packages/block-editor/src/hooks/duotone.js
index 246e4fde7d8..b6a1989870d 100644
--- packages/block-editor/src/hooks/duotone.js
+++ packages/block-editor/src/hooks/duotone.js
@@ -124,9 +124,10 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
return null;
}
- const duotonePresetOrColors = ! Array.isArray( duotoneStyle )
- ? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )
- : duotoneStyle;
+ const duotonePresetOrColors =
+ duotoneStyle === 'unset' || Array.isArray( duotoneStyle )
+ ? duotoneStyle
+ : getColorsFromDuotonePreset( duotoneStyle, duotonePalette );
return (
<>There was a problem hiding this comment.
It then seems we're trying to solve the wrong problem in the wrong place. Why?
My apologies, I wasn't aware of this file, I was trying to fix the component itself 🙇🏻
When this filter is selected, selection should be visible, and it should also be clearable.
Yes, I have updated the file with the shared diff, thanks!
|
Thanks @Mamaduka for approving the PR, if we are all set then we consider merging this! 💯 |
Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
What?
Closes #69980
Why?
This PR is necessary to improve the behaviour of the default duotone unset button
How?
This PR targets the class which sets the blue color to the unset button and sets the color to transparent
It also adds the condition of
value === undefinedtoisUnsetto get the checked icon on the unset buttonTesting Instructions
Screenshots or screencast
Screen.Recording.2025-04-24.at.3.14.04.PM.mov