Add ability to unset duotone in themes with default duotone set #39564
Conversation
This file contains 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
ajlende
added
the
[Feature] Themes
|
Size Change: +1.04 kB (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
ajlende
force-pushed
the
add/duotone-unset
branch
from
3c246ea to
2b76d86
Compare
ajlende
force-pushed
the
add/duotone-unset
branch
from
2b76d86 to
5aacb4d
Compare
jasmussen
reviewed
Apr 15, 2022
|
Alright, I pushed a small tweak that gets us to this: Conceptually the "unset" icon is the same as these: Right now, however, the way that's built is a little hacky. I'll leave some comments in the code in a second to elaborate on that. But it means that the toolbar now looks like this, because technically that "unset" state isn't an icon:
It could be, if it needed to be. Here's an icon version of it: ... but there's a little more to it as well, specifically that the
That's why I ended up going the way I did with the commit, adding the linear gradient background for now, and then hopefully if we can refactor to use
|
jasmussen
reviewed
Apr 15, 2022
jasmussen
reviewed
Apr 15, 2022
ajlende
force-pushed
the
add/duotone-unset
branch
from
87b3459 to
ab3b254
Compare
ajlende
force-pushed
the
add/duotone-unset
branch
from
ab3b254 to
b724b79
Compare
ajlende
force-pushed
the
add/duotone-unset
branch
from
b724b79 to
b067b00
Compare
ajlende
requested review from
spacedmonkey,
ajitbohra and
ellatrix
as code owners
|
This works as expected. When I don't have a filter on the image and I open the duotone option, the "no filter" option is highlighted, which is a bit confusing IMO: |
scruffian
reviewed
Jun 15, 2022
| ) } | ||
| { ! disableCustomDuotone && ( | ||
| <ColorListPicker | ||
| labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] } | ||
| colors={ colorPalette } | ||
| value={ value } | ||
| value={ isUnset ? undefined : value } |
There was a problem hiding this comment.
We do this 3 times. Should we make it a variable?
There was a problem hiding this comment.
It's only used in two places—ColorListPicker and CustomDuotoneBar—and I can't think of a good name for what to call it that would make the code any more readable. Do you have a suggestion?
scruffian
approved these changes
Jun 15, 2022
I can see how that would be confusing. That's the focus border for the swatch because it's the first focusable element in the dropdown. You don't see it in the color/gradient picker because there's usually something above it that gets the focus. What do you think would be a good solution? Something needs to be focused for keyboard accessibility. Should the focus go to the second element—the fist colored swatch? Should the unset selector go to the end of the list? Or something else? EDIT: linking up #34073 (comment) for easy access to the earlier discussion |
This does make sense, and I can't think of a better solution so I think leave it as it is. |
matiasbenedetto
approved these changes
Jun 20, 2022
37 tasks
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 8, 2022
This add the ability to unset duotone in themes with default duotone set. This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#39564 #39564: Add ability to unset duotone in themes with default duotone set] * [WordPress/gutenberg#42020 #42020: Remove: Unrequired regex search on duotone supports] Follow-up to [50929], [52757]. Props ajlende, jorgefilipecosta, Joen, cbravobernal. See #56467. Built from https://develop.svn.wordpress.org/trunk@54101 git-svn-id: http://core.svn.wordpress.org/trunk@53660 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Sep 8, 2022
This add the ability to unset duotone in themes with default duotone set. This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#39564 #39564: Add ability to unset duotone in themes with default duotone set] * [WordPress/gutenberg#42020 #42020: Remove: Unrequired regex search on duotone supports] Follow-up to [50929], [52757]. Props ajlende, jorgefilipecosta, Joen, cbravobernal. See #56467. Built from https://develop.svn.wordpress.org/trunk@54101 git-svn-id: https://core.svn.wordpress.org/trunk@53660 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pbearne
pushed a commit
to pbearne/wordpress-develop
that referenced
this pull request
Sep 9, 2022
This add the ability to unset duotone in themes with default duotone set. This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#39564 #39564: Add ability to unset duotone in themes with default duotone set] * [WordPress/gutenberg#42020 #42020: Remove: Unrequired regex search on duotone supports] Follow-up to [50929], [52757]. Props ajlende, jorgefilipecosta, Joen, cbravobernal. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54101 602fd350-edb4-49c9-b593-d223f7449a82
mburridge
added
the
Needs Dev Note
|
Added the Needs Dev Note label in case this needs a dev note (either individual or as part of a "misc" dev note) for WP 6.1 release. |
This was referenced Sep 16, 2022
whereiscodedude
pushed a commit
to whereiscodedude/wpss
that referenced
this pull request
Sep 18, 2022
This add the ability to unset duotone in themes with default duotone set. This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#39564 #39564: Add ability to unset duotone in themes with default duotone set] * [WordPress/gutenberg#42020 #42020: Remove: Unrequired regex search on duotone supports] Follow-up to [50929], [52757]. Props ajlende, jorgefilipecosta, Joen, cbravobernal. See #56467. Built from https://develop.svn.wordpress.org/trunk@54101
33 tasks
bph
removed
the
Needs Dev Note
|
Removed |
ootwch
pushed a commit
to ootwch/wordpress-develop
that referenced
this pull request
Nov 4, 2022
This add the ability to unset duotone in themes with default duotone set. This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#39564 #39564: Add ability to unset duotone in themes with default duotone set] * [WordPress/gutenberg#42020 #42020: Remove: Unrequired regex search on duotone supports] Follow-up to [50929], [52757]. Props ajlende, jorgefilipecosta, Joen, cbravobernal. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54101 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Fixes #38504
Add option to disable theme duotone per-block.
Why?
Sometimes you may want to disable a theme-wide duotone filter.
How?
Adds a swatch to unset the duotone filter set by a theme.json.
Selecting the swatch saves
'unset'as thestyle.color.duotoneattribute instead of an array of colors.Testing Instructions
{ "styles": { "blocks": { "core/image": { "filter": { "duotone": "var(--wp--preset--duotone--blue-and-red)" } } } } }Screenshots or screencast
Screen recording of unsetting a global styles duotone filter.
The unset swatch in the dropdown.
The unset swatch in the toolbar.