From 9225cad5cf7500e834cffd093f4d2023f9ce36db Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Thu, 30 Apr 2026 18:42:44 +0300
Subject: [PATCH 1/2] Settings: update Notice with new component from
 @wordpress/ui

---
 routes/ai-home/stage.tsx | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index bfb39e2b1..f8b7ccafd 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -5,7 +5,6 @@ import { Page } from '@wordpress/admin-ui';
 import {
 	Button,
 	ExternalLink,
-	Notice,
 	Spinner,
 	ToggleControl,
 } from '@wordpress/components';
@@ -17,7 +16,7 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { info as infoIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { Icon, Popover, VisuallyHidden } from '@wordpress/ui';
+import { Icon, Notice, Popover, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -939,25 +938,28 @@ function AISettingsPage() {
 		>
 			<div className="ai-settings-page">
 				{ ! PAGE_DATA.hasValidCredentials && (
-					<Notice status="error" isDismissible={ false }>
-						{ ! PAGE_DATA.hasCredentials
-							? __(
-									'The AI plugin requires a valid AI Connector to function properly. Verify you have one or more AI Connectors configured.',
-									'ai'
-							  )
-							: __(
-									'The AI plugin requires a valid AI Connector to function properly. Please review the AI Connectors you have configured to ensure they are valid.',
-									'ai'
-							  ) }{ ' ' }
+					<Notice.Root intent="error">
+						<Notice.Description>
+							{ ! PAGE_DATA.hasCredentials
+								? __(
+										'The AI plugin requires a valid AI Connector to function properly. Verify you have one or more AI Connectors configured.',
+										'ai'
+								  )
+								: __(
+										'The AI plugin requires a valid AI Connector to function properly. Please review the AI Connectors you have configured to ensure they are valid.',
+										'ai'
+								  ) }
+						</Notice.Description>
 						{ PAGE_DATA.connectorsUrl && (
-							<Button
-								variant="link"
-								href={ PAGE_DATA.connectorsUrl }
-							>
-								{ __( 'Manage Connectors', 'ai' ) }
-							</Button>
+							<Notice.Actions>
+								<Notice.ActionLink
+									href={ PAGE_DATA.connectorsUrl }
+								>
+									{ __( 'Manage Connectors', 'ai' ) }
+								</Notice.ActionLink>
+							</Notice.Actions>
 						) }
-					</Notice>
+					</Notice.Root>
 				) }
 				{ isLoading ? (
 					<Spinner />

From 1514a20eced1dc374abc8a30e71a70b33b513c17 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael.korpela@automattic.com>
Date: Thu, 30 Apr 2026 18:44:22 +0300
Subject: [PATCH 2/2] Margin with CSS for now

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

diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index f8b7ccafd..943e7e0bf 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -938,7 +938,10 @@ function AISettingsPage() {
 		>
 			<div className="ai-settings-page">
 				{ ! PAGE_DATA.hasValidCredentials && (
-					<Notice.Root intent="error">
+					<Notice.Root
+						className="ai-settings-page__notice"
+						intent="error"
+					>
 						<Notice.Description>
 							{ ! PAGE_DATA.hasCredentials
 								? __(
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index a95e61471..3e078db5a 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -19,8 +19,8 @@
 	}
 }
 
-.ai-settings-page .components-notice {
-	margin: 0 0 24px;
+.ai-settings-page__notice {
+	margin-bottom: 24px;
 }
 
 .ai-settings-page__actions {