Add visual-card presentation for featured experiments by jorgefilipecosta · Pull Request #417 · WordPress/ai

jorgefilipecosta · 2026-04-10T17:07:57Z

Summary

Extends the feature metadata system with presentation and image fields so experiments can declare a visual card layout in load_metadata()
Image Generation and Title Generation experiments use the new visual-card presentation with showcase images
The settings page renders visual-card experiments as side-by-side cards (using DataForm row layout) with image, description, and enable/disable button with an enabled state badge
Non-visual-card experiments continue to render as standard toggles grouped by category

Screenshot

Test plan

Visit the AI settings page (options-general.php?page=ai-wp-admin)
Verify Image Generation and Title Generation appear as visual cards below General Settings
Verify the cards display side-by-side with images, descriptions, and enable/disable buttons
Click Enable — verify the green checkmark badge appears and the setting saves
Click Disable — verify the badge disappears and the setting saves
Disable AI globally — verify the cards show a disabled state with disabled buttons
Verify the two experiments are not duplicated in the Editor Experiments toggle list

github-actions · 2026-04-10T17:08:10Z

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: jorgefilipecosta <[email protected]>
Co-authored-by: dkotter <[email protected]>
Co-authored-by: jeffpaul <[email protected]>

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

codecov · 2026-04-10T17:16:14Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.36%. Comparing base (ff069e8) to head (728791e).
⚠️ Report is 23 commits behind head on develop.

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #417      +/-   ##
=============================================
+ Coverage      68.31%   68.36%   +0.04%     
- Complexity       812      813       +1     
=============================================
  Files             53       53              
  Lines           3939     3945       +6     
=============================================
+ Hits            2691     2697       +6     
  Misses          1248     1248

Flag	Coverage Δ
unit	`68.36% <100.00%> (+0.04%)`	⬆️

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.

jeffpaul · 2026-04-10T21:31:40Z

Noting we'll want to get a Proposal issue opened for Title Gen if we want to elevate that to a Feature from an Experiment (cc: @Jameswlepage @felixarntz).

Extend the feature metadata system to support a presentation style and image URL. Features can now declare themselves as 'visual-card' in load_metadata(), following the same pattern as label, description, and category.

Set presentation to 'visual-card' with image URLs in the load_metadata() of both experiments so they render as showcase cards on the settings page.

Include the feature presentation style and image URL in the data sent to the settings page script module so the frontend can render visual-card experiments differently.

Add the image generation screenshot and a placeholder SVG for title generation used by the visual-card presentation on the settings page.

Add presentation and image fields to the FeatureData interface and update parseFeature() to extract them from the server-provided data.

Create a custom DataForm Edit component that renders visual-card experiments as cards with image, title, description, enable/disable button, and a green enabled-state badge. The component reads the global AI toggle from the data to handle the disabled state.

Assign VisualCardToggle as the Edit component for visual-card features and separate them into a showcase section using DataForm row layout to render cards side-by-side (2 per row). Non-visual-card features continue in their regular category sections.

Style the visual-card presentation with image area, content section, action buttons with enabled-state badge, and a disabled state for when AI is globally turned off.

Add the new getter methods to the Feature contract so PHPStan recognizes them when iterating features from the registry.

Apply prettier auto-fixes for import grouping and JSX formatting.

…tation - Remove VISUAL_CARD_SETTING_NAMES Set; use VISUAL_CARD_FEATURES.has() directly since Map.has() is already O(1) - Sanitize image URL with esc_url() in bootstrap metadata for defense-in-depth consistency - Validate presentation value against allowed values in the Abstract_Feature constructor, falling back to 'toggle' for unrecognized values

Use an inline SVG for the check icon to avoid a false positive from the import/no-extraneous-dependencies lint rule in the routes/ directory.

dkotter

Few things flagged here plus it looks like failing E2E and unit tests that need looked at

jorgefilipecosta · 2026-04-16T10:02:28Z

All feedback was applied and the CI is green ☺️

jeffpaul

Image isn't loading in Playground or in local testing (Firefox 149.0.2, WordPress 7.0-RC2)

dkotter · 2026-04-16T15:30:31Z

Image isn't loading in Playground or in local testing (Firefox 149.0.2, WordPress 7.0-RC2)

Yeah, I think the issue here is this image is in a new assets/images directory and that isn't making it into the final release and thus can't be found.

In addition, and this is just my opinion, but the way this image is framed it looks like the buttons in the image are actual buttons I should be able to click, as they basically render as the same size as the other buttons:

New Featured section showing image generation

I think this becomes less of an issue once we introduce at least one more "stable" Feature as that will change the layout here to be two boxes side-by-side and then the image scales down which makes the buttons in the image smaller. So may not need to change anything here but at first glance, is somewhat confusing

jeffpaul · 2026-04-16T15:36:39Z

In addition, and this is just my opinion, but the way this image is framed it looks like the buttons in the image are actual buttons I should be able to click, as they basically render as the same size as the other buttons:

Perhaps better then if I created a short GIF for that space instead?

The assets/ directory was missing from the 'files' list in package.json, so wp-scripts plugin-zip was excluding assets/images/ from ai.zip. This broke the showcase image reference used by the visual-card presentation in Playground and installed-zip environments.

dkotter · 2026-04-16T15:42:50Z

Perhaps better then if I created a short GIF for that space instead?

Not sure honestly. Whether a slightly different cropped image or maybe a gif (that can be annoying, though people aren't likely to spend much time on this screen). Or just leave as-is for now and see what feedback we get. It may just be me that thinks those buttons look clickable.

jorgefilipecosta · 2026-04-16T15:45:30Z

Hi @jeffpaul @dkotter, the image loading should be fixed.

jorgefilipecosta · 2026-04-16T15:51:07Z

Regarding the image, @annezazu also passed some feedback to me that the cropping on the image may not be ideal. I guess we may get some design help in the future to polish the visual assets. Happy to do apply any changes we could meanwhile, but I think we could merge the PR and then improve assets, changing assets is really simple is just replacing a file.

jeffpaul

Works well, thanks!

The CI issues were fixed.

jeffpaul added this to the 0.8.0 milestone Apr 10, 2026

jeffpaul added this to WordPress AI Planning & Roadmap Apr 10, 2026

jeffpaul moved this to Needs review in WordPress AI Planning & Roadmap Apr 10, 2026

jeffpaul requested review from dkotter and jeffpaul April 10, 2026 17:09

dkotter reviewed Apr 10, 2026

View reviewed changes

Comment thread includes/Abstracts/Abstract_Feature.php Outdated

This was referenced Apr 10, 2026

Promote Image Generation from an Experiment to a Feature #418

Merged

Proposal: Promote Image Generation and Editing Experiment to Feature #416

Closed

jeffpaul linked an issue Apr 10, 2026 that may be closed by this pull request

Proposal: Promote Image Generation and Editing Experiment to Feature #416

Closed

jorgefilipecosta added 12 commits April 15, 2026 16:21

Add presentation and image metadata support to Abstract_Feature

54140e4

Extend the feature metadata system to support a presentation style and image URL. Features can now declare themselves as 'visual-card' in load_metadata(), following the same pattern as label, description, and category.

Declare visual-card presentation for Image and Title Generation

af1e18c

Set presentation to 'visual-card' with image URLs in the load_metadata() of both experiments so they render as showcase cards on the settings page.

Pass presentation and image metadata to settings client

f1b47c8

Include the feature presentation style and image URL in the data sent to the settings page script module so the frontend can render visual-card experiments differently.

Add showcase images for visual-card experiments

5235f4f

Add the image generation screenshot and a placeholder SVG for title generation used by the visual-card presentation on the settings page.

Extend FeatureData types and parsing for visual-card presentation

7b312c7

Add presentation and image fields to the FeatureData interface and update parseFeature() to extract them from the server-provided data.

Add showcase card styles for visual-card experiments

42b61e3

Style the visual-card presentation with image area, content section, action buttons with enabled-state badge, and a disabled state for when AI is globally turned off.

Add get_presentation and get_image to Feature interface

188cda7

Add the new getter methods to the Feature contract so PHPStan recognizes them when iterating features from the registry.

Fix lint formatting in VisualCardToggle component

045312c

Apply prettier auto-fixes for import grouping and JSX formatting.

Replace @wordpress/icons import with inline SVG

2e4308d

Use an inline SVG for the check icon to avoid a false positive from the import/no-extraneous-dependencies lint rule in the routes/ directory.

jorgefilipecosta force-pushed the add/visual-card-experiment-presentation branch from c6b19b3 to 2e4308d Compare April 15, 2026 15:32

jorgefilipecosta added 3 commits April 15, 2026 17:34

rely on stability

01952bd

fix enable all/disable all buttons

daeaddb

lint fixes

95e87bf

dkotter previously requested changes Apr 15, 2026

View reviewed changes

Comment thread assets/images/showcase-image-generation.png Outdated

Comment thread includes/Abstracts/Abstract_Feature.php Outdated

enhacements

8bd79db

jorgefilipecosta added 5 commits April 15, 2026 20:30

revert title generation category

f4405ed

test updates

58ea97a

fixes

9d23479

lint fixes

64b70a9

test fix

f7590ac

jeffpaul requested changes Apr 16, 2026

View reviewed changes

jeffpaul approved these changes Apr 16, 2026

View reviewed changes

jeffpaul removed this from WordPress AI Planning & Roadmap Apr 16, 2026

jorgefilipecosta merged commit 42710dd into develop Apr 16, 2026
18 checks passed

jorgefilipecosta deleted the add/visual-card-experiment-presentation branch April 16, 2026 16:12

dkotter assigned jorgefilipecosta Apr 16, 2026

Conversation

jorgefilipecosta commented Apr 10, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshot

Test plan

Uh oh!

github-actions Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

jeffpaul commented Apr 10, 2026

Uh oh!

dkotter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jorgefilipecosta commented Apr 16, 2026

Uh oh!

jeffpaul left a comment

Choose a reason for hiding this comment

Uh oh!

dkotter commented Apr 16, 2026

Uh oh!

jeffpaul commented Apr 16, 2026

Uh oh!

dkotter commented Apr 16, 2026

Uh oh!

jorgefilipecosta commented Apr 16, 2026

Uh oh!

jorgefilipecosta commented Apr 16, 2026

Uh oh!

jeffpaul left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jorgefilipecosta commented Apr 10, 2026 •

edited by github-actions Bot

Loading

github-actions Bot commented Apr 10, 2026 •

edited

Loading

codecov Bot commented Apr 10, 2026 •

edited

Loading