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

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.

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 <jorgefilipecosta@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>

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

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

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

Codecov Report

❌ Patch coverage is 96.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 65.85%. Comparing base (cf338eb) to head (c6b19b3).

Files with missing lines	Patch %	Lines
includes/Abstracts/Abstract_Feature.php	92.30%	1 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #417      +/-   ##
=============================================
+ Coverage      65.75%   65.85%   +0.10%     
- Complexity       763      766       +3     
=============================================
  Files             53       53              
  Lines           3863     3878      +15     
=============================================
+ Hits            2540     2554      +14     
- Misses          1323     1324       +1

Flag	Coverage Δ
unit	`65.85% <96.00%> (+0.10%)`	⬆️

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.

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 · 2026-04-10T18:36:33Z

includes/Abstracts/Abstract_Feature.php

+	/**
+	 * The presentation style for the settings UI.
+	 *
+	 * @since x.x.x
+	 * @var string 'toggle' (default) or 'visual-card'.
+	 */
+	protected string $presentation;


I've not reviewed the rest of the PR yet but I don't think we need to introduce a new argument here to control this. The plan is that any non-experimental Feature should be showcased in this new UI and not in the toggle list below. We haven't "promoted" anything to be non-experimental yet (I have a PR that I'll open soon that does that for Image Generation) but the main thing that controls that is the existing $stability argument. Right now that is set to experimental for all existing Features but for "promoted" Features, that will be set to stable. I'd suggest we use that to determine the UI

Note I've opened #418 which brings Image Generation from an experimental Feature to a stable Feature. It does not touch any of the UI though as I'm leaving that for this PR. So these two PRs will go hand-in-hand

Sounds good @dkotter, I will review your PR, and then update this one to use the mechanism we land on yours to specify a feature is stable.

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).

jorgefilipecosta added 8 commits April 10, 2026 10:20

Add presentation and image metadata support to Abstract_Feature

6ab2163

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

b579089

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

89b56f5

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

e4473e1

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

9926bcf

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

158bf85

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.

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

Add get_presentation and get_image to Feature interface

49396f0

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

jorgefilipecosta added 3 commits April 10, 2026 18:21

Fix lint formatting in VisualCardToggle component

4417535

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

Replace @wordpress/icons import with inline SVG

c6b19b3

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 reviewed Apr 10, 2026

View reviewed changes

This was referenced Apr 10, 2026

Promote Image Generation from an Experiment to a Feature #418

Open

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

Open

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

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add visual-card presentation for featured experiments#417

Add visual-card presentation for featured experiments#417
jorgefilipecosta wants to merge 12 commits intodevelopfrom
add/visual-card-experiment-presentation

jorgefilipecosta commented Apr 10, 2026 •

edited by github-actions bot

Loading

Uh oh!

github-actions bot commented Apr 10, 2026 •

edited

Loading

Uh oh!

codecov bot commented Apr 10, 2026 •

edited

Loading

Uh oh!

dkotter Apr 10, 2026

Uh oh!

dkotter Apr 10, 2026

Uh oh!

jorgefilipecosta Apr 13, 2026

Uh oh!

jeffpaul commented Apr 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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!

dkotter Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

dkotter Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

jorgefilipecosta Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

jeffpaul commented Apr 10, 2026

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