From 7ef6213fd9fc309ac52ec5bd12dd719717076b9b Mon Sep 17 00:00:00 2001 From: Om vataliya Date: Fri, 9 Jan 2026 22:33:01 +0530 Subject: [PATCH 1/7] Replace global experiments checkbox with enable/disable button - Replace Enable Experiments checkbox with button that auto-submits - Button text and styling changes based on state (Enable/Disable) - Primary button styling when disabled, secondary when enabled - Add helper text to clarify immediate save behavior - Update SCSS to support new button-based toggle layout - Preserve Save Changes button for other settings Fixes #157 --- includes/Settings/Settings_Page.php | 55 +++++++++++++++++++++-------- src/admin/settings/index.scss | 25 +++++-------- 2 files changed, 50 insertions(+), 30 deletions(-) diff --git a/includes/Settings/Settings_Page.php b/includes/Settings/Settings_Page.php index 025d6fb2..c2c470db 100644 --- a/includes/Settings/Settings_Page.php +++ b/includes/Settings/Settings_Page.php @@ -152,7 +152,7 @@ public function render_page(): void { -
+ @@ -168,19 +168,23 @@ public function render_page(): void {
- + + +

+ +

@@ -264,6 +268,29 @@ public function render_page(): void {
+ + Date: Tue, 13 Jan 2026 17:10:44 +0530 Subject: [PATCH 2/7] Update E2E test helpers for button-based toggle - Update enableExperiments to click button instead of checkbox - Update disableExperiments to click button instead of checkbox - Use button selector with :has-text() for reliability - Add page reload wait for auto-submit behavior --- tests/e2e/utils/helpers.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts index 11d994ab..72b099ad 100644 --- a/tests/e2e/utils/helpers.ts +++ b/tests/e2e/utils/helpers.ts @@ -60,10 +60,11 @@ export const clearCredentials = async ( admin: Admin, page: Page ) => { */ export const disableExperiments = async ( admin: Admin, page: Page ) => { await visitSettingsPage( admin ); - await page.locator( '#ai_experiments_enabled' ).uncheck(); - await page.locator( '#submit' ).click(); + // Click the Disable Experiments button (it auto-submits) + await page.click( 'button.ai-experiments__toggle-button:has-text("Disable Experiments")' ); - // Ensure the save was successful. + // Wait for page reload and ensure the save was successful. + await page.waitForLoadState( 'load' ); await expect( page.locator( '.wrap .notice-success', { hasText: 'Settings saved', @@ -79,10 +80,11 @@ export const disableExperiments = async ( admin: Admin, page: Page ) => { */ export const enableExperiments = async ( admin: Admin, page: Page ) => { await visitSettingsPage( admin ); - await page.locator( '#ai_experiments_enabled' ).check(); - await page.locator( '#submit' ).click(); + // Click the Enable Experiments button (it auto-submits) + await page.click( 'button.ai-experiments__toggle-button:has-text("Enable Experiments")' ); - // Ensure the save was successful. + // Wait for page reload and ensure the save was successful. + await page.waitForLoadState( 'load' ); await expect( page.locator( '.wrap .notice-success', { hasText: 'Settings saved', From 5c78cf2116411feab48f051a8a3bf383aa284166 Mon Sep 17 00:00:00 2001 From: Om vataliya Date: Tue, 13 Jan 2026 17:26:14 +0530 Subject: [PATCH 3/7] Fix E2E test helpers and prettier formatting - Use simple class selector 'button.ai-experiments__toggle-button' instead of :has-text() - Add waitForSelector to ensure button exists before clicking - Use develop to get all buttons and click the first one - Fix prettier linting by avoiding complex selectors on single line --- tests/e2e/utils/helpers.ts | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts index 72b099ad..a0ba4a74 100644 --- a/tests/e2e/utils/helpers.ts +++ b/tests/e2e/utils/helpers.ts @@ -60,8 +60,15 @@ export const clearCredentials = async ( admin: Admin, page: Page ) => { */ export const disableExperiments = async ( admin: Admin, page: Page ) => { await visitSettingsPage( admin ); - // Click the Disable Experiments button (it auto-submits) - await page.click( 'button.ai-experiments__toggle-button:has-text("Disable Experiments")' ); + // Wait for page to fully load before finding button + await page.waitForSelector( 'button.ai-experiments__toggle-button', { + timeout: 10000, + } ); + // Click the disable button (when enabled, it says "Disable") + const buttons = await page.$$( 'button.ai-experiments__toggle-button' ); + if ( buttons.length > 0 ) { + await buttons[0].click(); + } // Wait for page reload and ensure the save was successful. await page.waitForLoadState( 'load' ); @@ -80,8 +87,15 @@ export const disableExperiments = async ( admin: Admin, page: Page ) => { */ export const enableExperiments = async ( admin: Admin, page: Page ) => { await visitSettingsPage( admin ); - // Click the Enable Experiments button (it auto-submits) - await page.click( 'button.ai-experiments__toggle-button:has-text("Enable Experiments")' ); + // Wait for page to fully load before finding button + await page.waitForSelector( 'button.ai-experiments__toggle-button', { + timeout: 10000, + } ); + // Click the enable button (when disabled, it says "Enable") + const buttons = await page.$$( 'button.ai-experiments__toggle-button' ); + if ( buttons.length > 0 ) { + await buttons[0].click(); + } // Wait for page reload and ensure the save was successful. await page.waitForLoadState( 'load' ); From 668da1836dba13db5c2c7956503668b3fc88c881 Mon Sep 17 00:00:00 2001 From: Om vataliya Date: Tue, 13 Jan 2026 17:36:50 +0530 Subject: [PATCH 4/7] Fix prettier spacing around array indices Add spaces around array index: buttons[0] -> buttons[ 0 ] --- tests/e2e/utils/helpers.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts index a0ba4a74..4d523035 100644 --- a/tests/e2e/utils/helpers.ts +++ b/tests/e2e/utils/helpers.ts @@ -67,7 +67,7 @@ export const disableExperiments = async ( admin: Admin, page: Page ) => { // Click the disable button (when enabled, it says "Disable") const buttons = await page.$$( 'button.ai-experiments__toggle-button' ); if ( buttons.length > 0 ) { - await buttons[0].click(); + await buttons[ 0 ].click(); } // Wait for page reload and ensure the save was successful. @@ -94,7 +94,7 @@ export const enableExperiments = async ( admin: Admin, page: Page ) => { // Click the enable button (when disabled, it says "Enable") const buttons = await page.$$( 'button.ai-experiments__toggle-button' ); if ( buttons.length > 0 ) { - await buttons[0].click(); + await buttons[ 0 ].click(); } // Wait for page reload and ensure the save was successful. From e2bd675f414961efe19111429db72d161a7664ae Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Wed, 4 Feb 2026 13:28:48 -0700 Subject: [PATCH 5/7] Remove unneeded helper text --- includes/Settings/Settings_Page.php | 3 --- 1 file changed, 3 deletions(-) diff --git a/includes/Settings/Settings_Page.php b/includes/Settings/Settings_Page.php index d140486e..3ef227fd 100644 --- a/includes/Settings/Settings_Page.php +++ b/includes/Settings/Settings_Page.php @@ -185,9 +185,6 @@ class="button -

- -

From 069abfe41e5686fec28db88096c76b4ce828ee08 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Wed, 4 Feb 2026 13:28:54 -0700 Subject: [PATCH 6/7] Fix tests --- tests/e2e/utils/helpers.ts | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts index 4d523035..9997fa88 100644 --- a/tests/e2e/utils/helpers.ts +++ b/tests/e2e/utils/helpers.ts @@ -60,15 +60,18 @@ export const clearCredentials = async ( admin: Admin, page: Page ) => { */ export const disableExperiments = async ( admin: Admin, page: Page ) => { await visitSettingsPage( admin ); + // Wait for page to fully load before finding button await page.waitForSelector( 'button.ai-experiments__toggle-button', { timeout: 10000, } ); - // Click the disable button (when enabled, it says "Disable") - const buttons = await page.$$( 'button.ai-experiments__toggle-button' ); - if ( buttons.length > 0 ) { - await buttons[ 0 ].click(); + + // Click the disable button if it exists. Otherwise we assume the experiments are already disabled. + const button = page.locator( 'button.ai-experiments__toggle-button', { hasText: 'Disable Experiments' } ); + if ( await button.count() === 0 ) { + return; } + await button.click(); // Wait for page reload and ensure the save was successful. await page.waitForLoadState( 'load' ); @@ -87,15 +90,18 @@ export const disableExperiments = async ( admin: Admin, page: Page ) => { */ export const enableExperiments = async ( admin: Admin, page: Page ) => { await visitSettingsPage( admin ); + // Wait for page to fully load before finding button await page.waitForSelector( 'button.ai-experiments__toggle-button', { timeout: 10000, } ); - // Click the enable button (when disabled, it says "Enable") - const buttons = await page.$$( 'button.ai-experiments__toggle-button' ); - if ( buttons.length > 0 ) { - await buttons[ 0 ].click(); + + // Click the enable button if it exists. Otherwise we assume the experiments are already enabled. + const button = page.locator( 'button.ai-experiments__toggle-button', { hasText: 'Enable Experiments' } ); + if ( await button.count() === 0 ) { + return; } + await button.click(); // Wait for page reload and ensure the save was successful. await page.waitForLoadState( 'load' ); From 6e603275c62f358c82b47fb39159020eb13cc229 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Wed, 4 Feb 2026 13:36:15 -0700 Subject: [PATCH 7/7] Fix lint errors --- tests/e2e/utils/helpers.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/tests/e2e/utils/helpers.ts b/tests/e2e/utils/helpers.ts index 9997fa88..bc262f27 100644 --- a/tests/e2e/utils/helpers.ts +++ b/tests/e2e/utils/helpers.ts @@ -67,8 +67,10 @@ export const disableExperiments = async ( admin: Admin, page: Page ) => { } ); // Click the disable button if it exists. Otherwise we assume the experiments are already disabled. - const button = page.locator( 'button.ai-experiments__toggle-button', { hasText: 'Disable Experiments' } ); - if ( await button.count() === 0 ) { + const button = page.locator( 'button.ai-experiments__toggle-button', { + hasText: 'Disable Experiments', + } ); + if ( ( await button.count() ) === 0 ) { return; } await button.click(); @@ -97,8 +99,10 @@ export const enableExperiments = async ( admin: Admin, page: Page ) => { } ); // Click the enable button if it exists. Otherwise we assume the experiments are already enabled. - const button = page.locator( 'button.ai-experiments__toggle-button', { hasText: 'Enable Experiments' } ); - if ( await button.count() === 0 ) { + const button = page.locator( 'button.ai-experiments__toggle-button', { + hasText: 'Enable Experiments', + } ); + if ( ( await button.count() ) === 0 ) { return; } await button.click();