Use Colors: Add text color detection support. #18547
Conversation
epiqueras
added
[Feature] Block API
epiqueras
requested review from
ajitbohra,
ellatrix,
Soean,
talldan and
youknowriad
as code owners
| @@ -56,7 +56,7 @@ function HeadingEdit( { | |||
| </InspectorControls> | |||
| { InspectorControlsColorPanel } | |||
| <TextColor> | |||
| <BackgroundColorDetector querySelector='[contenteditable="true"]' /> | |||
| <ColorDetector querySelector='[contenteditable="true"]' /> | |||
There was a problem hiding this comment.
In the button block, the background and color elements are not the same. Would it make sense to have a colorSelector and backgroundSelector? To allow the detector to work when background and color use different elements?
There was a problem hiding this comment.
Yes, I was just about to ask you that 😄
|
Drive by comment unrelated with the current PR. Can we add a README for this hook, I feel it will make it way easier for folks to understand and even contribute to the hook. It's also very valuable when we'll open this hook for third-party block authors; |
|
Definitely. I also want to try making an interactive MDX guide for it in the storybook, under "Block Utilities". |
|
@jorgefilipecosta This should be ready to go now 😄 |
jorgefilipecosta
force-pushed
the
add/text-color-detection-to-use-colors-hook
branch
from
53fb172 to
a537bc0
Compare
There was a problem hiding this comment.
I rebased the useColors on paragraph branch #18148 above this branch as a way to test this PR and I noticed some issues that I left as comments.
| @@ -29,7 +29,7 @@ function HeadingEdit( { | |||
| onReplace, | |||
| className, | |||
| } ) { | |||
| const { TextColor, InspectorControlsColorPanel, BackgroundColorDetector } = __experimentalUseColors( | |||
| const { TextColor, InspectorControlsColorPanel, ColorDetector } = __experimentalUseColors( | |||
| [ { name: 'textColor', property: 'color' } ], | |||
| { | |||
| contrastCheckers: { backgroundColor: true }, | |||
There was a problem hiding this comment.
Should we also add textColor: true?
There was a problem hiding this comment.
That would show the warning when the inherited text color does not have enough contrast.
Is that something we want? Considering this block does not control background color, an inherited text color without enough contrast would also trigger a warning in the parent level and should probably be fixed there.
There was a problem hiding this comment.
In the paragraph, we need color detection on the text and background color. I'm not sure if we should show a warning if no color was selected at all. Maybe we should have a condition to not show a warning if the user did not use a background or text color?
There was a problem hiding this comment.
Then it becomes kind of confusing.
Why do I see a warning sometimes, and sometimes I don't?
I think we should just always show the warning now. So I should add textColor: true, what do you think?
There was a problem hiding this comment.
Yes I guess we can add it 👍
| } | ||
| return ( | ||
| ( needsBackgroundColor || needsColor ) && | ||
| withFallbackStyles( |
There was a problem hiding this comment.
We need to re-execute the color detection when a color changes. On the paragraph block, we want to automatically detect background and text color contrastCheckers: { backgroundColor: true, textColor: true, fontSize: fontSize.size },, we can also change both colors. The contrast warnings don't update when a color challenges but if we go to the code editor and switch back the visual editor to force the component to remount the warnings appear as expected.
There was a problem hiding this comment.
This seems to be working after your last rebase?
There was a problem hiding this comment.
No, I think the warnings still don't appear when expected:
We can see the warning appears when it should not, and disappears when it should appear. If I type something and the warning should appear, it appears after I type. Not sure why typing interferes with this, but we should make sure the color computation does not happen on each character typed.
There was a problem hiding this comment.
This was happening because setting a ref does not re-render the component, so the contrast checker used a stale value until the component had any sort of update.
Fixed: 45c81d4.
There was a problem hiding this comment.
I verified the problems I noticed were solved, nice work @epiqueras 👍
|
Thanks for all the thorough reviews 😄 |
Follows #18237
Description
This PR adds support for detecting text colors using the
trueoption introduced foruseColorscontrast checking by #18237.How has this been tested?
All uses of
useColorswere verified to continue to work as expected.Types of Changes
New Feature:
useColorscontrast checking now supports text color detection.Checklist: