Merged
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. |
oandregal
added
[Type] Enhancement
Contributor
There was a problem hiding this comment.
Pull request overview
Adds disabled support across DataForm control configs in @wordpress/dataviews, while ensuring DataViews filter widgets remain interactive.
Changes:
- Extends
EditConfig/DataFormControlProps.configtypings to includedisabled. - Threads
config.disabledthrough most built-in DataForm controls and utilities. - Updates Storybook stories to toggle disabled states for manual verification, and forces filters to
disabled: false.
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/dataviews/src/types/field-api.ts | Adds disabled to edit config typings and control config props. |
| packages/dataviews/src/field-types/stories/index.story.tsx | Adds Storybook disabled arg and maps fields to disabled edit configs for demos. |
| packages/dataviews/src/dataform/stories/layout-regular.tsx | Adds Storybook-level toggle to disable all DataForm fields in the “layout regular” story. |
| packages/dataviews/src/dataform/stories/index.story.tsx | Exposes disabled toggle for the LayoutRegular story. |
| packages/dataviews/src/components/dataviews-filters/input-widget.tsx | Forces filters to pass config.disabled=false so filter widgets are never disabled. |
| packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx | Reads config.disabled and forwards to the number input control. |
| packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx | Adds disabled support and forwards to the validated text input control. |
| packages/dataviews/src/components/dataform-controls/utils/relative-date-control.tsx | Adds disabled support to relative date controls. |
| packages/dataviews/src/components/dataform-controls/url.tsx | Passes disabled through to validated text control. |
| packages/dataviews/src/components/dataform-controls/toggle.tsx | Adds disabled handling for toggle control. |
| packages/dataviews/src/components/dataform-controls/toggle-group.tsx | Adds disabled handling for toggle group options. |
| packages/dataviews/src/components/dataform-controls/textarea.tsx | Adds disabled handling for textarea control. |
| packages/dataviews/src/components/dataform-controls/text.tsx | Adds disabled handling for text control. |
| packages/dataviews/src/components/dataform-controls/telephone.tsx | Passes disabled through to validated text control. |
| packages/dataviews/src/components/dataform-controls/select.tsx | Adds disabled handling for select control. |
| packages/dataviews/src/components/dataform-controls/radio.tsx | Adds disabled handling for radio control. |
| packages/dataviews/src/components/dataform-controls/password.tsx | Adds disabled handling for password input (but suffix button still interactive). |
| packages/dataviews/src/components/dataform-controls/number.tsx | Ensures config is passed through to validated number control. |
| packages/dataviews/src/components/dataform-controls/index.tsx | Merges EditConfig config with runtime props.config (enables filter override behavior). |
| packages/dataviews/src/components/dataform-controls/email.tsx | Passes disabled through to validated text control. |
| packages/dataviews/src/components/dataform-controls/datetime.tsx | Adds disabled handling for datetime inputs/calendars and passes config through operator-specific controls. |
| packages/dataviews/src/components/dataform-controls/date.tsx | Adds disabled handling across date presets, inputs, and calendars; threads config through branches. |
| packages/dataviews/src/components/dataform-controls/color.tsx | Adds disabled handling for color input and dropdown toggle. |
| packages/dataviews/src/components/dataform-controls/checkbox.tsx | Adds disabled handling for checkbox control. |
| packages/dataviews/src/components/dataform-controls/array.tsx | Adds disabled handling for token field array control. |
Comments suppressed due to low confidence (1)
packages/dataviews/src/components/dataform-controls/password.tsx:55
disabledis set on the input viaValidatedText, but the visibility toggleButtonremains interactive. When the control is disabled, the suffix action should also be disabled to prevent state changes and keep the whole control non-interactive.
Pass disabled through to the suffix Button (and consider accessibleWhenDisabled={ false } for consistency with other disabled actions in this package).
suffix: (
<InputControlSuffixWrapper variant="control">
<Button
icon={ isVisible ? unseen : seen }
onClick={ toggleVisibility }
size="small"
label={
isVisible
? __( 'Hide password' )
: __( 'Show password' )
}
/>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
oandregal
commented
Apr 7, 2026
| help={ description } | ||
| checked={ getValue( { item: data } ) } | ||
| onChange={ onChangeControl } | ||
| disabled={ disabled } |
Member
Author
There was a problem hiding this comment.
There's something wrong with the checkbok. It disappears when disabled?
Screen.Recording.2026-04-07.at.10.47.14.mov
Member
Author
There was a problem hiding this comment.
It was hidden due to a bug in the story that it's now fixed. Though it has the same issue than radio and textarea: it's disabled but the styles do not reflect that state
Screen.Recording.2026-04-07.at.13.20.41.mov
oandregal
commented
Apr 7, 2026
| options={ elements } | ||
| selected={ value } | ||
| hideLabelFromVision={ hideLabelFromVision } | ||
| disabled={ disabled } |
Member
Author
There was a problem hiding this comment.
While the control is disabled, they styles don't communicate that:
| Regular layout story | Field text story |
|---|---|
 |
 |
oandregal
commented
Apr 7, 2026
| help={ description } | ||
| onChange={ onChangeControl } | ||
| rows={ rows } | ||
| disabled={ disabled } |
Member
Author
There was a problem hiding this comment.
While the control is actually disabled, the styles do not communicate the state:
Screen.Recording.2026-04-07.at.10.56.46.mov
|
Size Change: +565 B (+0.01%) Total Size: 7.74 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 01a199b. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24082095252
|
ntsekouras
reviewed
Apr 7, 2026
| /** | ||
| * Whether the control is disabled. | ||
| */ | ||
| disabled?: boolean; |
Contributor
There was a problem hiding this comment.
I'm wondering if a new isDisabled API similar to the isVisible would be more flexible. That way consumers could also disable fields based on other info of the entity.
What do you think?
Member
Author
There was a problem hiding this comment.
I like that and implemented it at 5613289
For full disclosure:
- I agree that's a pattern we might need in nested scenarios. For example, country/region/city. The lowest urban levels should be disabled until users select an item from the highest levels.
- I don't like much
field.isDisabledfrom a semantic point of view: it's collocated at the field level but it only affects the Edit control. - However, an advantage of collocating it with the field is that it offers better devexp when consumers need a function instead of a boolean. For example:
{
id: 'field',
type: 'integer',
isDisabled: () => { /* Disable logic */ }
}If we had collocated it with the Edit, consumers would have to reimplement the Edit control, even though they only want to control disabled status:
{
id: 'field',
type: 'integer',
Edit: ( {} ) => {
const isDisabled = () => { /* Disable logic. */ };
/* Need to reimplement edit control */
}
}
ntsekouras
reviewed
Apr 7, 2026
ntsekouras
reviewed
Apr 7, 2026
ntsekouras
reviewed
Apr 7, 2026
Member
Author
|
There're a couple of |
adamsilverstein
pushed a commit
that referenced
this pull request
Apr 7, 2026
Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: Vrishabhsk <vrishabhsk@git.wordpress.org>
This was referenced Apr 8, 2026
Member
Author
|
I've also noticed the ForkTokenField styles were different than other controls, so I prepared a fix at #77137 |
Member
Author
|
Another fix for disabled styles in date component #77138 |
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
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.
Closes #73673
What?
Adds disabled prop support to all DataForm controls in the @wordpress/dataviews package.
Why?
See #73673
How?
disabled: false, so they are never disabled.Testing Instructions
npm run storybook:devto start Storybook.Use of AI Tools
Claude Code was used to generate this PR summary and drive implementation.