Modernize Experiments page with DataViews and routing system#74502
Closed
shaunandrews wants to merge 8 commits intotrunkfrom
Closed
Modernize Experiments page with DataViews and routing system#74502shaunandrews wants to merge 8 commits intotrunkfrom
shaunandrews wants to merge 8 commits intotrunkfrom
Conversation
Introduces a new React-based UI for the Gutenberg Experiments settings page, available as an opt-in experiment called "Experiments Page Redesign". Features: - Card-based layout with experiments grouped by category (Blocks, Editor, Advanced) - Instant save via REST API (no page reload required) - Visual feedback with icons, animations, and save indicators - Dependency management with confirmation modals - Responsive design with reduced motion support The classic Settings API form remains the default and is still available when the experiment is disabled. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
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. |
bph
added
[Type] Enhancement
|
Size Change: +2.28 kB (+0.07%) Total Size: 3.05 MB
ℹ️ View Unchanged
|
Contributor
|
I'm looking at this to see how well it aligns with Gutenberg |
Contributor
|
This is beautiful. Thanks @shaunandrews and @getdave for working on this! |
getdave
reviewed
Jan 9, 2026
Contributor
getdave
left a comment
getdave
left a comment
There was a problem hiding this comment.
Thanks for the PR 🎉 I saw the UI implementation away from Github and it looks great.
If we want to do this we may be able to build on top of the new routing system @youknowriad added which as I understand it is designed to allow building custom admin pages using Gutenberg components and tooling.
We would register a new "experiments page" route and then reuse lots of the same front end components.
There is some REST API refactoring as well to put code in the correct place, but that's fine.
package.json
Outdated
Comment on lines
+138
to
+139
| "build": "node ./bin/build.mjs && npm run build:experiments-page", | ||
| "build:experiments-page": "wp-scripts build lib/experiments-page/src/index.js --output-path=build/experiments-page", |
Contributor
There was a problem hiding this comment.
We won't be able to have a separate build process. Looking to see why this is needed
Contributor
Author
There was a problem hiding this comment.
Its probably not. Likely a vestige of this being its own plugin a few hours ago, and claude misunderstanding my request to apply changes to gutenberg.
Contributor
|
Please note that @fabiankaegy is also trying to rebuild this page using DataForms. #70711 |
Contributor
|
@shaunandrews maybe you could look at the design that Fabian is implementing in #70711? That's similar to the technique route I recommended in my review here but I'm sure he'd appreciate some Design input. Maybe there's a way to bring some of the visual and UX ideas here to Fabian's PR? If you agree maybe we should close this one out. WDYT? |
- Move experiments page from lib/experiments-page/ to packages/edit-site/ - Remove custom REST API in favor of core-data useEntityRecord - Remove unused dependency system (no experiments had requires field) - Remove unused React Context and useExperiments hook - Make page full-bleed by overriding WordPress admin padding - Simplify build by removing separate experiments-page build step Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The experiments page is an admin settings screen, not part of the Site Editor, so it doesn't belong in the @wordpress/edit-site package. - Move React components to lib/experiments-page/src/ - Add experiments page build step to bin/build.mjs - Update PHP to load from build/experiments-page/ - Remove experiments exports from edit-site package Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Introduces a new experiments routing system with: - New routes/experiments/ for the experiments page UI - New packages/experiments-init for experiment initialization - Updated boot store with experiments state management - Refactored lib/experiments-page components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove lib/experiments-page/src/ JavaScript implementation - Simplify lib/experiments-page.php to only use boot-based renderer - Remove experiments-page build step from bin/build.mjs - Move "Learn more" link inline with description text - Remove border under category headings
Replace the custom card-based UI with WordPress DataViews for a more consistent and feature-rich experience: - Table layout with sortable columns and global search - Bulk actions for enabling/disabling multiple experiments - Status badges showing enabled/disabled state - Primary actions (Enable/Disable) appear on row hover - Toast notifications for save feedback instead of button state - Cleaner sidebar description styling The page now leverages the routing system's page config for sidebar content and uses DataViews' built-in selection, filtering, and action patterns.
- Add `requires` field to experiment definitions for declaring dependencies - Show inline notice when an experiment's dependency isn't met - Auto-enable required experiments when enabling a dependent experiment - Auto-disable dependent experiments when disabling a required experiment - Show confirmation dialog before cascading enable/disable changes - Add "Block Fields" → "Content-only Patterns" as first dependency example
Contributor
Author
Latest UpdatesDependency Support & Confirmation DialogsAdded support for experiment dependencies with user-friendly confirmation dialogs: Dependency Declaration
Inline Dependency Notice
Confirmation Dialogs
Cascading Changes
This ensures users understand the relationships between experiments and don't accidentally break functionality by disabling a required experiment. |
Member
@shaunandrews any thoughts on this? I don't care if it's my PR or someone else's that gets merged here :) But I do feel pretty strongly that we should leverage and improve the DataForms components for this as it is what we are proposing new settings pages in the admin redesign leverage. So we should dogfood this work and use it ourselves:) |
Contributor
Author
I just pushed a bunch of updates that uses dataviews; let me know if I'm doing it right! |
Extends the DataViews table layout API to support flexible placement of the actions column and optional hiding of its header text. New layout options for ViewTable: - `actionsPosition`: Controls where actions column appears - 'end' (default): After all other columns - 'start': Immediately after the primary column - number: At specific index within fields array - `hideActionsHeader`: When true, hides the "Actions" header text while preserving the column structure Updates the Experiments page to use these new options instead of CSS workarounds, placing the toggle action before the status column.
Contributor
|
I think what @fabiankaegy meant was to rebuild the UI not using the dataviews itself, but using the
I don't think adding new APIs should be done in this PR. If the dataviews itself really needs this API, I think it should be discussed and evaluated in a separate PR. Personally, I prefer to move forward with #70711 and implement basic UI improvements using the |
Member
Is this change necessary to land this PR? I'd like to get design feedback on whether this is something we want to support in DataViews first. If we were to do this, it'd need to come with updates to the existing storybook as well. My first instinct is that letting the consumer control dataviews ui at this level is something we have been wary about. I'd like to hear design thoughts before going this route. |
Contributor
Author
|
Sounds like we should move forward with #70711 — I'll close this one. |
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
6 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.
Summary
Introduces a modern React-based UI for the Gutenberg Experiments settings page, replacing the legacy Settings API form with a DataViews-powered interface integrated into the new routing system.
Technical Implementation
DataViews Integration
@wordpress/dataviewscomponent for rendering the experiments listRouting System
experiments-initpackagesetPageConfig@wordpress/bootData Persistence
@wordpress/core-datato read/write thegutenberg-experimentssite settingsaveEntityRecordcalls to avoid dirty entity tracking UI@wordpress/noticesfor save feedbackDataViews API Enhancements
This PR also extends the DataViews table layout API with new options for flexible actions column placement:
New
layoutoptions forViewTable:actionsPosition'end' | 'start' | number'end'(default) places it after all columns,'start'places it immediately after the primary column, or a number places it at that index within the fields array.hideActionsHeaderbooleantrue, hides the "Actions" header text while preserving the column structure for layout consistency.Example usage:
This replaces the need for CSS workarounds when customizing actions column placement.
Features
Before (Settings API form)
After (DataViews + Routing)
Test Plan
DataViews API Testing
actionsPosition: 'start')hideActionsHeader: true)actionsPosition: 'end'moves actions back to the last columnactionsPositionvalues place actions at correct index