Skip to content

Replace global experiments checkbox with enable/disable button #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dkotter merged 12 commits into from
Feb 4, 2026
Merged

Replace global experiments checkbox with enable/disable button #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7ef6213
Replace global experiments checkbox with enable/disable button
Omcodes23 Jan 9, 2026
95709f1
Merge branch 'develop' into develop
jeffpaul Jan 12, 2026
73f674e
Merge branch 'develop' into develop
Omcodes23 Jan 13, 2026
c6e1bb6
Update E2E test helpers for button-based toggle
Omcodes23 Jan 13, 2026
7ec86f2
Merge branch 'develop' of https://github.com/Omcodes23/ai-wp into dev…
Omcodes23 Jan 13, 2026
5c78cf2
Fix E2E test helpers and prettier formatting
Omcodes23 Jan 13, 2026
668da18
Fix prettier spacing around array indices
Omcodes23 Jan 13, 2026
c2081a0
Merge branch 'develop' into develop
Omcodes23 Jan 15, 2026
ce42bde
Merge branch 'develop' into Omcodes23/develop
dkotter Feb 4, 2026
e2bd675
Remove unneeded helper text
dkotter Feb 4, 2026
069abfe
Fix tests
dkotter Feb 4, 2026
6e60327
Fix lint errors
dkotter Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 38 additions & 14 deletions includes/Settings/Settings_Page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ public function render_page(): void {

<?php settings_errors( 'ai_experiments' ); ?>

<form method="post" action="options.php">
<form method="post" action="options.php" id="ai-experiments-form">
<?php
settings_fields( Settings_Registration::OPTION_GROUP );
?>
Expand All @@ -171,19 +171,20 @@ public function render_page(): void {
</div>

<div class="ai-experiments__toggle">
<label class="components-toggle-control" for="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>">
<input
type="checkbox"
name="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>"
id="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>"
value="1"
<?php checked( $global_enabled ); ?>
aria-describedby="ai-experiments-global-desc"
/>
<span class="ai-experiments__toggle-label">
<?php esc_html_e( 'Enable Experiments', 'ai' ); ?>
</span>
</label>
<input
type="hidden"
name="<?php echo esc_attr( Settings_Registration::GLOBAL_OPTION ); ?>"
id="ai-experiments-enabled"
value="<?php echo $global_enabled ? '1' : '0'; ?>"
/>
<button
type="button"
class="button <?php echo $global_enabled ? 'button-secondary' : 'button-primary'; ?> ai-experiments__toggle-button"
data-ai-toggle-global="<?php echo $global_enabled ? '0' : '1'; ?>"
aria-describedby="ai-experiments-global-desc"
>
<?php echo $global_enabled ? esc_html__( 'Disable Experiments', 'ai' ) : esc_html__( 'Enable Experiments', 'ai' ); ?>
</button>
</div>
</div>

Expand Down Expand Up @@ -267,6 +268,29 @@ public function render_page(): void {

<?php submit_button(); ?>
</form>

<script>
(function() {
const form = document.getElementById('ai-experiments-form');
const toggleButton = form ? form.querySelector('[data-ai-toggle-global]') : null;
const globalInput = document.getElementById('ai-experiments-enabled');

if (!form || !toggleButton || !globalInput) {
return;
}

toggleButton.addEventListener('click', function() {
globalInput.value = this.dataset.aiToggleGlobal || '';

if (form.requestSubmit) {
form.requestSubmit();
return;
}

form.submit();
});
})();
</script>
</div>
<?php
}
Expand Down
25 changes: 9 additions & 16 deletions src/admin/settings/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,25 +42,18 @@
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}

.components-toggle-control {
display: flex;
align-items: center;
margin: 0;

span {
margin-left: 0.5rem;
}
}

input[type="checkbox"] {
margin: 0;
}
/* Element: toggle button */
&__toggle-button {
margin: 0;
}

/* Element: toggle label */
&__toggle-label {
font-weight: 500;
/* Element: toggle help text */
&__toggle-help {
margin: 0;
color: #555d66;
}

/* Element: notice */
Expand Down
38 changes: 32 additions & 6 deletions tests/e2e/utils/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,23 @@ 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();

// Ensure the save was successful.
// Wait for page to fully load before finding button
await page.waitForSelector( 'button.ai-experiments__toggle-button', {
timeout: 10000,
} );

// 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' );
await expect(
page.locator( '.wrap .notice-success', {
hasText: 'Settings saved',
Expand All @@ -79,10 +92,23 @@ 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();

// Ensure the save was successful.
// Wait for page to fully load before finding button
await page.waitForSelector( 'button.ai-experiments__toggle-button', {
timeout: 10000,
} );

// 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' );
await expect(
page.locator( '.wrap .notice-success', {
hasText: 'Settings saved',
Expand Down
Loading