Add color field type and control to DataViews#71522
Merged
jorgefilipecosta merged 6 commits intotrunkfrom Sep 8, 2025
Merged
Conversation
jorgefilipecosta
requested review from
ajitbohra and
oandregal
as code owners
oandregal
added
the
[Feature] DataViews
oandregal
reviewed
Sep 8, 2025
oandregal
reviewed
Sep 8, 2025
Comment on lines
+62
to
+67
| if ( | ||
| ! [ undefined, '', null ].includes( value ) && | ||
| ! colord( value ).isValid() | ||
| ) { | ||
| return __( 'Value must be a valid color.' ); | ||
| } |
Member
There was a problem hiding this comment.
Could you add the color type to the validation story as well?
oandregal
approved these changes
Sep 8, 2025
Member
oandregal
left a comment
oandregal
left a comment
There was a problem hiding this comment.
I've left a couple of comments, other than that, it's ready. Thanks!
|
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. |
jorgefilipecosta
force-pushed
the
fix/color-control-spacing-alignment
branch
from
0fa48f4 to
0b2d829
Compare
|
Size Change: +3.11 kB (+0.16%) Total Size: 1.93 MB
ℹ️ View Unchanged
|
- Add new color field type with validation using colord library - Implement color control with text input and visual color picker - Support alpha channel colors (rgba, hsla) - Use proper WordPress component patterns with private APIs - Fix spacing and alignment issues for better visual integration - Add comprehensive Storybook stories for testing - Add colord dependency to dataviews package
Co-authored-by: André <[email protected]>
jorgefilipecosta
force-pushed
the
fix/color-control-spacing-alignment
branch
from
0b2d829 to
28bc9da
Compare
44 tasks
adamsilverstein
pushed a commit
to adamsilverstein/gutenberg
that referenced
this pull request
Sep 11, 2025
Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: oandregal <[email protected]>
mirka
reviewed
Oct 27, 2025
| ValidatedTextControl, | ||
| ValidatedToggleControl, | ||
| } from './validated-form-controls'; | ||
| import { Picker } from './color-picker/picker'; |
Member
There was a problem hiding this comment.
Any reason why we had to expose this, instead of just reusing ColorPicker, or maybe even using <input type="color">? It looks off because of missing styles, too. I don't think we should be exporting random subcomponents like this with no plan, it's not tenable.
| Picker in popover | ColorPicker |
|---|---|
 |
 |
There were some layout and focus style issues on the color indicator button I wanted to report, but the approach would differ if we were to use an <input type="color"> instead. Was @WordPress/gutenberg-design involved in the spec of this control? I think we should be more deliberate in the design here, since it's going to be a standard color input for the system. cc @WordPress/gutenberg-components
There is also already a similar design in BorderControl:
Contributor
There was a problem hiding this comment.
I think I saw some mockups like this but never a full spec. Leveraging the native input is worth exploring, but I think we'd still need our own UI to support things like Alpha, unless we had a separate input for that?
Contributor
There was a problem hiding this comment.
@jorgefilipecosta I agree with Lena's point, we really shouldn't export internal parts of our components. Can we work on undoing this export?
Member
Author
There was a problem hiding this comment.
Thank you for raising this to my attention, I will propose an improvement here.
Member
Author
There was a problem hiding this comment.
The reason why just the picker was used was to avoid having double text inputs in both the field and the popover, but probably having double inputs in the popover is not a big issue and is worth the avoidance of the export..
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
Adds a new
colorfield type and control to DataViews that allows users to input color values via text input and visual color picker.How
Screenshot
Testing
Dependencies
colorddependency to dataviews package (already used on other parts of gutenberg) for color validation and manipulation