) => {
@@ -779,7 +811,7 @@ function AISettingsPage() {
return baseField;
} );
- return [ GLOBAL_FIELD, ...sectionActionsFields, ...featureFields ];
+ return [ ...sectionActionsFields, ...featureFields ];
}, [ featureDefinitions, featureGroups, globalEnabled, handleChange ] );
const form = useMemo< Form >( () => {
@@ -865,23 +897,7 @@ function AISettingsPage() {
}
return {
- fields: [
- {
- id: 'generalSettings',
- label: __( 'General Settings', 'ai' ),
- description: __(
- 'Control whether AI is enabled for your site. When disabled, all features and experiments will be inactive regardless of their individual settings.',
- 'ai'
- ),
- layout: {
- type: 'card',
- withHeader: true,
- isCollapsible: false,
- },
- children: [ GLOBAL_FIELD_ID ],
- },
- ...sectionFields,
- ],
+ fields: sectionFields,
};
}, [ featureDefinitions, featureGroups ] );
@@ -905,6 +921,19 @@ function AISettingsPage() {
{ __( 'Contribute', 'ai' ) }
+
+ {
+ void handleChange( {
+ [ GLOBAL_FIELD_ID ]: checked,
+ } );
+ } }
+ disabled={ isLoading }
+ />
+
+
}
>
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index da1dbceff..a95e61471 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -25,10 +25,41 @@
.ai-settings-page__actions {
display: flex;
+ flex-wrap: wrap;
align-items: center;
gap: 16px;
}
+.ai-settings-page__global-toggle {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.ai-settings-page__infotip-trigger {
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: var(--wpds-cursor-control);
+ display: inline-flex;
+ align-items: center;
+ border-radius: var(--wpds-border-radius-sm);
+ color: inherit;
+}
+
+.ai-settings-page__infotip-trigger:focus-visible {
+ outline: 2px solid var(--wp-admin-theme-color);
+ outline-offset: 2px;
+}
+
+.ai-settings-page__infotip-description {
+ margin: 0;
+ display: block;
+ width: min(360px, calc(100vw - 40px));
+ max-width: 100%;
+ line-height: 1.5;
+}
+
.ai-settings-page__link {
display: inline-flex;
align-items: center;
diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts
index 3b1a2329b..d9a484234 100644
--- a/tests/e2e/utils/helpers.ts
+++ b/tests/e2e/utils/helpers.ts
@@ -140,6 +140,7 @@ export const disableExperiments = async ( admin: Admin, page: Page ) => {
// Wait for page to fully load before finding the global toggle.
const globalToggle = page.getByLabel( 'Enable AI' );
await expect( globalToggle ).toBeVisible( { timeout: 10000 } );
+ await expect( globalToggle ).toBeEnabled( { timeout: 10000 } );
// Nothing to do if experiments are already disabled.
if ( ! ( await globalToggle.isChecked() ) ) {
@@ -165,6 +166,7 @@ export const enableExperiments = async ( admin: Admin, page: Page ) => {
// Wait for page to fully load before finding the global toggle.
const globalToggle = page.getByLabel( 'Enable AI' );
await expect( globalToggle ).toBeVisible( { timeout: 10000 } );
+ await expect( globalToggle ).toBeEnabled( { timeout: 10000 } );
// Nothing to do if experiments are already enabled.
if ( await globalToggle.isChecked() ) {