Improve AI Experiments page UI with header, accordion, and entry points #153

Jameswlepage · 2025-12-19T17:02:39Z

Summary

This PR enhances the AI Experiments settings page with improved UI and extensibility:

Full-width admin header with AI icon, page title, and quick-access buttons for Docs and Contribute
Refined experiment list layout using a cleaner grid with border separators instead of card-per-item
Entry points system allowing experiments to display contextual links (Dashboard, Try, etc.) next to their toggle
Settings accordion drawer for experiments with custom settings, using accessible toggle button with slide animation
Shared admin styles in new _common.scss for reuse across AI admin pages (MCP, Request Logs, etc.)

Screenshots

The experiments page now has:

A header matching the WordPress privacy-settings style with icon and action buttons
White page background for better visual consistency
Experiments displayed in a cleaner list format with entry point links inline
Collapsible settings drawers with smooth animations

Technical Changes

Abstract_Experiment: Added get_entry_points() and has_settings() methods for UI extensibility
Settings_Page.php: New header structure, grid layout, entry points display, and accordion drawer with inline JS
helpers.php: Added get_ai_icon_svg() and get_ai_icon_data_uri() helpers for icon rendering
_common.scss: New shared styles for admin headers and white page backgrounds
settings/index.scss: Updated styles for grid layout, entry point links, settings toggle, and drawer animation

Dependency Note

The following feature PRs will need to be rebased onto this PR (or updated after merge) as they also modify the experiments page:

Add Extended Providers experiment #148 - Extended Providers
Add AI Request Logging experiment with observability dashboard #149 - AI Request Logging
Add Type Ahead experiment #151 - Type Ahead
Add MCP (Model Context Protocol) experiment #152 - MCP

These PRs currently include similar header styling changes that would become redundant after this PR merges. They should be updated to:

Remove any duplicated header/common styles now in _common.scss
Use the new get_entry_points() method to add their entry point links
Use the new has_settings() method if they have custom settings

Test Plan

Visit Settings > AI Experiments and verify the new header appears with icon, title, Docs and Contribute buttons
Verify page has white background
Enable experiments and verify entry point links appear for experiments that define them
If an experiment has settings, verify the gear icon appears and clicking it toggles the settings drawer
Test accordion animation is smooth (0.2s slide-down)
Verify toggle states are properly indicated (blue when expanded)
Test responsive behavior on narrower screens

…oints - Add full-width admin header with AI icon, title, and action buttons - Docs and Contribute links in header for easy access - White background page styling - Update experiment list to grid layout with border separators - Cleaner visual hierarchy with borderless items - Entry point links next to experiment title (Dashboard, Try, etc.) - Settings toggle button with accordion drawer - Add Abstract_Experiment methods for UI extensibility - get_entry_points(): Define contextual links for experiments - has_settings(): Indicate if experiment has custom settings - Add get_ai_icon_svg() helper for inline SVG icons - New _common.scss with shared admin page styles - Header component styles - White page background utilities - Reusable across other admin pages

github-actions · 2025-12-19T17:02:51Z

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Jameswlepage <isotropic@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: JasonTheAdams <jason_the_adams@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

codecov · 2025-12-19T17:06:05Z

Codecov Report

❌ Patch coverage is 30.98592% with 98 lines in your changes missing coverage. Please review.
✅ Project coverage is 49.30%. Comparing base (6478545) to head (9315734).
⚠️ Report is 13 commits behind head on develop.

Files with missing lines	Patch %	Lines
includes/REST/Settings_Controller.php	45.34%	47 Missing ⚠️
includes/Settings/Settings_Page.php	0.00%	27 Missing ⚠️
includes/bootstrap.php	26.31%	14 Missing ⚠️
includes/Abstracts/Abstract_Experiment.php	0.00%	10 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #153      +/-   ##
=============================================
+ Coverage      46.89%   49.30%   +2.41%     
- Complexity       208      221      +13     
=============================================
  Files             19       20       +1     
  Lines           1271     1298      +27     
=============================================
+ Hits             596      640      +44     
+ Misses           675      658      -17

Flag	Coverage Δ
unit	`49.30% <30.98%> (+2.41%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

- Add get_entry_points(), has_settings(), render_settings_fields() to Experiment interface - Add false check for file_get_contents() in get_ai_icon_data_uri()

Copilot

Pull request overview

This PR modernizes the AI Experiments settings page with a polished admin UI, introducing a full-width header section, cleaner experiment grid layout, contextual entry point links, and an accordion-style settings drawer for experiments with custom configurations.

Key Changes:

Added get_entry_points() and has_settings() methods to the Experiment interface and Abstract_Experiment class for UI extensibility
Introduced full-width admin header with AI icon and action buttons (Docs, Contribute)
Replaced card-per-experiment layout with a unified grid using border separators
Implemented collapsible settings drawers with toggle buttons and animations

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
`includes/Settings/Settings_Page.php`	Added header structure, entry point rendering, and accordion drawer implementation with inline JavaScript
`includes/helpers.php`	Added `get_ai_icon_svg()` and `get_ai_icon_data_uri()` helper functions for icon rendering
`includes/Contracts/Experiment.php`	Added interface methods for `get_entry_points()`, `has_settings()`, and `render_settings_fields()`
`includes/Abstracts/Abstract_Experiment.php`	Provided default implementations for new experiment extensibility methods
`src/admin/_common.scss`	New shared admin styles for headers, icons, and white page backgrounds
`src/admin/settings/index.scss`	Updated experiment list to grid layout, added styles for entry points, settings toggle button, and drawer animation

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

includes/helpers.php

includes/Settings/Settings_Page.php

includes/helpers.php

includes/Settings/Settings_Page.php

includes/Abstracts/Abstract_Experiment.php

includes/Settings/Settings_Page.php

src/admin/settings/index.scss

includes/Settings/Settings_Page.php

jeffpaul · 2025-12-19T21:51:39Z

Note that we'll likely need another iteration on this as the admin reskin in WP 7.0 continues onward as we'll want to closely align to those updated UI components to ensure AIE presents as a first party plugin for WPORG.

jeffpaul · 2025-12-19T21:53:30Z

@Jameswlepage do you think the work here can close both #35 and #103?

includes/Abstracts/Abstract_Experiment.php

Jameswlepage · 2025-12-22T21:12:54Z

@jeffpaul No, this doesn't close either issue, it's more of an incremental improvement to the existing PHP-based settings page. That said, I'm in favor of shipping it as-is while we work towards a fully React dashboard.

The React implementation (#103) probably warrants more coordination with the Abilities Explorer or MCP work, and should align with more modern WordPress patterns like the new Fonts UI in recent Gutenberg releases, which has its own rendering system using @wordpress/build. That approach is still pretty early and experimental at this point.

@youknowriad would love your thoughts on the right direction here as we think about modernizing the admin UI.

youknowriad · 2025-12-23T07:02:10Z

One thing you can consider here is indeed switching to @wordpress/build pages + DataForm for the form itself. They are both usable today in plugins. @wordpress/build is not heavily used yet but we can try our own tools right.

I don't really think it's mandatory here, it's an experiments page, but if the page starts requiring more and more interaction and you really want to switch to React rendering like the linked issue suggest, you should definitely try to use @wordpress/build and DataForm and I'm happy to try to provide support for any issues you may encounter.

jeffpaul · 2026-01-07T19:24:07Z

Noting that @JasonTheAdams is taking an updated look at the work here in line with @youknowriad's comment, whether that pushes directly to this PR/branch or in a new PR.

JasonTheAdams · 2026-01-10T06:08:58Z

I've updated this per @youknowriad's suggestions. This now uses:

WP-Build for building the assets and setting up the settings page, including routing
React-based settings including DataForm for the inputs themselves

Experiments can now register DataForm field format. Documentation has been included on how to do this.

JasonTheAdams · 2026-01-10T06:11:33Z

@dkotter I think it would be a good idea for you to review this as it may impact your other experiment PRs if they contain settings.

Jameswlepage · 2026-01-12T17:58:22Z

The container .boot-layout__surfaces has a padding left (6px) that causes the main content with a white background to be separated from the native triangle Goal that signifies the active menu item. I'm not sure if this is the WP build or the implementation here, but we should polish that.

Jameswlepage · 2026-01-12T17:59:48Z

Also seeing a doubled border on the cards here.

I will see if I can address both, if I can find some time today.

jeffpaul · 2026-01-12T20:23:10Z

Would also prefer to utilize the colored icon from https://github.com/WordPress/ai/tree/develop/.wordpress-org instead of a different "science beaker" one.

dkotter · 2026-01-12T20:42:43Z

composer.json

    "wp-phpunit/wp-phpunit": "^6.5",
-    "yoast/phpunit-polyfills": "^4.0"
+    "yoast/phpunit-polyfills": "^4.0",
+    "php-stubs/wordpress-stubs": "^6.9.0"


Curious why this was needed? We don't include php-stubs/wordpress-stubs directly but it does look like this is already included in our dependency chain

dkotter · 2026-01-12T20:48:54Z

package.json

    "plugin-zip": "wp-scripts plugin-zip",
-    "build": "wp-scripts build",
-    "start": "wp-scripts start",
+    "build": "wp-build",


So unless I'm missing something, changing this build script (and removing the webpack file) breaks all of our experiments, as the JS files they rely on aren't built properly anymore

fix: add missing interface methods and type safety for CI

25b84b4

- Add get_entry_points(), has_settings(), render_settings_fields() to Experiment interface - Add false check for file_get_contents() in get_ai_icon_data_uri()

Jameswlepage requested a review from Copilot December 19, 2025 17:21

Copilot started reviewing on behalf of Jameswlepage December 19, 2025 17:22 View session

Copilot AI reviewed Dec 19, 2025

View reviewed changes

Merge branch 'develop' into feature/experiments-page-ui

3eceb83

jeffpaul requested a review from dkotter December 19, 2025 21:51

jeffpaul added this to the 0.2.0 milestone Dec 19, 2025

jeffpaul assigned Jameswlepage Dec 19, 2025

jeffpaul requested a review from JasonTheAdams December 19, 2025 21:52

jeffpaul added this to WordPress AI Planning & Roadmap Dec 19, 2025

jeffpaul moved this to Needs review in WordPress AI Planning & Roadmap Dec 19, 2025

dkotter reviewed Dec 22, 2025

View reviewed changes

includes/Abstracts/Abstract_Experiment.php Outdated Show resolved Hide resolved

Use x.x.x placeholder for @SInCE tags on new methods

1c4eca3

jeffpaul added 2 commits December 23, 2025 15:48

correct sinces to x.x.x

6ab17e8

Merge branch 'develop' into feature/experiments-page-ui

3b65f50

jeffpaul removed the request for review from JasonTheAdams January 7, 2026 19:24

jeffpaul assigned JasonTheAdams Jan 7, 2026

jeffpaul moved this from Needs review to In progress in WordPress AI Planning & Roadmap Jan 7, 2026

jeffpaul marked this pull request as draft January 7, 2026 19:25

JasonTheAdams added 3 commits January 9, 2026 11:56

feat: updates phstpan stubs to 6.9

8da4504

feat: switches to DataForms settings with wp-build

044bd68

chore: removes test setting and documents adding settings

359c006

JasonTheAdams marked this pull request as ready for review January 10, 2026 06:09

JasonTheAdams requested a review from dkotter January 10, 2026 06:09

refactor: removes unused functions

9315734

jeffpaul moved this from In progress to Needs review in WordPress AI Planning & Roadmap Jan 12, 2026

dkotter mentioned this pull request Jan 12, 2026

Replace global experiments checkbox with enable/disable button #168

Open

dkotter reviewed Jan 12, 2026

View reviewed changes

jeffpaul modified the milestones: 0.2.0, 0.3.0 Jan 13, 2026

Improve AI Experiments page UI with header, accordion, and entry points #153

Are you sure you want to change the base?

Improve AI Experiments page UI with header, accordion, and entry points #153

Uh oh!

Conversation

Jameswlepage commented Dec 19, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Technical Changes

Dependency Note

Test Plan

Uh oh!

github-actions bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jeffpaul commented Dec 19, 2025

Uh oh!

jeffpaul commented Dec 19, 2025

Uh oh!

Uh oh!

Jameswlepage commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

youknowriad commented Dec 23, 2025

Uh oh!

jeffpaul commented Jan 7, 2026

Uh oh!

JasonTheAdams commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JasonTheAdams commented Jan 10, 2026

Uh oh!

Jameswlepage commented Jan 12, 2026

Uh oh!

Jameswlepage commented Jan 12, 2026

Uh oh!

jeffpaul commented Jan 12, 2026

Uh oh!

dkotter Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

dkotter Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Jameswlepage commented Dec 19, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Dec 19, 2025 •

edited

Loading

codecov bot commented Dec 19, 2025 •

edited

Loading

Jameswlepage commented Dec 22, 2025 •

edited

Loading

JasonTheAdams commented Jan 10, 2026 •

edited

Loading