Site Editor > Quick Edit: add form config to endpoint#76953
Site Editor > Quick Edit: add form config to endpoint#76953
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. |
| if ( ! quickEditForm ) { | ||
| return { layout: { type: 'panel' }, fields: [] }; | ||
| } | ||
| if ( ! isBulk ) { |
There was a problem hiding this comment.
Bulk editing state has intentionally be left in the client for now. This will be part of a follow-up (tracked at #76544)
There was a problem hiding this comment.
Pull request overview
This PR migrates the Site Editor “Pages” Quick Edit form configuration from a hardcoded client-side definition to the wp/v2/view-config REST API response, allowing the UI to be driven by server-provided form config.
Changes:
- Adds a
quick_edit_formproperty to view-config data flow (core-data selector →useViewConfig→ PostList → QuickEditModal). - Updates Quick Edit modal to use the server-provided
quickEditForm(and filters top-level fields for bulk edit). - Extends the view-config REST controller schema/response to include the
quick_edit_formobject and its JSON schema.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/views/src/use-view-config.ts | Extends hook return typing to include quick_edit_form (DataForm Form). |
| packages/edit-site/src/components/post-list/quick-edit-modal.js | Replaces hardcoded form definition with injected server-provided quickEditForm and bulk filtering. |
| packages/edit-site/src/components/post-list/index.js | Plumbs quick_edit_form from useViewConfig into QuickEditModal. |
| packages/core-data/src/private-selectors.ts | Adds quick_edit_form default key to the view config selector fallback object. |
| lib/compat/wordpress-7.1/class-gutenberg-rest-view-config-controller-7-1.php | Adds quick_edit_form to REST response and publishes schema for form config/layout/fields. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const form = useMemo( () => { | ||
| const allFields = [ | ||
| { | ||
| id: 'featured_media', | ||
| layout: { | ||
| type: 'regular', | ||
| labelPosition: 'none', | ||
| }, | ||
| }, | ||
| { | ||
| id: 'post-content-info', | ||
| layout: { type: 'regular', labelPosition: 'none' }, | ||
| }, | ||
| { | ||
| id: 'status', | ||
| label: __( 'Status' ), | ||
| children: [ | ||
| { | ||
| id: 'status', | ||
| layout: { type: 'regular', labelPosition: 'none' }, | ||
| }, | ||
| 'scheduled_date', | ||
| 'password', | ||
| ], | ||
| }, | ||
| 'author', | ||
| 'date', | ||
| 'slug', | ||
| 'parent', | ||
| { | ||
| id: 'discussion', | ||
| label: __( 'Discussion' ), | ||
| children: [ | ||
| { | ||
| id: 'comment_status', | ||
| layout: { type: 'regular', labelPosition: 'none' }, | ||
| }, | ||
| 'ping_status', | ||
| ], | ||
| }, | ||
| 'template', | ||
| ]; | ||
|
|
||
| if ( ! quickEditForm ) { | ||
| return { layout: { type: 'panel' }, fields: [] }; | ||
| } | ||
| if ( ! isBulk ) { | ||
| return quickEditForm; | ||
| } |
There was a problem hiding this comment.
When quickEditForm is not yet available (e.g., view-config still resolving or the request fails), the modal renders an empty DataForm and still allows “Done”, resulting in a confusing no-op save. Consider gating rendering on quickEditForm being loaded (or showing a loading/error state and disabling the primary action) or providing a local fallback form config so Quick Edit remains functional if the endpoint is unavailable.
There was a problem hiding this comment.
That could be a nice touch.
| $quick_edit_form = array( | ||
| 'layout' => array( 'type' => 'panel' ), | ||
| 'fields' => array( | ||
| array( | ||
| 'id' => 'featured_media', | ||
| 'layout' => array( | ||
| 'type' => 'regular', | ||
| 'labelPosition' => 'none', | ||
| ), | ||
| ), | ||
| array( | ||
| 'id' => 'post-content-info', | ||
| 'layout' => array( | ||
| 'type' => 'regular', | ||
| 'labelPosition' => 'none', | ||
| ), | ||
| ), | ||
| array( | ||
| 'id' => 'status', | ||
| 'label' => __( 'Status', 'gutenberg' ), | ||
| 'children' => array( | ||
| array( | ||
| 'id' => 'status', | ||
| 'layout' => array( | ||
| 'type' => 'regular', | ||
| 'labelPosition' => 'none', | ||
| ), | ||
| ), | ||
| 'scheduled_date', | ||
| 'password', | ||
| ), | ||
| ), | ||
| 'author', | ||
| 'date', | ||
| 'slug', | ||
| 'parent', | ||
| array( | ||
| 'id' => 'discussion', | ||
| 'label' => __( 'Discussion', 'gutenberg' ), | ||
| 'children' => array( | ||
| array( | ||
| 'id' => 'comment_status', | ||
| 'layout' => array( | ||
| 'type' => 'regular', | ||
| 'labelPosition' => 'none', | ||
| ), | ||
| ), | ||
| 'ping_status', | ||
| ), | ||
| ), | ||
| 'template', | ||
| ), | ||
| ); |
There was a problem hiding this comment.
$quick_edit_form is currently built and returned for every kind/name request, even when Quick Edit isn’t applicable to that entity. This makes the endpoint response less accurate and could lead consumers to assume Quick Edit support where it doesn’t exist. Consider only including quick_edit_form for entities/screens that actually support Quick Edit (or returning null/omitting the key when unsupported).
| $quick_edit_form = array( | |
| 'layout' => array( 'type' => 'panel' ), | |
| 'fields' => array( | |
| array( | |
| 'id' => 'featured_media', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| array( | |
| 'id' => 'post-content-info', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| array( | |
| 'id' => 'status', | |
| 'label' => __( 'Status', 'gutenberg' ), | |
| 'children' => array( | |
| array( | |
| 'id' => 'status', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| 'scheduled_date', | |
| 'password', | |
| ), | |
| ), | |
| 'author', | |
| 'date', | |
| 'slug', | |
| 'parent', | |
| array( | |
| 'id' => 'discussion', | |
| 'label' => __( 'Discussion', 'gutenberg' ), | |
| 'children' => array( | |
| array( | |
| 'id' => 'comment_status', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| 'ping_status', | |
| ), | |
| ), | |
| 'template', | |
| ), | |
| ); | |
| $quick_edit_form = null; | |
| // Only provide a Quick Edit form for entities that actually support it. | |
| // This guard can be expanded as more entities gain Quick Edit support. | |
| if ( 'postType' === $kind && 'post' === $name ) { | |
| $quick_edit_form = array( | |
| 'layout' => array( 'type' => 'panel' ), | |
| 'fields' => array( | |
| array( | |
| 'id' => 'featured_media', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| array( | |
| 'id' => 'post-content-info', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| array( | |
| 'id' => 'status', | |
| 'label' => __( 'Status', 'gutenberg' ), | |
| 'children' => array( | |
| array( | |
| 'id' => 'status', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| 'scheduled_date', | |
| 'password', | |
| ), | |
| ), | |
| 'author', | |
| 'date', | |
| 'slug', | |
| 'parent', | |
| array( | |
| 'id' => 'discussion', | |
| 'label' => __( 'Discussion', 'gutenberg' ), | |
| 'children' => array( | |
| array( | |
| 'id' => 'comment_status', | |
| 'layout' => array( | |
| 'type' => 'regular', | |
| 'labelPosition' => 'none', | |
| ), | |
| ), | |
| 'ping_status', | |
| ), | |
| ), | |
| 'template', | |
| ), | |
| ); | |
| } |
There was a problem hiding this comment.
This point is valid, although the check for now could be checking if it's not among the design types (template, etc..).
It's a first step though and it's fine as is for now, since it will need to change either way in follow ups.
|
Size Change: +126 B (0%) Total Size: 7.73 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in fbb61ba. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23846807258
|
| array( | ||
| 'type' => 'object', | ||
| 'properties' => array( | ||
| 'type' => array( |
There was a problem hiding this comment.
I think it will be important to find a way to have a single source of truth and not have to maintain the schemas both in PHP and TS.
| ), | ||
| ), | ||
| ), | ||
| 'quick_edit_form' => array( |
There was a problem hiding this comment.
Do we expect any cases where the DataForm in inspector controls could be different from quick edit?
In essence, will any post type only contain a single form settings?
There was a problem hiding this comment.
Also, is this setting in view config and not somewhere else attached to post types because we expect different form settings per view?
There was a problem hiding this comment.
I renamed to form and used it for both 32e03b905af97dd2f96d98546fb5e7c6c8ec71a8I
| postType, | ||
| postId, | ||
| closeModal, | ||
| quickEditForm, |
ntsekouras
left a comment
There was a problem hiding this comment.
Looks good, thanks. Let's land and iterate.
Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Part of #76544
Backported at WordPress/wordpress-develop#11272
What?
Migrates the quick edit form configuration from a hardcoded JavaScript definition to the wp/v2/view-config REST API endpoint.
Why?
See #76544
How?
formproperty to the view-config REST endpoint response in the PHP controller, containing the form layout (panel) and fields list.Testing Instructions
formkey with layout and fields.Use of AI Tools
Claude Code (Claude Opus 4.6) was used to assist with implementation, code exploration, etc.
Follow-ups
Update backport PR at WordPress/wordpress-develop#11272