From 2c663e20a29224d9bac342680c9e77a702d0fd3a Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 15:24:12 +0300
Subject: [PATCH 01/20] Update AI settings page to use wp-ui components

---
 routes/ai-home/ai-icon.tsx                    |  36 ++++--
 routes/ai-home/stage.tsx                      | 116 +++++++++++-------
 routes/ai-home/style.scss                     |  41 +------
 .../components/ReviewNotesPlugin.tsx          | 109 ++++++++--------
 4 files changed, 150 insertions(+), 152 deletions(-)

diff --git a/routes/ai-home/ai-icon.tsx b/routes/ai-home/ai-icon.tsx
index 337de51d2..04c2144ed 100644
--- a/routes/ai-home/ai-icon.tsx
+++ b/routes/ai-home/ai-icon.tsx
@@ -1,19 +1,33 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/primitives';
+import { Path, SVG } from '@wordpress/components';
 
-export default function AIIcon( {
-	className = 'wpai-icon',
-}: {
-	className?: string;
-} ) {
+export default function AIIcon() {
 	return (
-		<SVG viewBox="0 0 24 24" className={ className }>
-			<Path d="M18.323 16.848L15.075 8.419V5.317H16.35V4.105H7.249V5.317H8.524V8.419L5.276 16.848C5.227 16.979 5.2 17.119 5.2 17.259C5.2 17.889 5.71 18.4 6.338 18.4H17.262C17.402 18.4 17.541 18.373 17.672 18.323C18.259 18.097 18.55 17.436 18.323 16.848ZM9.732 8.645V5.353H13.867V8.645L15.482 12.839C15.114 12.745 14.734 12.696 14.347 12.696C13.259 12.696 12.228 13.08 11.409 13.766C10.804 14.272 10.041 14.549 9.253 14.548C8.671 14.548 8.113 14.4 7.621 14.126L9.732 8.645ZM6.441 17.188L7.182 15.267C7.816 15.589 8.522 15.762 9.254 15.762C10.342 15.762 11.373 15.379 12.192 14.693C12.795 14.19 13.549 13.91 14.348 13.91C14.971 13.91 15.564 14.079 16.083 14.393L17.159 17.188H6.441Z" />
-			<Path d="M11.602 5.977L11.694 6.224C11.813 6.548 11.873 6.71 11.99 6.828C12.108 6.946 12.269 7.006 12.592 7.126L12.838 7.217L12.592 7.308C12.269 7.428 12.108 7.488 11.99 7.606C11.873 7.724 11.813 7.886 11.694 8.21L11.602 8.457L11.511 8.21C11.392 7.886 11.332 7.724 11.214 7.606C11.097 7.488 10.935 7.428 10.612 7.308L10.366 7.217L10.612 7.126C10.935 7.006 11.097 6.946 11.214 6.828C11.332 6.71 11.392 6.548 11.511 6.224L11.602 5.977Z" />
-			<Path d="M11.788 1.802L11.853 1.977C11.937 2.207 11.98 2.321 12.063 2.405C12.147 2.489 12.261 2.531 12.49 2.616L12.664 2.681L12.49 2.745C12.261 2.83 12.147 2.873 12.063 2.956C11.98 3.04 11.937 3.155 11.853 3.384L11.788 3.559L11.724 3.384C11.639 3.155 11.597 3.04 11.513 2.956C11.43 2.873 11.315 2.83 11.087 2.745L10.912 2.681L11.087 2.616C11.315 2.531 11.43 2.489 11.513 2.405C11.597 2.321 11.639 2.207 11.724 1.977L11.788 1.802Z" />
-			<Path d="M13.062 0L13.108 0.125C13.169 0.289 13.199 0.371 13.259 0.43C13.318 0.49 13.4 0.521 13.563 0.581L13.688 0.627L13.563 0.674C13.4 0.734 13.318 0.765 13.259 0.824C13.199 0.884 13.169 0.966 13.108 1.13L13.062 1.255L13.016 1.13C12.956 0.966 12.925 0.884 12.866 0.824C12.806 0.765 12.725 0.734 12.561 0.674L12.437 0.627L12.561 0.581C12.725 0.521 12.806 0.49 12.866 0.43C12.925 0.371 12.956 0.289 13.016 0.125L13.062 0Z" />
+		<SVG
+			width="1em"
+			height="1em"
+			viewBox="50 30 160 200"
+			style={ { verticalAlign: '-0.025em' } }
+			fill="none"
+		>
+			<Path
+				d="M193.227 204.475L160.753 120.186V89.1724H173.497V77.0521H82.4936V89.1724H95.2377V120.186L62.7643 204.475C62.2666 205.794 62 207.185 62 208.593C62 214.885 67.1012 220 73.3755 220H182.615C184.02 220 185.406 219.733 186.721 219.234C192.587 216.97 195.502 210.357 193.227 204.475ZM107.324 122.45V89.5288H148.667V122.45L164.823 164.389C161.144 163.445 157.341 162.963 153.466 162.963C142.588 162.963 132.279 166.796 124.085 173.658C118.038 178.724 110.405 181.494 102.525 181.482C96.7129 181.482 91.1318 180.003 86.2084 177.258L107.324 122.45ZM74.4064 207.88L81.8182 188.666C88.1636 191.892 95.2199 193.621 102.543 193.621C113.421 193.621 123.73 189.788 131.924 182.926C137.949 177.9 145.485 175.102 153.484 175.102C159.705 175.102 165.641 176.795 170.831 179.932L181.585 207.88H74.4064Z"
+				fill="currentColor"
+			/>
+			<Path
+				d="M126.024 95.7743L126.935 98.243C128.129 101.48 128.726 103.099 129.904 104.279C131.081 105.46 132.695 106.059 135.923 107.257L138.385 108.17L135.923 109.084C132.695 110.282 131.081 110.881 129.904 112.061C128.726 113.242 128.129 114.86 126.935 118.098L126.024 120.566L125.113 118.098C123.918 114.86 123.321 113.242 122.144 112.061C120.966 110.881 119.352 110.282 116.124 109.084L113.662 108.17L116.124 107.257C119.352 106.059 120.966 105.46 122.144 104.279C123.321 103.099 123.918 101.48 125.113 98.243L126.024 95.7743Z"
+				fill="currentColor"
+			/>
+			<Path
+				d="M127.882 54.0236L128.527 55.7728C129.373 58.0666 129.797 59.2135 130.631 60.0501C131.465 60.8868 132.609 61.3111 134.896 62.1599L136.641 62.8072L134.896 63.4545C132.609 64.3032 131.465 64.7276 130.631 65.5643C129.797 66.4009 129.373 67.5478 128.527 69.8416L127.882 71.5908L127.236 69.8416C126.39 67.5478 125.967 66.4009 125.132 65.5643C124.298 64.7276 123.154 64.3032 120.867 63.4545L119.123 62.8072L120.867 62.1599C123.154 61.3111 124.298 60.8868 125.132 60.0501C125.967 59.2135 126.39 58.0666 127.236 55.7728L127.882 54.0236Z"
+				fill="currentColor"
+			/>
+			<Path
+				d="M140.622 36L141.083 37.2495C141.688 38.8879 141.99 39.7071 142.586 40.3047C143.182 40.9023 143.999 41.2054 145.633 41.8117L146.879 42.274L145.633 42.7364C143.999 43.3426 143.182 43.6458 142.586 44.2434C141.99 44.841 141.688 45.6602 141.083 47.2986L140.622 48.548L140.161 47.2986C139.557 45.6602 139.254 44.841 138.658 44.2434C138.062 43.6458 137.245 43.3426 135.612 42.7364L134.366 42.274L135.612 41.8117C137.245 41.2054 138.062 40.9023 138.658 40.3047C139.254 39.7071 139.557 38.8879 140.161 37.2495L140.622 36Z"
+				fill="currentColor"
+			/>
 		</SVG>
 	);
 }
diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index 2ed21bb2b..e58c6ea78 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -3,11 +3,18 @@
  */
 import { Page } from '@wordpress/admin-ui';
 import {
+	Text,
+	Card,
+	Stack,
+	Badge,
 	Button,
-	ExternalLink,
-	Spinner,
-	ToggleControl,
-} from '@wordpress/components';
+	Link,
+	Icon,
+	Notice,
+	Popover,
+	VisuallyHidden,
+} from '@wordpress/ui';
+import { Spinner, ToggleControl } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import type { DataFormControlProps, Field, Form } from '@wordpress/dataviews';
@@ -16,7 +23,6 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { info as infoIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { Icon, Notice, Popover, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -394,9 +400,9 @@ function SectionActions( {
 	}, [ experimentSettings, data, onBulkChange ] );
 
 	return (
-		<div className="ai-section-actions">
+		<Stack className="ai-section-actions" direction="row" gap="sm">
 			<Button
-				variant="secondary"
+				variant="outline"
 				size="compact"
 				onClick={ handleEnableAll }
 				disabled={ ! globalEnabled || allEnabled }
@@ -404,14 +410,14 @@ function SectionActions( {
 				{ __( 'Enable all', 'ai' ) }
 			</Button>
 			<Button
-				variant="secondary"
+				variant="outline"
 				size="compact"
 				onClick={ handleDisableAll }
 				disabled={ ! globalEnabled || allDisabled }
 			>
 				{ __( 'Disable all', 'ai' ) }
 			</Button>
-		</div>
+		</Stack>
 	);
 }
 
@@ -520,9 +526,8 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 			{ isDirty && (
 				<div className="ai-feature-settings-form__actions">
 					<Button
-						variant="primary"
+						variant="solid"
 						onClick={ handleSave }
-						isBusy={ isSaving }
 						disabled={ isSaving }
 						size="compact"
 						aria-label={ sprintf(
@@ -530,8 +535,11 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 							__( 'Save %s settings', 'ai' ),
 							feature.label
 						) }
+						loadingAnnouncement={
+							isSaving ? __( 'Saving…', 'ai' ) : ''
+						}
 					>
-						{ __( 'Save', 'ai' ) }
+						{ isSaving ? <Spinner /> : __( 'Save', 'ai' ) }
 					</Button>
 				</div>
 			) }
@@ -586,28 +594,50 @@ function VisualCardToggle( {
 	const checked = !! field.getValue( { item: data } );
 
 	return (
-		<div
+		<Card.Root
 			className={ `ai-showcase-card${
 				! globalEnabled ? ' ai-showcase-card--disabled' : ''
 			}` }
 		>
-			{ feature?.image && (
-				<div className="ai-showcase-card__image">
-					<img src={ feature.image } alt="" loading="lazy" />
-				</div>
-			) }
-			<div className="ai-showcase-card__content">
-				<ToggleControl
-					label={ field.label }
-					checked={ checked }
-					onChange={ ( value ) =>
-						onChange( { [ field.id ]: value } )
-					}
-					disabled={ ! globalEnabled }
-					help={ field.description }
-				/>
-			</div>
-		</div>
+			<Card.Content>
+				<Card.Header>
+					<Card.Title>{ field.label }</Card.Title>
+				</Card.Header>
+				{ feature?.image && (
+					<Card.FullBleed className="ai-showcase-card__image">
+						<img src={ feature.image } alt="" loading="lazy" />
+					</Card.FullBleed>
+				) }
+				<Text
+					variant="body-md"
+					className="ai-showcase-card__description"
+				>
+					{ field.description }
+				</Text>
+				<Stack
+					className="ai-showcase-card__actions"
+					align="center"
+					direction="row"
+					gap="sm"
+				>
+					<Button
+						variant={ checked ? 'outline' : 'solid' }
+						onClick={ () =>
+							onChange( { [ field.id ]: ! checked } )
+						}
+						disabled={ ! globalEnabled }
+						size="compact"
+					>
+						{ checked
+							? __( 'Disable', 'ai' )
+							: __( 'Enable', 'ai' ) }
+					</Button>
+					{ checked && (
+						<Badge intent="stable">{ __( 'Enabled', 'ai' ) }</Badge>
+					) }
+				</Stack>
+			</Card.Content>
+		</Card.Root>
 	);
 }
 
@@ -907,13 +937,13 @@ function AISettingsPage() {
 				'ai'
 			) }
 			actions={
-				<div className="ai-settings-page__actions">
-					<ExternalLink href="https://github.com/WordPress/ai/tree/develop/docs">
+				<>
+					<Link href="https://github.com/WordPress/ai/tree/develop/docs">
 						{ __( 'Docs', 'ai' ) }
-					</ExternalLink>
-					<ExternalLink href="https://github.com/WordPress/ai/blob/develop/CONTRIBUTING.md">
+					</Link>
+					<Link href="https://github.com/WordPress/ai/blob/develop/CONTRIBUTING.md">
 						{ __( 'Contribute', 'ai' ) }
-					</ExternalLink>
+					</Link>
 					<div className="ai-settings-page__global-toggle">
 						<ToggleControl
 							label={ __( 'Enable AI', 'ai' ) }
@@ -927,10 +957,10 @@ function AISettingsPage() {
 						/>
 						<InfoTip content={ globalToggleDescription } />
 					</div>
-				</div>
+				</>
 			}
 		>
-			<div className="ai-settings-page">
+			<Stack className="ai-settings-page" direction="column" gap="md">
 				{ ! PAGE_DATA.hasValidCredentials && (
 					<Notice.Root
 						className="ai-settings-page__notice"
@@ -948,13 +978,9 @@ function AISettingsPage() {
 								  ) }
 						</Notice.Description>
 						{ PAGE_DATA.connectorsUrl && (
-							<Notice.Actions>
-								<Notice.ActionLink
-									href={ PAGE_DATA.connectorsUrl }
-								>
-									{ __( 'Manage Connectors', 'ai' ) }
-								</Notice.ActionLink>
-							</Notice.Actions>
+							<Link href={ PAGE_DATA.connectorsUrl }>
+								{ __( 'Manage Connectors', 'ai' ) }
+							</Link>
 						) }
 					</Notice.Root>
 				) }
@@ -968,7 +994,7 @@ function AISettingsPage() {
 						onChange={ handleChange }
 					/>
 				) }
-			</div>
+			</Stack>
 		</Page>
 	);
 }
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index 15f36b4e1..df8a43ef9 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -23,13 +23,6 @@
 	margin-bottom: 24px;
 }
 
-.ai-settings-page__actions {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 16px;
-}
-
 .ai-settings-page__global-toggle {
 	display: flex;
 	align-items: center;
@@ -60,15 +53,6 @@
 	line-height: 1.5;
 }
 
-.ai-settings-page__link {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-
-	svg {
-		fill: currentColor;
-	}
-}
 
 .ai-feature-settings-form {
 	margin-top: 4px;
@@ -89,37 +73,22 @@
 }
 
 .ai-section-actions {
-	border-top: 1px solid var(--wp-components-color-gray-200);
-	display: flex;
-	gap: 8px;
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 	margin-top: 16px;
 	padding-top: 12px;
 }
 
-.ai-showcase-card {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid #ddd;
-	border-radius: 8px;
-	overflow: hidden;
-	background: #fff;
-}
-
 .ai-showcase-card__image {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-
+	margin-bottom: var(--wp-ui-card-padding);
 	img {
+		aspect-ratio: 16 / 9;
 		width: 100%;
 		height: 100%;
 	}
 }
 
-.ai-showcase-card__content {
-	padding: 24px;
+.ai-showcase-card__actions {
+	margin-top: 4px;
 }
 
 .ai-showcase-card--disabled {
diff --git a/src/experiments/review-notes/components/ReviewNotesPlugin.tsx b/src/experiments/review-notes/components/ReviewNotesPlugin.tsx
index 2d45dc335..71afd3e85 100644
--- a/src/experiments/review-notes/components/ReviewNotesPlugin.tsx
+++ b/src/experiments/review-notes/components/ReviewNotesPlugin.tsx
@@ -5,13 +5,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	Flex,
-	FlexItem,
-	MenuItem,
-	Spinner,
-} from '@wordpress/components';
+import { Button, Icon, Link, Stack } from '@wordpress/ui';
+import { MenuItem, Spinner } from '@wordpress/components';
 import { BlockSettingsMenuControls } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -62,62 +57,56 @@ export default function ReviewNotesPlugin() {
 	return (
 		<>
 			<PluginPostStatusInfo>
-				<Flex direction="column" gap={ 2 }>
-					<FlexItem>
-						<Button
-							variant="secondary"
-							icon={ commentContent }
-							onClick={ runReview }
-							isBusy={ isReviewing }
-							disabled={ isReviewing }
-							style={ {
-								justifyContent: 'center',
-								width: '100%',
-							} }
-							__next40pxDefaultSize
-						>
-							{ buttonLabel }
-						</Button>
-					</FlexItem>
+				<Stack direction="column" gap="sm">
+					<Button
+						variant="outline"
+						onClick={ runReview }
+						loading={ isReviewing }
+						disabled={ isReviewing }
+						style={ {
+							justifyContent: 'center',
+							width: '100%',
+						} }
+					>
+						<Icon icon={ commentContent } />
+						{ buttonLabel }
+					</Button>
 					{ lastRunCount !== null && (
-						<FlexItem>
-							<span className="description">
-								{ lastRunCount === 0
-									? __( 'No new suggestions found.', 'ai' )
-									: createInterpolateElement(
-											sprintf(
-												/* translators: %d: number of suggestions added. The <a> tags wrap a link to open the Notes panel. */
-												_n(
-													'%d suggestion added, view those Notes <a>here</a>.',
-													'%d suggestions added, view those Notes <a>here</a>.',
-													lastRunCount,
-													'ai'
-												),
-												lastRunCount
+						<span className="description">
+							{ lastRunCount === 0
+								? __( 'No new suggestions found.', 'ai' )
+								: createInterpolateElement(
+										sprintf(
+											/* translators: %d: number of suggestions added. The <a> tags wrap a link to open the Notes panel. */
+											_n(
+												'%d suggestion added, view those Notes <a>here</a>.',
+												'%d suggestions added, view those Notes <a>here</a>.',
+												lastRunCount,
+												'ai'
 											),
-											{
-												a: (
-													<Button
-														variant="link"
-														onClick={
-															openNotesPanel
-														}
-													/>
-												),
-											}
-									  ) }
-							</span>
-						</FlexItem>
-					) }
-					<FlexItem>
-						<span
-							className="description"
-							style={ { color: '#757575' } }
-						>
-							{ buttonDescription }
+											lastRunCount
+										),
+										{
+											a: (
+												<Link
+													href="#"
+													onClick={ ( e ) => {
+														e.preventDefault();
+														openNotesPanel();
+													} }
+												/>
+											),
+										}
+								  ) }
 						</span>
-					</FlexItem>
-				</Flex>
+					) }
+					<span
+						className="description"
+						style={ { color: '#757575' } }
+					>
+						{ buttonDescription }
+					</span>
+				</Stack>
 			</PluginPostStatusInfo>
 			<BlockSettingsMenuControls>
 				{ ( { selectedBlocks, selectedClientIds } ) => {

From bb75ab8bec2bbef99fc6026b941c960f373a92fc Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 16:19:59 +0300
Subject: [PATCH 02/20] Update Notice

---
 routes/ai-home/stage.tsx  | 10 +++++++---
 routes/ai-home/style.scss | 11 -----------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index e58c6ea78..3aeb01574 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -978,9 +978,13 @@ function AISettingsPage() {
 								  ) }
 						</Notice.Description>
 						{ PAGE_DATA.connectorsUrl && (
-							<Link href={ PAGE_DATA.connectorsUrl }>
-								{ __( 'Manage Connectors', 'ai' ) }
-							</Link>
+							<Notice.Actions>
+								<Notice.ActionLink
+									href={ PAGE_DATA.connectorsUrl }
+								>
+									{ __( 'Manage Connectors', 'ai' ) }
+								</Notice.ActionLink>
+							</Notice.Actions>
 						) }
 					</Notice.Root>
 				) }
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index df8a43ef9..ae9da3b88 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -8,15 +8,6 @@
 	@media (max-width: 480px) {
 		padding: 8px;
 	}
-
-	.dataforms-layouts-card__field-header-label {
-		font-size: 1rem;
-		font-weight: 600;
-	}
-
-	.dataforms-layouts-card__field-description {
-		margin-bottom: 36px;
-	}
 }
 
 .ai-settings-page__notice {
@@ -67,8 +58,6 @@
 }
 
 .ai-feature-settings-form__actions {
-	display: flex;
-	justify-content: flex-end;
 	margin-top: 12px;
 }
 

From 10b15ab605a8ddf5d3887511b33b5a6f06606588 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 16:37:24 +0300
Subject: [PATCH 03/20] More components, less CSS

---
 routes/ai-home/stage.tsx  | 71 +++++++++++++++++++++------------------
 routes/ai-home/style.scss | 11 +++---
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index 3aeb01574..bb754b5fc 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -524,7 +524,11 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 				onChange={ handleChange }
 			/>
 			{ isDirty && (
-				<div className="ai-feature-settings-form__actions">
+				<Stack
+					align="flex-end"
+					className="ai-feature-settings-form__actions"
+					direction="row"
+				>
 					<Button
 						variant="solid"
 						onClick={ handleSave }
@@ -541,7 +545,7 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 					>
 						{ isSaving ? <Spinner /> : __( 'Save', 'ai' ) }
 					</Button>
-				</div>
+				</Stack>
 			) }
 		</div>
 	);
@@ -600,41 +604,38 @@ function VisualCardToggle( {
 			}` }
 		>
 			<Card.Content>
-				<Card.Header>
-					<Card.Title>{ field.label }</Card.Title>
-				</Card.Header>
 				{ feature?.image && (
 					<Card.FullBleed className="ai-showcase-card__image">
 						<img src={ feature.image } alt="" loading="lazy" />
 					</Card.FullBleed>
 				) }
-				<Text
-					variant="body-md"
-					className="ai-showcase-card__description"
-				>
-					{ field.description }
-				</Text>
-				<Stack
-					className="ai-showcase-card__actions"
-					align="center"
-					direction="row"
-					gap="sm"
-				>
-					<Button
-						variant={ checked ? 'outline' : 'solid' }
-						onClick={ () =>
-							onChange( { [ field.id ]: ! checked } )
-						}
-						disabled={ ! globalEnabled }
-						size="compact"
+				<Stack direction="column" gap="md">
+					<Text variant="heading-lg">{ field.label }</Text>
+					<Text
+						variant="body-md"
+						className="ai-showcase-card__description"
 					>
-						{ checked
-							? __( 'Disable', 'ai' )
-							: __( 'Enable', 'ai' ) }
-					</Button>
-					{ checked && (
-						<Badge intent="stable">{ __( 'Enabled', 'ai' ) }</Badge>
-					) }
+						{ field.description }
+					</Text>
+					<Stack align="center" direction="row" gap="sm">
+						<Button
+							variant={ checked ? 'outline' : 'solid' }
+							onClick={ () =>
+								onChange( { [ field.id ]: ! checked } )
+							}
+							disabled={ ! globalEnabled }
+							size="compact"
+						>
+							{ checked
+								? __( 'Disable', 'ai' )
+								: __( 'Enable', 'ai' ) }
+						</Button>
+						{ checked && (
+							<Badge intent="stable">
+								{ __( 'Enabled', 'ai' ) }
+							</Badge>
+						) }
+					</Stack>
 				</Stack>
 			</Card.Content>
 		</Card.Root>
@@ -989,7 +990,13 @@ function AISettingsPage() {
 					</Notice.Root>
 				) }
 				{ isLoading ? (
-					<Spinner />
+					<Stack
+						align="center"
+						className="ai-settings-page__loading"
+						justify="center"
+					>
+						<Spinner />
+					</Stack>
 				) : (
 					<DataForm< AISettings >
 						data={ data }
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index ae9da3b88..bfb8b7234 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -49,12 +49,6 @@
 	margin-top: 4px;
 	padding-left: 40px;
 	max-width: 480px;
-
-	.components-base-control__label,
-	.components-input-control__label,
-	.dataforms-layouts-regular__field-label {
-		text-transform: none !important;
-	}
 }
 
 .ai-feature-settings-form__actions {
@@ -69,6 +63,7 @@
 
 .ai-showcase-card__image {
 	margin-bottom: var(--wp-ui-card-padding);
+	margin-top: calc(-1 * var(--wp-ui-card-padding)); // Negative to bump against top border.
 	img {
 		aspect-ratio: 16 / 9;
 		width: 100%;
@@ -83,3 +78,7 @@
 .ai-showcase-card--disabled {
 	opacity: 0.6;
 }
+
+.ai-settings-page__loading {
+	min-height: calc(50vh); // Leave space for the page header.
+}

From 621d8e9d964af5cf4ced180fd1c5c5291949bb6a Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 16:41:21 +0300
Subject: [PATCH 04/20] Revert review-notes changes

---
 .../components/ReviewNotesPlugin.tsx          | 109 ++++++++++--------
 1 file changed, 60 insertions(+), 49 deletions(-)

diff --git a/src/experiments/review-notes/components/ReviewNotesPlugin.tsx b/src/experiments/review-notes/components/ReviewNotesPlugin.tsx
index 71afd3e85..2d45dc335 100644
--- a/src/experiments/review-notes/components/ReviewNotesPlugin.tsx
+++ b/src/experiments/review-notes/components/ReviewNotesPlugin.tsx
@@ -5,8 +5,13 @@
 /**
  * WordPress dependencies
  */
-import { Button, Icon, Link, Stack } from '@wordpress/ui';
-import { MenuItem, Spinner } from '@wordpress/components';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	MenuItem,
+	Spinner,
+} from '@wordpress/components';
 import { BlockSettingsMenuControls } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -57,56 +62,62 @@ export default function ReviewNotesPlugin() {
 	return (
 		<>
 			<PluginPostStatusInfo>
-				<Stack direction="column" gap="sm">
-					<Button
-						variant="outline"
-						onClick={ runReview }
-						loading={ isReviewing }
-						disabled={ isReviewing }
-						style={ {
-							justifyContent: 'center',
-							width: '100%',
-						} }
-					>
-						<Icon icon={ commentContent } />
-						{ buttonLabel }
-					</Button>
+				<Flex direction="column" gap={ 2 }>
+					<FlexItem>
+						<Button
+							variant="secondary"
+							icon={ commentContent }
+							onClick={ runReview }
+							isBusy={ isReviewing }
+							disabled={ isReviewing }
+							style={ {
+								justifyContent: 'center',
+								width: '100%',
+							} }
+							__next40pxDefaultSize
+						>
+							{ buttonLabel }
+						</Button>
+					</FlexItem>
 					{ lastRunCount !== null && (
-						<span className="description">
-							{ lastRunCount === 0
-								? __( 'No new suggestions found.', 'ai' )
-								: createInterpolateElement(
-										sprintf(
-											/* translators: %d: number of suggestions added. The <a> tags wrap a link to open the Notes panel. */
-											_n(
-												'%d suggestion added, view those Notes <a>here</a>.',
-												'%d suggestions added, view those Notes <a>here</a>.',
-												lastRunCount,
-												'ai'
-											),
-											lastRunCount
-										),
-										{
-											a: (
-												<Link
-													href="#"
-													onClick={ ( e ) => {
-														e.preventDefault();
-														openNotesPanel();
-													} }
-												/>
+						<FlexItem>
+							<span className="description">
+								{ lastRunCount === 0
+									? __( 'No new suggestions found.', 'ai' )
+									: createInterpolateElement(
+											sprintf(
+												/* translators: %d: number of suggestions added. The <a> tags wrap a link to open the Notes panel. */
+												_n(
+													'%d suggestion added, view those Notes <a>here</a>.',
+													'%d suggestions added, view those Notes <a>here</a>.',
+													lastRunCount,
+													'ai'
+												),
+												lastRunCount
 											),
-										}
-								  ) }
-						</span>
+											{
+												a: (
+													<Button
+														variant="link"
+														onClick={
+															openNotesPanel
+														}
+													/>
+												),
+											}
+									  ) }
+							</span>
+						</FlexItem>
 					) }
-					<span
-						className="description"
-						style={ { color: '#757575' } }
-					>
-						{ buttonDescription }
-					</span>
-				</Stack>
+					<FlexItem>
+						<span
+							className="description"
+							style={ { color: '#757575' } }
+						>
+							{ buttonDescription }
+						</span>
+					</FlexItem>
+				</Flex>
 			</PluginPostStatusInfo>
 			<BlockSettingsMenuControls>
 				{ ( { selectedBlocks, selectedClientIds } ) => {

From b736f4174e2153451c446b003861e5bb76c9b33d Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 16:44:51 +0300
Subject: [PATCH 05/20] One more Stack, no CSS

---
 routes/ai-home/stage.tsx  | 10 +++-------
 routes/ai-home/style.scss |  4 ----
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index bb754b5fc..c94420558 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -516,7 +516,7 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 	] );
 
 	return (
-		<div className="ai-feature-settings-form">
+		<Stack direction="column" gap="md" className="ai-feature-settings-form">
 			<DataForm< Record< string, unknown > >
 				data={ data }
 				fields={ fields }
@@ -524,11 +524,7 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 				onChange={ handleChange }
 			/>
 			{ isDirty && (
-				<Stack
-					align="flex-end"
-					className="ai-feature-settings-form__actions"
-					direction="row"
-				>
+				<Stack align="flex-end" direction="row">
 					<Button
 						variant="solid"
 						onClick={ handleSave }
@@ -547,7 +543,7 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 					</Button>
 				</Stack>
 			) }
-		</div>
+		</Stack>
 	);
 }
 
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index bfb8b7234..1b2d47819 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -51,10 +51,6 @@
 	max-width: 480px;
 }
 
-.ai-feature-settings-form__actions {
-	margin-top: 12px;
-}
-
 .ai-section-actions {
 	border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 	margin-top: 16px;

From 0870e97ce3c275a7a0f9b1070224d53691950a39 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 17:01:40 +0300
Subject: [PATCH 06/20] Open header links in new tabs

---
 routes/ai-home/stage.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index c94420558..64cbb0170 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -935,10 +935,16 @@ function AISettingsPage() {
 			) }
 			actions={
 				<>
-					<Link href="https://github.com/WordPress/ai/tree/develop/docs">
+					<Link
+						href="https://github.com/WordPress/ai/tree/develop/docs"
+						openInNewTab
+					>
 						{ __( 'Docs', 'ai' ) }
 					</Link>
-					<Link href="https://github.com/WordPress/ai/blob/develop/CONTRIBUTING.md">
+					<Link
+						href="https://github.com/WordPress/ai/blob/develop/CONTRIBUTING.md"
+						openInNewTab
+					>
 						{ __( 'Contribute', 'ai' ) }
 					</Link>
 					<div className="ai-settings-page__global-toggle">

From 3e581ba5334eb2d6d0b20d908a93d43f36a688d9 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 17:33:40 +0300
Subject: [PATCH 07/20] Update tests

---
 tests/e2e/utils/helpers.ts | 36 ++++++++++--------------------------
 1 file changed, 10 insertions(+), 26 deletions(-)

diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts
index 8c1849487..73ae9ea59 100644
--- a/tests/e2e/utils/helpers.ts
+++ b/tests/e2e/utils/helpers.ts
@@ -200,11 +200,9 @@ export const enableExperiment = async (
 
 	// Visual-card features use a showcase card with an Enable/Disable button
 	// instead of a toggle input.
-	const showcaseCard = page.locator( '.ai-showcase-card', {
-		has: page.locator( '.ai-showcase-card__title', {
-			hasText: experimentLabel,
-		} ),
-	} );
+	const showcaseCard = page
+		.locator( '.ai-showcase-card' )
+		.filter( { hasText: experimentLabel } );
 
 	// Wait for either the showcase card or the toggle to appear.
 	const toggle = page.getByLabel( experimentLabel );
@@ -214,17 +212,11 @@ export const enableExperiment = async (
 
 	if ( await showcaseCard.isVisible() ) {
 		// Already enabled if the "Enabled" badge is visible.
-		if (
-			await showcaseCard
-				.locator( '.ai-showcase-card__enabled-badge' )
-				.isVisible()
-		) {
+		if ( await showcaseCard.getByText( 'Enabled' ).isVisible() ) {
 			return;
 		}
 
-		await showcaseCard
-			.locator( '.ai-showcase-card__actions button' )
-			.click();
+		await showcaseCard.getByRole( 'button', { name: 'Enable' } ).click();
 	} else {
 		// Nothing to do if this experiment is already enabled.
 		if ( await toggle.isChecked() ) {
@@ -258,11 +250,9 @@ export const disableExperiment = async (
 
 	// Visual-card features use a showcase card with an Enable/Disable button
 	// instead of a toggle input.
-	const showcaseCard = page.locator( '.ai-showcase-card', {
-		has: page.locator( '.ai-showcase-card__title', {
-			hasText: experimentLabel,
-		} ),
-	} );
+	const showcaseCard = page
+		.locator( '.ai-showcase-card' )
+		.filter( { hasText: experimentLabel } );
 
 	// Wait for either the showcase card or the toggle to appear.
 	const toggle = page.getByLabel( experimentLabel );
@@ -272,17 +262,11 @@ export const disableExperiment = async (
 
 	if ( await showcaseCard.isVisible() ) {
 		// Already disabled if there's no "Enabled" badge.
-		if (
-			! ( await showcaseCard
-				.locator( '.ai-showcase-card__enabled-badge' )
-				.isVisible() )
-		) {
+		if ( ! ( await showcaseCard.getByText( 'Enabled' ).isVisible() ) ) {
 			return;
 		}
 
-		await showcaseCard
-			.locator( '.ai-showcase-card__actions button' )
-			.click();
+		await showcaseCard.getByRole( 'button', { name: 'Disable' } ).click();
 	} else {
 		// Nothing to do if this experiment is already disabled.
 		if ( ! ( await toggle.isChecked() ) ) {

From 38e388d2d7c2616ab65c13836494ff694fc2f8cf Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Fri, 24 Apr 2026 17:53:21 +0300
Subject: [PATCH 08/20] Add aria-label to the Page to avoid [object [

---
 routes/ai-home/stage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index 64cbb0170..c89b43fd2 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -929,6 +929,7 @@ function AISettingsPage() {
 		<Page
 			visual={ <AIIcon /> }
 			title={ __( 'AI', 'ai' ) }
+			ariaLabel={ __( 'AI', 'ai' ) }
 			subTitle={ __(
 				'Configure AI features and experiments for your WordPress site.',
 				'ai'

From 0880c58dbcec327cbaa53e17c3a7e5443ff1d20c Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Mon, 4 May 2026 13:52:53 +0300
Subject: [PATCH 09/20] Revert "Add aria-label to the Page to avoid [object ["

This reverts commit 5e43f5109756f221194423a4a748c2432428fbcc.
---
 routes/ai-home/stage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index c89b43fd2..64cbb0170 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -929,7 +929,6 @@ function AISettingsPage() {
 		<Page
 			visual={ <AIIcon /> }
 			title={ __( 'AI', 'ai' ) }
-			ariaLabel={ __( 'AI', 'ai' ) }
 			subTitle={ __(
 				'Configure AI features and experiments for your WordPress site.',
 				'ai'

From a9bade43cf20e5f85e366e38ff4f710f712f75e3 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Mon, 4 May 2026 13:55:30 +0300
Subject: [PATCH 10/20] Simplify button

---
 routes/ai-home/stage.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index 64cbb0170..a36cc5330 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -536,10 +536,11 @@ function InlineFeatureSettings( { feature }: { feature: FeatureData } ) {
 							feature.label
 						) }
 						loadingAnnouncement={
-							isSaving ? __( 'Saving…', 'ai' ) : ''
+							isSaving ? __( 'Saving settings…', 'ai' ) : ''
 						}
+						loading={ isSaving }
 					>
-						{ isSaving ? <Spinner /> : __( 'Save', 'ai' ) }
+						{ __( 'Save', 'ai' ) }
 					</Button>
 				</Stack>
 			) }

From 23c4b6b356a2eda51365e3a7407090e2dec9ff1f Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Mon, 4 May 2026 14:05:32 +0300
Subject: [PATCH 11/20] Update `@wordpress/ui`

---
 package-lock.json | 489 ++++++++++++++++++++++++++++++++++++----------
 package.json      |   2 +-
 2 files changed, 385 insertions(+), 106 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9f51ed3d0..c4e0b3a87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
 				"@wordpress/notices": "^5.44.0",
 				"@wordpress/plugins": "^7.44.0",
 				"@wordpress/primitives": "^4.45.0",
-				"@wordpress/ui": "^0.11.0",
+				"@wordpress/ui": "^0.12.0",
 				"@wordpress/url": "^4.44.0",
 				"@wordpress/wordcount": "^4.44.0",
 				"react": "^18.3.1"
@@ -10194,97 +10194,6 @@
 				"react": "^18.0.0"
 			}
 		},
-		"node_modules/@wordpress/admin-ui/node_modules/@wordpress/ui": {
-			"version": "0.12.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/ui/-/ui-0.12.0.tgz",
-			"integrity": "sha512-n/xfyagM90CcikLtlvNcjsFZtpt1wTpboOZPyCp9wqF6akAyJ4SUg9hXb/UA7pC8JqGe1Dg/hXJnFn/td8pvRA==",
-			"license": "GPL-2.0-or-later",
-			"dependencies": {
-				"@base-ui/react": "^1.4.1",
-				"@wordpress/a11y": "^4.45.0",
-				"@wordpress/compose": "^7.45.0",
-				"@wordpress/element": "^6.45.0",
-				"@wordpress/i18n": "^6.18.0",
-				"@wordpress/icons": "^13.0.0",
-				"@wordpress/keycodes": "^4.45.0",
-				"@wordpress/primitives": "^4.45.0",
-				"@wordpress/private-apis": "^1.45.0",
-				"@wordpress/theme": "^0.12.0",
-				"clsx": "^2.1.1",
-				"tabbable": "^6.4.0"
-			},
-			"engines": {
-				"node": ">=20.10.0",
-				"npm": ">=10.2.3"
-			},
-			"peerDependencies": {
-				"react": "^18.0.0",
-				"react-dom": "^18.0.0"
-			}
-		},
-		"node_modules/@wordpress/admin-ui/node_modules/@wordpress/ui/node_modules/@base-ui/react": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.4.1.tgz",
-			"integrity": "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.29.2",
-				"@base-ui/utils": "0.2.8",
-				"@floating-ui/react-dom": "^2.1.8",
-				"@floating-ui/utils": "^0.2.11",
-				"use-sync-external-store": "^1.6.0"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/mui-org"
-			},
-			"peerDependencies": {
-				"@date-fns/tz": "^1.2.0",
-				"@types/react": "^17 || ^18 || ^19",
-				"date-fns": "^4.0.0",
-				"react": "^17 || ^18 || ^19",
-				"react-dom": "^17 || ^18 || ^19"
-			},
-			"peerDependenciesMeta": {
-				"@date-fns/tz": {
-					"optional": true
-				},
-				"@types/react": {
-					"optional": true
-				},
-				"date-fns": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@wordpress/admin-ui/node_modules/@wordpress/ui/node_modules/@floating-ui/react-dom": {
-			"version": "2.1.8",
-			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
-			"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
-			"license": "MIT",
-			"dependencies": {
-				"@floating-ui/dom": "^1.7.6"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0",
-				"react-dom": ">=16.8.0"
-			}
-		},
-		"node_modules/@wordpress/admin-ui/node_modules/@wordpress/ui/node_modules/date-fns": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
-			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/kossnocorp"
-			}
-		},
 		"node_modules/@wordpress/api-fetch": {
 			"version": "7.44.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-7.44.0.tgz",
@@ -11045,6 +10954,85 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/dataviews/node_modules/@base-ui/react": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.4.1.tgz",
+			"integrity": "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.29.2",
+				"@base-ui/utils": "0.2.8",
+				"@floating-ui/react-dom": "^2.1.8",
+				"@floating-ui/utils": "^0.2.11",
+				"use-sync-external-store": "^1.6.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/mui-org"
+			},
+			"peerDependencies": {
+				"@date-fns/tz": "^1.2.0",
+				"@types/react": "^17 || ^18 || ^19",
+				"date-fns": "^4.0.0",
+				"react": "^17 || ^18 || ^19",
+				"react-dom": "^17 || ^18 || ^19"
+			},
+			"peerDependenciesMeta": {
+				"@date-fns/tz": {
+					"optional": true
+				},
+				"@types/react": {
+					"optional": true
+				},
+				"date-fns": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@wordpress/dataviews/node_modules/@floating-ui/react-dom": {
+			"version": "2.1.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+			"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.6"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/@wordpress/dataviews/node_modules/@wordpress/ui": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/ui/-/ui-0.11.0.tgz",
+			"integrity": "sha512-V1R3CTQ8MltuajZ53PCHGe9mmRwyx1RpjHA2wWOv+79dV0qQ1Y/psL0YTMY4eteL4SNAlBcjJVP66zD5O6yF8Q==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@base-ui/react": "^1.4.0",
+				"@wordpress/a11y": "^4.44.0",
+				"@wordpress/compose": "^7.44.0",
+				"@wordpress/element": "^6.44.0",
+				"@wordpress/i18n": "^6.17.0",
+				"@wordpress/icons": "^12.2.0",
+				"@wordpress/keycodes": "^4.44.0",
+				"@wordpress/primitives": "^4.44.0",
+				"@wordpress/private-apis": "^1.44.0",
+				"@wordpress/theme": "^0.11.0",
+				"clsx": "^2.1.1",
+				"tabbable": "^6.4.0"
+			},
+			"engines": {
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
 		"node_modules/@wordpress/dataviews/node_modules/date-fns": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
@@ -11201,6 +11189,57 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/edit-post/node_modules/@base-ui/react": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.4.1.tgz",
+			"integrity": "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.29.2",
+				"@base-ui/utils": "0.2.8",
+				"@floating-ui/react-dom": "^2.1.8",
+				"@floating-ui/utils": "^0.2.11",
+				"use-sync-external-store": "^1.6.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/mui-org"
+			},
+			"peerDependencies": {
+				"@date-fns/tz": "^1.2.0",
+				"@types/react": "^17 || ^18 || ^19",
+				"date-fns": "^4.0.0",
+				"react": "^17 || ^18 || ^19",
+				"react-dom": "^17 || ^18 || ^19"
+			},
+			"peerDependenciesMeta": {
+				"@date-fns/tz": {
+					"optional": true
+				},
+				"@types/react": {
+					"optional": true
+				},
+				"date-fns": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@wordpress/edit-post/node_modules/@floating-ui/react-dom": {
+			"version": "2.1.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+			"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.6"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"node_modules/@wordpress/edit-post/node_modules/@wordpress/admin-ui": {
 			"version": "1.12.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/admin-ui/-/admin-ui-1.12.0.tgz",
@@ -11224,6 +11263,46 @@
 				"react": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/edit-post/node_modules/@wordpress/ui": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/ui/-/ui-0.11.0.tgz",
+			"integrity": "sha512-V1R3CTQ8MltuajZ53PCHGe9mmRwyx1RpjHA2wWOv+79dV0qQ1Y/psL0YTMY4eteL4SNAlBcjJVP66zD5O6yF8Q==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@base-ui/react": "^1.4.0",
+				"@wordpress/a11y": "^4.44.0",
+				"@wordpress/compose": "^7.44.0",
+				"@wordpress/element": "^6.44.0",
+				"@wordpress/i18n": "^6.17.0",
+				"@wordpress/icons": "^12.2.0",
+				"@wordpress/keycodes": "^4.44.0",
+				"@wordpress/primitives": "^4.44.0",
+				"@wordpress/private-apis": "^1.44.0",
+				"@wordpress/theme": "^0.11.0",
+				"clsx": "^2.1.1",
+				"tabbable": "^6.4.0"
+			},
+			"engines": {
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@wordpress/edit-post/node_modules/date-fns": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
 		"node_modules/@wordpress/editor": {
 			"version": "14.44.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/editor/-/editor-14.44.0.tgz",
@@ -11666,6 +11745,57 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/interface/node_modules/@base-ui/react": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.4.1.tgz",
+			"integrity": "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.29.2",
+				"@base-ui/utils": "0.2.8",
+				"@floating-ui/react-dom": "^2.1.8",
+				"@floating-ui/utils": "^0.2.11",
+				"use-sync-external-store": "^1.6.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/mui-org"
+			},
+			"peerDependencies": {
+				"@date-fns/tz": "^1.2.0",
+				"@types/react": "^17 || ^18 || ^19",
+				"date-fns": "^4.0.0",
+				"react": "^17 || ^18 || ^19",
+				"react-dom": "^17 || ^18 || ^19"
+			},
+			"peerDependenciesMeta": {
+				"@date-fns/tz": {
+					"optional": true
+				},
+				"@types/react": {
+					"optional": true
+				},
+				"date-fns": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@wordpress/interface/node_modules/@floating-ui/react-dom": {
+			"version": "2.1.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+			"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.6"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"node_modules/@wordpress/interface/node_modules/@wordpress/admin-ui": {
 			"version": "1.12.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/admin-ui/-/admin-ui-1.12.0.tgz",
@@ -11689,6 +11819,46 @@
 				"react": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/interface/node_modules/@wordpress/ui": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/ui/-/ui-0.11.0.tgz",
+			"integrity": "sha512-V1R3CTQ8MltuajZ53PCHGe9mmRwyx1RpjHA2wWOv+79dV0qQ1Y/psL0YTMY4eteL4SNAlBcjJVP66zD5O6yF8Q==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@base-ui/react": "^1.4.0",
+				"@wordpress/a11y": "^4.44.0",
+				"@wordpress/compose": "^7.44.0",
+				"@wordpress/element": "^6.44.0",
+				"@wordpress/i18n": "^6.17.0",
+				"@wordpress/icons": "^12.2.0",
+				"@wordpress/keycodes": "^4.44.0",
+				"@wordpress/primitives": "^4.44.0",
+				"@wordpress/private-apis": "^1.44.0",
+				"@wordpress/theme": "^0.11.0",
+				"clsx": "^2.1.1",
+				"tabbable": "^6.4.0"
+			},
+			"engines": {
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@wordpress/interface/node_modules/date-fns": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
 		"node_modules/@wordpress/is-shallow-equal": {
 			"version": "5.45.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-5.45.0.tgz",
@@ -11859,6 +12029,97 @@
 				"react": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/media-utils/node_modules/@base-ui/react": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.4.1.tgz",
+			"integrity": "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.29.2",
+				"@base-ui/utils": "0.2.8",
+				"@floating-ui/react-dom": "^2.1.8",
+				"@floating-ui/utils": "^0.2.11",
+				"use-sync-external-store": "^1.6.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/mui-org"
+			},
+			"peerDependencies": {
+				"@date-fns/tz": "^1.2.0",
+				"@types/react": "^17 || ^18 || ^19",
+				"date-fns": "^4.0.0",
+				"react": "^17 || ^18 || ^19",
+				"react-dom": "^17 || ^18 || ^19"
+			},
+			"peerDependenciesMeta": {
+				"@date-fns/tz": {
+					"optional": true
+				},
+				"@types/react": {
+					"optional": true
+				},
+				"date-fns": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@wordpress/media-utils/node_modules/@floating-ui/react-dom": {
+			"version": "2.1.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+			"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.6"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/@wordpress/media-utils/node_modules/@wordpress/ui": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/ui/-/ui-0.11.0.tgz",
+			"integrity": "sha512-V1R3CTQ8MltuajZ53PCHGe9mmRwyx1RpjHA2wWOv+79dV0qQ1Y/psL0YTMY4eteL4SNAlBcjJVP66zD5O6yF8Q==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@base-ui/react": "^1.4.0",
+				"@wordpress/a11y": "^4.44.0",
+				"@wordpress/compose": "^7.44.0",
+				"@wordpress/element": "^6.44.0",
+				"@wordpress/i18n": "^6.17.0",
+				"@wordpress/icons": "^12.2.0",
+				"@wordpress/keycodes": "^4.44.0",
+				"@wordpress/primitives": "^4.44.0",
+				"@wordpress/private-apis": "^1.44.0",
+				"@wordpress/theme": "^0.11.0",
+				"clsx": "^2.1.1",
+				"tabbable": "^6.4.0"
+			},
+			"engines": {
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@wordpress/media-utils/node_modules/date-fns": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
 		"node_modules/@wordpress/notices": {
 			"version": "5.44.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/notices/-/notices-5.44.0.tgz",
@@ -12723,21 +12984,21 @@
 			}
 		},
 		"node_modules/@wordpress/ui": {
-			"version": "0.11.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/ui/-/ui-0.11.0.tgz",
-			"integrity": "sha512-V1R3CTQ8MltuajZ53PCHGe9mmRwyx1RpjHA2wWOv+79dV0qQ1Y/psL0YTMY4eteL4SNAlBcjJVP66zD5O6yF8Q==",
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/ui/-/ui-0.12.0.tgz",
+			"integrity": "sha512-n/xfyagM90CcikLtlvNcjsFZtpt1wTpboOZPyCp9wqF6akAyJ4SUg9hXb/UA7pC8JqGe1Dg/hXJnFn/td8pvRA==",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@base-ui/react": "^1.4.0",
-				"@wordpress/a11y": "^4.44.0",
-				"@wordpress/compose": "^7.44.0",
-				"@wordpress/element": "^6.44.0",
-				"@wordpress/i18n": "^6.17.0",
-				"@wordpress/icons": "^12.2.0",
-				"@wordpress/keycodes": "^4.44.0",
-				"@wordpress/primitives": "^4.44.0",
-				"@wordpress/private-apis": "^1.44.0",
-				"@wordpress/theme": "^0.11.0",
+				"@base-ui/react": "^1.4.1",
+				"@wordpress/a11y": "^4.45.0",
+				"@wordpress/compose": "^7.45.0",
+				"@wordpress/element": "^6.45.0",
+				"@wordpress/i18n": "^6.18.0",
+				"@wordpress/icons": "^13.0.0",
+				"@wordpress/keycodes": "^4.45.0",
+				"@wordpress/primitives": "^4.45.0",
+				"@wordpress/private-apis": "^1.45.0",
+				"@wordpress/theme": "^0.12.0",
 				"clsx": "^2.1.1",
 				"tabbable": "^6.4.0"
 			},
@@ -12801,6 +13062,24 @@
 				"react-dom": ">=16.8.0"
 			}
 		},
+		"node_modules/@wordpress/ui/node_modules/@wordpress/icons": {
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-13.0.0.tgz",
+			"integrity": "sha512-+CLbvNdzMUHxQK5I6gFdHb3X6EVAH6SOSIj0xtMWm6PZO+Nnf7tXHfNBuxqTnGfxT5grtfb6D3A9ZMBU+Tpv+Q==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@wordpress/element": "^6.45.0",
+				"@wordpress/primitives": "^4.45.0",
+				"change-case": "4.1.2"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
+		},
 		"node_modules/@wordpress/ui/node_modules/date-fns": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
diff --git a/package.json b/package.json
index 5c8e683b0..744faffd9 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
 		"@wordpress/notices": "^5.44.0",
 		"@wordpress/plugins": "^7.44.0",
 		"@wordpress/primitives": "^4.45.0",
-		"@wordpress/ui": "^0.11.0",
+		"@wordpress/ui": "^0.12.0",
 		"@wordpress/url": "^4.44.0",
 		"@wordpress/wordcount": "^4.44.0",
 		"react": "^18.3.1"

From 2c43485e442d5c4e1b1c17c3fece09f7843aea02 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Mon, 4 May 2026 14:06:45 +0300
Subject: [PATCH 12/20] restore rebased AI icon

---
 routes/ai-home/ai-icon.tsx | 36 +++++++++++-------------------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/routes/ai-home/ai-icon.tsx b/routes/ai-home/ai-icon.tsx
index 04c2144ed..337de51d2 100644
--- a/routes/ai-home/ai-icon.tsx
+++ b/routes/ai-home/ai-icon.tsx
@@ -1,33 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/primitives';
 
-export default function AIIcon() {
+export default function AIIcon( {
+	className = 'wpai-icon',
+}: {
+	className?: string;
+} ) {
 	return (
-		<SVG
-			width="1em"
-			height="1em"
-			viewBox="50 30 160 200"
-			style={ { verticalAlign: '-0.025em' } }
-			fill="none"
-		>
-			<Path
-				d="M193.227 204.475L160.753 120.186V89.1724H173.497V77.0521H82.4936V89.1724H95.2377V120.186L62.7643 204.475C62.2666 205.794 62 207.185 62 208.593C62 214.885 67.1012 220 73.3755 220H182.615C184.02 220 185.406 219.733 186.721 219.234C192.587 216.97 195.502 210.357 193.227 204.475ZM107.324 122.45V89.5288H148.667V122.45L164.823 164.389C161.144 163.445 157.341 162.963 153.466 162.963C142.588 162.963 132.279 166.796 124.085 173.658C118.038 178.724 110.405 181.494 102.525 181.482C96.7129 181.482 91.1318 180.003 86.2084 177.258L107.324 122.45ZM74.4064 207.88L81.8182 188.666C88.1636 191.892 95.2199 193.621 102.543 193.621C113.421 193.621 123.73 189.788 131.924 182.926C137.949 177.9 145.485 175.102 153.484 175.102C159.705 175.102 165.641 176.795 170.831 179.932L181.585 207.88H74.4064Z"
-				fill="currentColor"
-			/>
-			<Path
-				d="M126.024 95.7743L126.935 98.243C128.129 101.48 128.726 103.099 129.904 104.279C131.081 105.46 132.695 106.059 135.923 107.257L138.385 108.17L135.923 109.084C132.695 110.282 131.081 110.881 129.904 112.061C128.726 113.242 128.129 114.86 126.935 118.098L126.024 120.566L125.113 118.098C123.918 114.86 123.321 113.242 122.144 112.061C120.966 110.881 119.352 110.282 116.124 109.084L113.662 108.17L116.124 107.257C119.352 106.059 120.966 105.46 122.144 104.279C123.321 103.099 123.918 101.48 125.113 98.243L126.024 95.7743Z"
-				fill="currentColor"
-			/>
-			<Path
-				d="M127.882 54.0236L128.527 55.7728C129.373 58.0666 129.797 59.2135 130.631 60.0501C131.465 60.8868 132.609 61.3111 134.896 62.1599L136.641 62.8072L134.896 63.4545C132.609 64.3032 131.465 64.7276 130.631 65.5643C129.797 66.4009 129.373 67.5478 128.527 69.8416L127.882 71.5908L127.236 69.8416C126.39 67.5478 125.967 66.4009 125.132 65.5643C124.298 64.7276 123.154 64.3032 120.867 63.4545L119.123 62.8072L120.867 62.1599C123.154 61.3111 124.298 60.8868 125.132 60.0501C125.967 59.2135 126.39 58.0666 127.236 55.7728L127.882 54.0236Z"
-				fill="currentColor"
-			/>
-			<Path
-				d="M140.622 36L141.083 37.2495C141.688 38.8879 141.99 39.7071 142.586 40.3047C143.182 40.9023 143.999 41.2054 145.633 41.8117L146.879 42.274L145.633 42.7364C143.999 43.3426 143.182 43.6458 142.586 44.2434C141.99 44.841 141.688 45.6602 141.083 47.2986L140.622 48.548L140.161 47.2986C139.557 45.6602 139.254 44.841 138.658 44.2434C138.062 43.6458 137.245 43.3426 135.612 42.7364L134.366 42.274L135.612 41.8117C137.245 41.2054 138.062 40.9023 138.658 40.3047C139.254 39.7071 139.557 38.8879 140.161 37.2495L140.622 36Z"
-				fill="currentColor"
-			/>
+		<SVG viewBox="0 0 24 24" className={ className }>
+			<Path d="M18.323 16.848L15.075 8.419V5.317H16.35V4.105H7.249V5.317H8.524V8.419L5.276 16.848C5.227 16.979 5.2 17.119 5.2 17.259C5.2 17.889 5.71 18.4 6.338 18.4H17.262C17.402 18.4 17.541 18.373 17.672 18.323C18.259 18.097 18.55 17.436 18.323 16.848ZM9.732 8.645V5.353H13.867V8.645L15.482 12.839C15.114 12.745 14.734 12.696 14.347 12.696C13.259 12.696 12.228 13.08 11.409 13.766C10.804 14.272 10.041 14.549 9.253 14.548C8.671 14.548 8.113 14.4 7.621 14.126L9.732 8.645ZM6.441 17.188L7.182 15.267C7.816 15.589 8.522 15.762 9.254 15.762C10.342 15.762 11.373 15.379 12.192 14.693C12.795 14.19 13.549 13.91 14.348 13.91C14.971 13.91 15.564 14.079 16.083 14.393L17.159 17.188H6.441Z" />
+			<Path d="M11.602 5.977L11.694 6.224C11.813 6.548 11.873 6.71 11.99 6.828C12.108 6.946 12.269 7.006 12.592 7.126L12.838 7.217L12.592 7.308C12.269 7.428 12.108 7.488 11.99 7.606C11.873 7.724 11.813 7.886 11.694 8.21L11.602 8.457L11.511 8.21C11.392 7.886 11.332 7.724 11.214 7.606C11.097 7.488 10.935 7.428 10.612 7.308L10.366 7.217L10.612 7.126C10.935 7.006 11.097 6.946 11.214 6.828C11.332 6.71 11.392 6.548 11.511 6.224L11.602 5.977Z" />
+			<Path d="M11.788 1.802L11.853 1.977C11.937 2.207 11.98 2.321 12.063 2.405C12.147 2.489 12.261 2.531 12.49 2.616L12.664 2.681L12.49 2.745C12.261 2.83 12.147 2.873 12.063 2.956C11.98 3.04 11.937 3.155 11.853 3.384L11.788 3.559L11.724 3.384C11.639 3.155 11.597 3.04 11.513 2.956C11.43 2.873 11.315 2.83 11.087 2.745L10.912 2.681L11.087 2.616C11.315 2.531 11.43 2.489 11.513 2.405C11.597 2.321 11.639 2.207 11.724 1.977L11.788 1.802Z" />
+			<Path d="M13.062 0L13.108 0.125C13.169 0.289 13.199 0.371 13.259 0.43C13.318 0.49 13.4 0.521 13.563 0.581L13.688 0.627L13.563 0.674C13.4 0.734 13.318 0.765 13.259 0.824C13.199 0.884 13.169 0.966 13.108 1.13L13.062 1.255L13.016 1.13C12.956 0.966 12.925 0.884 12.866 0.824C12.806 0.765 12.725 0.734 12.561 0.674L12.437 0.627L12.561 0.581C12.725 0.521 12.806 0.49 12.866 0.43C12.925 0.371 12.956 0.289 13.016 0.125L13.062 0Z" />
 		</SVG>
 	);
 }

From 833819e29a7c2822d58bb5cf46b48dc5f8c2e6b0 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Mon, 4 May 2026 14:09:14 +0300
Subject: [PATCH 13/20] Leave note about margins

---
 routes/ai-home/style.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index 1b2d47819..a5a16d7ab 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -58,8 +58,11 @@
 }
 
 .ai-showcase-card__image {
+	// Negative top margin to bump against top border.
+	// Remove margins when Card supports this natively:
+	// https://github.com/WordPress/gutenberg/pull/77856
 	margin-bottom: var(--wp-ui-card-padding);
-	margin-top: calc(-1 * var(--wp-ui-card-padding)); // Negative to bump against top border.
+	margin-top: calc(-1 * var(--wp-ui-card-padding));
 	img {
 		aspect-ratio: 16 / 9;
 		width: 100%;

From c14c75197760c707f32ca3430020c8a05b4b3343 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Mon, 4 May 2026 14:10:44 +0300
Subject: [PATCH 14/20] Use Stack instead of CSS for header toggle

---
 routes/ai-home/stage.tsx  | 4 ++--
 routes/ai-home/style.scss | 5 -----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index a36cc5330..617d63ad4 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -948,7 +948,7 @@ function AISettingsPage() {
 					>
 						{ __( 'Contribute', 'ai' ) }
 					</Link>
-					<div className="ai-settings-page__global-toggle">
+					<Stack align="center" gap="xs">
 						<ToggleControl
 							label={ __( 'Enable AI', 'ai' ) }
 							checked={ globalEnabled }
@@ -960,7 +960,7 @@ function AISettingsPage() {
 							disabled={ isLoading }
 						/>
 						<InfoTip content={ globalToggleDescription } />
-					</div>
+					</Stack>
 				</>
 			}
 		>
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index a5a16d7ab..f75648f59 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -14,11 +14,6 @@
 	margin-bottom: 24px;
 }
 
-.ai-settings-page__global-toggle {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
 
 .ai-settings-page__infotip-trigger {
 	background: none;

From 2e20e9a2e4505aed0e30c0edeb756d9ced8a5a8f Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Mon, 4 May 2026 14:16:11 +0300
Subject: [PATCH 15/20] Spacing to vars

---
 routes/ai-home/style.scss | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index f75648f59..6e433da1c 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -10,11 +10,6 @@
 	}
 }
 
-.ai-settings-page__notice {
-	margin-bottom: 24px;
-}
-
-
 .ai-settings-page__infotip-trigger {
 	background: none;
 	border: none;
@@ -41,15 +36,15 @@
 
 
 .ai-feature-settings-form {
-	margin-top: 4px;
+	margin-top: var(--wpds-dimension-padding-xs);
 	padding-left: 40px;
 	max-width: 480px;
 }
 
 .ai-section-actions {
 	border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
-	margin-top: 16px;
-	padding-top: 12px;
+	margin-top: var(--wpds-dimension-padding-md);
+	padding-top: var(--wpds-dimension-padding-sm);
 }
 
 .ai-showcase-card__image {

From 4bdb7f60fc3e7f9ad6bfbcda11ea2d82e424da54 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Tue, 5 May 2026 17:25:01 +0300
Subject: [PATCH 16/20] Simplify Card + image

---
 routes/ai-home/stage.tsx  | 13 ++++++++-----
 routes/ai-home/style.scss | 14 ++++----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index 617d63ad4..55c4180a4 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -600,12 +600,15 @@ function VisualCardToggle( {
 				! globalEnabled ? ' ai-showcase-card--disabled' : ''
 			}` }
 		>
+			{ feature?.image && (
+				<img
+					alt=""
+					className="ai-showcase-card__image"
+					loading="lazy"
+					src={ feature.image }
+				/>
+			) }
 			<Card.Content>
-				{ feature?.image && (
-					<Card.FullBleed className="ai-showcase-card__image">
-						<img src={ feature.image } alt="" loading="lazy" />
-					</Card.FullBleed>
-				) }
 				<Stack direction="column" gap="md">
 					<Text variant="heading-lg">{ field.label }</Text>
 					<Text
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index 6e433da1c..1396866fc 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -48,16 +48,10 @@
 }
 
 .ai-showcase-card__image {
-	// Negative top margin to bump against top border.
-	// Remove margins when Card supports this natively:
-	// https://github.com/WordPress/gutenberg/pull/77856
-	margin-bottom: var(--wp-ui-card-padding);
-	margin-top: calc(-1 * var(--wp-ui-card-padding));
-	img {
-		aspect-ratio: 16 / 9;
-		width: 100%;
-		height: 100%;
-	}
+	aspect-ratio: 16 / 9;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
 
 .ai-showcase-card__actions {

From ae8a7985c24955658bff5bb4f09803bc3f4def03 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Thu, 7 May 2026 10:46:35 +0300
Subject: [PATCH 17/20] Finish rebase

---
 routes/ai-home/stage.tsx  | 44 ++++++++++-----------------------------
 routes/ai-home/style.scss |  4 ----
 2 files changed, 11 insertions(+), 37 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index 55c4180a4..e71df230f 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -596,7 +596,7 @@ function VisualCardToggle( {
 
 	return (
 		<Card.Root
-			className={ `ai-showcase-card${
+			className={ `${
 				! globalEnabled ? ' ai-showcase-card--disabled' : ''
 			}` }
 		>
@@ -609,34 +609,15 @@ function VisualCardToggle( {
 				/>
 			) }
 			<Card.Content>
-				<Stack direction="column" gap="md">
-					<Text variant="heading-lg">{ field.label }</Text>
-					<Text
-						variant="body-md"
-						className="ai-showcase-card__description"
-					>
-						{ field.description }
-					</Text>
-					<Stack align="center" direction="row" gap="sm">
-						<Button
-							variant={ checked ? 'outline' : 'solid' }
-							onClick={ () =>
-								onChange( { [ field.id ]: ! checked } )
-							}
-							disabled={ ! globalEnabled }
-							size="compact"
-						>
-							{ checked
-								? __( 'Disable', 'ai' )
-								: __( 'Enable', 'ai' ) }
-						</Button>
-						{ checked && (
-							<Badge intent="stable">
-								{ __( 'Enabled', 'ai' ) }
-							</Badge>
-						) }
-					</Stack>
-				</Stack>
+				<ToggleControl
+					label={ field.label }
+					checked={ checked }
+					onChange={ ( value ) =>
+						onChange( { [ field.id ]: value } )
+					}
+					disabled={ ! globalEnabled }
+					help={ field.description }
+				/>
 			</Card.Content>
 		</Card.Root>
 	);
@@ -969,10 +950,7 @@ function AISettingsPage() {
 		>
 			<Stack className="ai-settings-page" direction="column" gap="md">
 				{ ! PAGE_DATA.hasValidCredentials && (
-					<Notice.Root
-						className="ai-settings-page__notice"
-						intent="error"
-					>
+					<Notice.Root intent="error">
 						<Notice.Description>
 							{ ! PAGE_DATA.hasCredentials
 								? __(
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index 1396866fc..c2cd11bcf 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -54,10 +54,6 @@
 	object-fit: cover;
 }
 
-.ai-showcase-card__actions {
-	margin-top: 4px;
-}
-
 .ai-showcase-card--disabled {
 	opacity: 0.6;
 }

From 40409853cc54604513bdffa11c2f0e54dafac78e Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Thu, 7 May 2026 11:59:05 +0300
Subject: [PATCH 18/20] Remove reduntant image styles

---
 routes/ai-home/stage.tsx  | 7 +------
 routes/ai-home/style.scss | 7 -------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index e71df230f..ba444ecdd 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -601,12 +601,7 @@ function VisualCardToggle( {
 			}` }
 		>
 			{ feature?.image && (
-				<img
-					alt=""
-					className="ai-showcase-card__image"
-					loading="lazy"
-					src={ feature.image }
-				/>
+				<img alt="" loading="lazy" src={ feature.image } />
 			) }
 			<Card.Content>
 				<ToggleControl
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index c2cd11bcf..211d5d92a 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -47,13 +47,6 @@
 	padding-top: var(--wpds-dimension-padding-sm);
 }
 
-.ai-showcase-card__image {
-	aspect-ratio: 16 / 9;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-
 .ai-showcase-card--disabled {
 	opacity: 0.6;
 }

From 5cb4e1706f400895ea377a17e7aa8f348a62322e Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Thu, 7 May 2026 12:02:22 +0300
Subject: [PATCH 19/20] Clean up imports

---
 routes/ai-home/stage.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index ba444ecdd..2e12a56f3 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -3,15 +3,13 @@
  */
 import { Page } from '@wordpress/admin-ui';
 import {
-	Text,
-	Card,
-	Stack,
-	Badge,
 	Button,
-	Link,
+	Card,
 	Icon,
+	Link,
 	Notice,
 	Popover,
+	Stack,
 	VisuallyHidden,
 } from '@wordpress/ui';
 import { Spinner, ToggleControl } from '@wordpress/components';

From 846fe986cb43fd096e51a752e9f1a63c828bb356 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Thu, 7 May 2026 12:05:50 +0300
Subject: [PATCH 20/20] Simplify test helpers

---
 tests/e2e/utils/helpers.ts | 62 +++++++++-----------------------------
 1 file changed, 14 insertions(+), 48 deletions(-)

diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts
index 73ae9ea59..164a90806 100644
--- a/tests/e2e/utils/helpers.ts
+++ b/tests/e2e/utils/helpers.ts
@@ -198,34 +198,17 @@ export const enableExperiment = async (
 ) => {
 	await visitSettingsPage( admin );
 
-	// Visual-card features use a showcase card with an Enable/Disable button
-	// instead of a toggle input.
-	const showcaseCard = page
-		.locator( '.ai-showcase-card' )
-		.filter( { hasText: experimentLabel } );
-
-	// Wait for either the showcase card or the toggle to appear.
 	const toggle = page.getByLabel( experimentLabel );
-	await expect( showcaseCard.or( toggle ) ).toBeVisible( {
-		timeout: 10000,
-	} );
-
-	if ( await showcaseCard.isVisible() ) {
-		// Already enabled if the "Enabled" badge is visible.
-		if ( await showcaseCard.getByText( 'Enabled' ).isVisible() ) {
-			return;
-		}
+	await expect( toggle ).toBeVisible( { timeout: 10000 } );
+	await expect( toggle ).toBeEnabled( { timeout: 10000 } );
 
-		await showcaseCard.getByRole( 'button', { name: 'Enable' } ).click();
-	} else {
-		// Nothing to do if this experiment is already enabled.
-		if ( await toggle.isChecked() ) {
-			return;
-		}
-
-		await toggle.check();
+	// Nothing to do if this experiment is already enabled.
+	if ( await toggle.isChecked() ) {
+		return;
 	}
 
+	await toggle.check();
+
 	// Ensure the save was successful.
 	await expect(
 		page.locator( '.components-snackbar__content', {
@@ -248,34 +231,17 @@ export const disableExperiment = async (
 ) => {
 	await visitSettingsPage( admin );
 
-	// Visual-card features use a showcase card with an Enable/Disable button
-	// instead of a toggle input.
-	const showcaseCard = page
-		.locator( '.ai-showcase-card' )
-		.filter( { hasText: experimentLabel } );
-
-	// Wait for either the showcase card or the toggle to appear.
 	const toggle = page.getByLabel( experimentLabel );
-	await expect( showcaseCard.or( toggle ) ).toBeVisible( {
-		timeout: 10000,
-	} );
-
-	if ( await showcaseCard.isVisible() ) {
-		// Already disabled if there's no "Enabled" badge.
-		if ( ! ( await showcaseCard.getByText( 'Enabled' ).isVisible() ) ) {
-			return;
-		}
+	await expect( toggle ).toBeVisible( { timeout: 10000 } );
+	await expect( toggle ).toBeEnabled( { timeout: 10000 } );
 
-		await showcaseCard.getByRole( 'button', { name: 'Disable' } ).click();
-	} else {
-		// Nothing to do if this experiment is already disabled.
-		if ( ! ( await toggle.isChecked() ) ) {
-			return;
-		}
-
-		await toggle.uncheck();
+	// Nothing to do if this experiment is already disabled.
+	if ( ! ( await toggle.isChecked() ) ) {
+		return;
 	}
 
+	await toggle.uncheck();
+
 	// Ensure the save was successful.
 	await expect(
 		page.locator( '.components-snackbar__content', {