Admin Settings Screen Implementation #51

Ref34t · 2025-10-26T18:48:56Z

Summary

Builds a complete admin settings screen with React UI for managing AI experimental features.

Key Components

Admin Settings Page - React-based UI using WordPress components
Settings Toggle - Global on/off switch for experimental features
Feature Toggles - Per-feature enable/disable functionality
Settings Registry - Allows features to register their own settings sections
Settings Service - Coordinates all settings components
REST API - Backend data layer for settings persistence

Architecture

Direct instantiation in bootstrap
Filter-based dependency injection for Feature_Toggles service
Features receive Settings_Registry as parameter
Render callbacks accept Settings_Toggle directly

Feature Development Pattern

Features extend Abstract_Feature and follow these rules:

Implement load_feature_metadata() returning id, label, description
Always register settings sections via ai_register_settings_sections hook
Check is_enabled() before registering functional hooks
Pass services as parameters
Use Provides_Settings_Section trait for settings panels

See Example_Feature for complete reference implementation.

Files Added

Admin settings infrastructure (9 PHP classes)
React/TypeScript UI (src/ directory)
Feature settings trait (Provides_Settings_Section)
Comprehensive test suite

Resolves #25

github-actions · 2025-10-26T18:49:10Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @[email protected].

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: [email protected].

Co-authored-by: Ref34t <[email protected]>
Co-authored-by: mindctrl <[email protected]>
Co-authored-by: jeffpaul <[email protected]>
Co-authored-by: felixarntz <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

codecov · 2025-10-29T08:01:21Z

Codecov Report

❌ Patch coverage is 55.47619% with 187 lines in your changes missing coverage. Please review.
✅ Project coverage is 54.40%. Comparing base (e76b0b2) to head (0d6537b).
⚠️ Report is 8 commits behind head on trunk.

Files with missing lines	Patch %	Lines
includes/Admin/Settings_Page_Assets.php	0.00%	34 Missing ⚠️
includes/Admin/Settings/Settings_Service.php	50.00%	25 Missing ⚠️
includes/Admin/Settings/Settings_Renderer.php	0.00%	24 Missing ⚠️
includes/Admin/Settings/Feature_Toggles.php	54.00%	23 Missing ⚠️
includes/Admin/Settings/Settings_Section.php	38.70%	19 Missing ⚠️
includes/Admin/Settings_Payload_Builder.php	0.00%	17 Missing ⚠️
includes/Admin/Admin_Settings_Page.php	69.56%	14 Missing ⚠️
...udes/Features/Traits/Provides_Settings_Section.php	72.00%	14 Missing ⚠️
includes/bootstrap.php	22.22%	14 Missing ⚠️
includes/Admin/Settings/Settings_Toggle.php	95.55%	2 Missing ⚠️
... and 1 more

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk      #51      +/-   ##
============================================
+ Coverage     48.48%   54.40%   +5.91%     
- Complexity       45      134      +89     
============================================
  Files             6       16      +10     
  Lines           198      579     +381     
============================================
+ Hits             96      315     +219     
- Misses          102      264     +162

Flag	Coverage Δ
unit	`54.40% <55.47%> (+5.91%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

includes/bootstrap.php

This reverts commit a7eacdc.

jeffpaul · 2025-11-03T18:27:32Z

@Ref34t is this PR ready for review or is it still in-progress?

Ref34t · 2025-11-03T18:30:43Z

@jeffpaul it's ready

dkotter · 2025-11-04T19:25:04Z

.github/workflows/pull-request-comments.yml

Looking at the changes here, it seems to avoid permission issues we're adding a comment instead of updating the PR description. I have a separate PR (#65) that fixes permission issues. I'd suggest we remove these changes from this PR and can continue discussion on that other PR to keep things more focused here

Note I've brought the code changes here that ensure we have a PR description over to #65, though I didn't bring over the changes that add a comment instead of updating the PR description

dkotter · 2025-11-04T19:26:07Z

.gitignore

 # Build
-/build/
 /dist/
+/build/


Seems this change just swaps the position of these two, any reason for that?

I think there was a commit that removed the build directory and then in a later commit it was added it back, just in a slightly different location

dkotter · 2025-11-04T19:27:12Z

composer.json

    "format": "phpcbf --standard=phpcs.xml.dist",
    "lint": "phpcs --standard=phpcs.xml.dist",
-    "phpstan": "phpstan analyse --memory-limit=1G",
+    "stan": "phpstan analyse --memory-limit=1G",


Is there a reason for this naming change?

dkotter · 2025-11-04T19:31:18Z

includes/Admin/Admin_Settings_Page.php

+			__( 'AI Experiments', 'ai' ),
+			__( 'AI Experiments', 'ai' ),


Might be worth setting a constant for this instead of repeating it

dkotter · 2025-11-04T19:43:09Z

src/index.tsx

Since we almost certainly will have other JS/TS files to support each individual feature, wondering if all this code should be nested under src/admin or src/settings or similar just to make it clear as we start introducing other code?

dkotter

In testing this out, I think we're likely to have some iterations on the actual design of the settings page though overall it looks good to me. My one note that I'd suggest we fix in this PR is the first time I enable/disable something, a notice is shown. If I don't close that message out and then enable/disable again, the page content jumps around. I think the issue here is the notice is removed then added back so quickly and causes things to shift up and down.

dkotter · 2025-11-04T23:18:53Z

includes/Features/Example_Feature/Example_Feature.php

+		// Always register settings sections so the feature appears in admin.
+		add_action(
+			'ai_register_settings_sections',
+			array( $this, 'register_settings_sections' )
+		);


Thinking about this a bit more, wondering if it would be better to have this handled within the Abstract_Feature class instead of requiring each individual feature class to have this exact same code?

So basically the abstract class would run this and then each extending class would have to implement their own register_settings_sections method?

dkotter · 2025-11-04T23:22:55Z

includes/Features/Example_Feature/Example_Feature.php

+		// Only register functional hooks if the feature is enabled.
+		if ( ! $this->is_enabled() ) {
+			return;
+		}


Similar to the above, right now each feature class would need to have these exact same lines of code. Instead of that duplication, wondering if we introduce a new method in the parent class that is only called if is_enabled returns true. So if you need to register functionality that is always there, even if the feature is disabled, you could do that in the register method (or we could rename that to something else) and if you want to run functionality only if the feature is enabled, you could do that in a new method, something like register_when_enabled

mindctrl · 2025-11-05T14:46:10Z

includes/Admin/Settings_Page_Assets.php

+
+	private const STYLE_FILE = 'build/style-index.css';
+
+	private const STYLE_FILE_PATH = __DIR__ . '/../../build/style-index.css';


In places where we're traversing the path upwards like this, I wonder if we should use WP_AI_DIR instead?

Suggested change

private const STYLE_FILE_PATH = __DIR__ . '/../../build/style-index.css';

private const STYLE_FILE_PATH = WP_AI_DIR . '/build/style-index.css';

mindctrl · 2025-11-05T15:03:04Z

includes/Abstracts/Abstract_Feature.php

+			$enabled = $this->feature_toggles->is_feature_enabled( $this->id );
+		} else {
+			$enabled = $this->enabled;
+		}


I'm a bit confused on the enablement checks. We have:

$this->feature_toggles->is_feature_enabled( $this->id );

$this->enabled

apply_filters( "ai_feature_{$this->id}_enabled", $enabled )

It's hard to know what the source of truth is. Do have needs for this complexity already? I wonder if the UI could store the enabled/disabled options somewhere and just use those with the existing filter and avoid all the new classes? Admittedly I don't have a full picture of the next steps and/or plans for this.

Ref34t changed the title ~~Admin Settings Screen Implementation~~ WIP: Admin Settings Screen Implementation Oct 27, 2025

jeffpaul marked this pull request as draft October 27, 2025 19:11

jeffpaul assigned Ref34t Oct 27, 2025

jeffpaul added this to the 0.1.0 milestone Oct 27, 2025

mindctrl reviewed Oct 30, 2025

View reviewed changes

includes/bootstrap.php Outdated Show resolved Hide resolved

dkotter mentioned this pull request Oct 31, 2025

Add feature to show what abilities are on site #62

Open

Build admin settings screen

72b4e56

Ref34t force-pushed the feature/admin-settings-screen-issue-25 branch from 5d3ada5 to 72b4e56 Compare November 2, 2025 14:42

Add test coverage for Example_Feature register and render methods

013f8e7

Ref34t marked this pull request as ready for review November 2, 2025 14:54

Mohamed Khaled added 5 commits November 2, 2025 16:57

Refactor React components into separate files

379e44f

Include build directory for plugin activation

0fc0a70

Enable JavaScript linting in test workflow

7774324

Format code with Prettier

a7eacdc

Revert "Format code with Prettier"

bfc6154

This reverts commit a7eacdc.

jeffpaul changed the title ~~WIP: Admin Settings Screen Implementation~~ Admin Settings Screen Implementation Nov 2, 2025

jeffpaul requested a review from dkotter November 2, 2025 16:35

Mohamed Khaled and others added 11 commits November 2, 2025 18:47

Stop tracking build output

0194419

Disable JS lint workflow again

08f883c

Remove generated ai.zip

89394cc

Fix JS lint violations

876955d

Restore bootstrap baseline

cf77782

Re-enable JS lint workflow

db48a13

Fix plugin path constants for assets

b6740e2

Document admin settings architecture

6922346

Restore footer illustration in developer guide

cf7fc73

Resolve developer guide footer conflict

3035c5f

Merge branch 'trunk' into feature/admin-settings-screen-issue-25

f11fdf4

Mohamed Khaled added 9 commits November 3, 2025 10:08

Silence phpstan require warning

20441b0

Refactor admin asset loader

2aca4bb

Pass toggles service to default feature filter

87c57b3

Include build directory in package files

48b2b28

Build bundle before packaging

d2cc9a5

Fallback to Playground comment when body update fails

bedc00a

Guard Playground automation for upstream PRs

092ee3b

Revert Playground automation guard

3bd52bf

Re-run Playground workflow for testing

0d6537b

dkotter requested changes Nov 4, 2025

View reviewed changes

dkotter reviewed Nov 4, 2025

View reviewed changes

mindctrl reviewed Nov 5, 2025

View reviewed changes


		private const STYLE_FILE = 'build/style-index.css';

		private const STYLE_FILE_PATH = __DIR__ . '/../../build/style-index.css';

	private const STYLE_FILE_PATH = __DIR__ . '/../../build/style-index.css';
	private const STYLE_FILE_PATH = WP_AI_DIR . '/build/style-index.css';

Admin Settings Screen Implementation #51

Are you sure you want to change the base?

Admin Settings Screen Implementation #51

Conversation

Ref34t commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Components

Architecture

Feature Development Pattern

Files Added

Uh oh!

github-actions bot commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

codecov bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

jeffpaul commented Nov 3, 2025

Uh oh!

Ref34t commented Nov 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dkotter left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dkotter Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Ref34t commented Oct 26, 2025 •

edited

Loading

github-actions bot commented Oct 26, 2025 •

edited

Loading

codecov bot commented Oct 29, 2025 •

edited

Loading

dkotter Nov 4, 2025 •

edited

Loading