Add React-powered (@wordpress/boot) settings, About, and Experience Plugin screens by fabiankaegy · Pull Request #236 · 10up/10up-experience

fabiankaegy · 2026-07-28T19:24:35Z

Summary

Stacked on #235. Rebuilds the plugin's admin surfaces as React screens on the @wordpress/boot script module (WordPress 6.9+), following the WP-boot admin-page pattern used on recent Fueled client builds. Three screens share one chrome: a fixed header with the Fueled logo and page title, a scrollable content region, and (on the settings screen) a Site Editor-style save footer.

Settings → Fueled Experience (new screen)

New Settings\SettingsScreen consolidates the plugin's settings — Fueled SSO, strong passwords, REST API availability, comments, Classic Editor, password-protected content, Support Monitor — into @wordpress/dataviews DataForm cards.
All settings are registered on init with show_in_rest, edits flow through editEntityRecord( 'root', 'site' ), and saving uses the Review changes panel (EntitiesSavedStates). Save flow verified end-to-end in a live WP 7.0 install.
Settings forced by constants/filters (TENUPSSO_DISABLE, SUPPORT_MONITOR_*, TENUP_DISABLE_COMMENTS, Force Strong Passwords) are hidden with an explanatory note; the Monitor server URL only appears in debug mode and the local-environment notice is mirrored.

About Fueled (boot-rendered)

Fueled Experience Plugin (boot-rendered, DataViews cards)

The configuration and feature cards are DataViews grid layouts with badge fields for the status pills; "Manage setting" links point at the consolidated settings screen when it's available.

Architecture

BootPages\AbstractBootPage owns the shared boot wiring (classic-script "prerequisites" carrier, script modules, REST preload, mount point); SettingsScreen, AboutPage, and ExperiencePage extend it.
assets/js/admin-shared/ holds the shared AdminPageLayout component and boot chrome CSS; each page bundles its own module via the new esbuild.boot.mjs (npm run build:boot, wired into npm run build; bundles are minified and .asset.php versions hash JS + CSS).
tenup-pages.css remains the base design for the About/Experience pages; page modules add boot-alignment overrides (centered max-width column, container-query-driven responsive grids, balanced display headings) and counter a core About-page rule (.about-wrap p) that ships in the boot bundle and would override the label scale.

Compatibility

WordPress < 6.9: the settings page is not registered and the About/Experience pages fall back to their existing PHP markup — gated on core shipping the boot script module.
Classic settings fields on General/Writing/Reading are untouched; the classic admin_init registrations keep driving options.php saves while the new init registrations drive the REST endpoint.
Multisite/network installs: the settings screen is single-site only; network settings screens and the network About page fallback are unchanged.
No option names, defaults, or sanitization behaviors changed. Page slugs (10up-about, 10up-experience) are preserved.

Validation

Verified all three screens in a live WordPress 7.0.2 container site (fueled-experience.test), including the settings save round-trip (option persisted via REST and reflected by wp-cli), responsive behavior at narrow widths, and a cross-discipline design review pass (heading hierarchy, badge contrast, admin-bar icon optical alignment).
npm run build (10up-toolkit + boot modules), npm run lint-js, npm run lint-style
composer lint — zero errors; the seven pre-existing warnings in untouched files remain
Screenshots live on the assets/pr-236-screenshots branch (delete after merge).

🤖 Generated with Claude Code

…ess/boot Adds a consolidated settings screen (Settings → Fueled Experience) rendered with the @wordpress/boot script module on WordPress 6.9+. Settings are exposed on the core /wp/v2/settings REST endpoint and saved through the entity store with the Site Editor-style review-changes flow. Classic settings fields remain unchanged; on older WordPress versions the page is simply not registered. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

- Extract shared @wordpress/boot wiring into BootPages\AbstractBootPage; SettingsScreen now extends it and shares an AdminPageLayout component (header with Fueled logo + page title, scrollable content, save footer). - Render the About Fueled and Fueled Experience Plugin pages as boot (React) screens with the legacy PHP markup as fallback on WP < 6.9. - Build the Experience page's configuration and feature cards with @wordpress/dataviews DataViews grid layouts, using badge fields for the status pills. - Point the Experience page's "Manage setting" links at the consolidated settings screen when it's available. - Refinements from a cross-discipline interface review: single h1 heading hierarchy per page, balanced display headings, container-query-driven responsive grids, higher-contrast status badges, optically centered admin-bar bolt icon, and de-duplicated "Fueled" in page headers. - Minify boot module bundles. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…manifests - Core's About-page stylesheet ships in the boot bundle and its .about-wrap p rule overrode the eyebrow/label/description sizes on the boot-rendered About and Experience pages; restore the intended scale at higher specificity. - Tighten the eyebrow → heading → description rhythm in the Monitor cards. - Include the sibling CSS bundle in the boot asset-manifest version hash so CSS-only changes bust the browser cache. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Copilot

Pull request overview

This PR modernizes the plugin’s WordPress admin UI by adding React-powered admin screens rendered via the @wordpress/boot script module (WP 6.9+), while preserving the existing PHP markup as a fallback on older WordPress versions. It introduces a consolidated Settings screen (saved through /wp/v2/settings) plus boot-rendered “About” and “Experience Plugin” pages that reuse a shared layout/chrome.

Changes:

Add a boot-based Settings screen that registers plugin settings with show_in_rest and saves via the entity store + “Review changes” flow.
Add shared boot-page infrastructure (AbstractBootPage) and boot-rendered About / Experience pages.
Add an esbuild pipeline to bundle boot page route/content modules and emit .asset.php manifests for dependency/versioning.

Reviewed changes

Copilot reviewed 22 out of 43 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
package.json	Adds `build:boot`/`watch:boot` scripts and dev deps for boot-module bundling.
includes/classes/Settings/SettingsScreen.php	New single-site boot Settings screen; registers settings for REST exposure and passes UI config to React.
includes/classes/BootPages/AbstractBootPage.php	New shared boot wiring: mount point, REST preloading, classic “prerequisites” carrier handles, script module registration.
includes/classes/BootPages/AboutPage.php	Boot wiring + config payload for About page.
includes/classes/BootPages/ExperiencePage.php	Boot wiring + config payload for Experience Plugin page (configuration/features).
includes/classes/AdminCustomizations/Customizations.php	Delegates About/Experience rendering to boot mount when available; exposes configuration/feature data to boot page.
esbuild.boot.mjs	Adds esbuild build/watch pipeline for per-page boot modules and `.asset.php` generation.
assets/js/admin-shared/AdminPageLayout.js	Shared React layout (header/content/footer) for all boot admin screens.
assets/js/admin-shared/boot-layout.css	Shared chrome styles for boot admin screens.
assets/js/admin-settings/*	React settings UI using DataForm + editor save panel modal.
assets/js/admin-about/*	React About page content rendered inside shared boot layout.
assets/js/admin-experience/*	React Experience page with DataViews-based cards and links/actions.
assets/css/admin.css / dist/css/admin.css(.asset.php)	Admin bar icon sizing/padding tweak and rebuilt dist assets.
dist/modules/**	Built boot route/content modules + styles + `.asset.php` manifests for settings/about/experience pages.
10up-experience.php	Boots the new Settings screen singleton.
CHANGELOG.md	Documents the new boot screens + REST settings exposure.
.stylelintignore	Ignores generated `dist/modules/` output.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+		wp_register_script(
+			$slug . '-prerequisites',
+			'',
+			$prerequisites_deps,
+			$boot_asset['version'],
+			true
+		);


jeffpaul · 2026-08-12T15:26:26Z

@darylldoyle we'll likely want to consider this alongside #235 as both do some rebranding across the plugin and will want to ensure they work well together / don't conflict, else will need to pick on to continue with and the other to close out.

jeffpaul · 2026-08-12T15:31:05Z

May also want to consider doing the 10up > Fueled work as part of a 2.0.0 version to mark the change more formally?

fabiankaegy and others added 4 commits July 28, 2026 21:23

chore: build boot settings assets

73c369a

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

fabiankaegy changed the title ~~Add React-powered Fueled Experience settings screen (@wordpress/boot)~~ Add React-powered (@wordpress/boot) settings, About, and Experience Plugin screens Jul 28, 2026

fabiankaegy requested review from claytoncollie, darylldoyle and jakemgold July 28, 2026 21:17

fabiankaegy self-assigned this Jul 28, 2026

fix: tighten admin bar bolt icon right padding to 4px

5590b46

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

fabiankaegy marked this pull request as ready for review July 29, 2026 08:22

Copilot AI review requested due to automatic review settings July 29, 2026 08:22

Copilot started reviewing on behalf of fabiankaegy July 29, 2026 08:22 View session

Copilot AI reviewed Jul 29, 2026

View reviewed changes

Comment thread includes/classes/BootPages/AbstractBootPage.php

Comment on lines +197 to +203

wp_register_script(

$slug . '-prerequisites',

'',

$prerequisites_deps,

$boot_asset['version'],

true

);

jeffpaul mentioned this pull request Aug 12, 2026

Rebrand Experience plugin UI for Fueled 1.19.0 #235

Draft

jeffpaul added this to the 1.19.0 milestone Aug 12, 2026

Navigation Menu

Uh oh!

Add React-powered (@wordpress/boot) settings, About, and Experience Plugin screens - #236

Add React-powered (@wordpress/boot) settings, About, and Experience Plugin screens#236
fabiankaegy wants to merge 5 commits into
codex/fueled-ui-brandingfrom
feature/boot-settings-screen

fabiankaegy commented Jul 28, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

jeffpaul commented Aug 12, 2026

Uh oh!

jeffpaul commented Aug 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

fabiankaegy commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Settings → Fueled Experience (new screen)

About Fueled (boot-rendered)

Fueled Experience Plugin (boot-rendered, DataViews cards)

Architecture

Compatibility

Validation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

jeffpaul commented Aug 12, 2026

Uh oh!

jeffpaul commented Aug 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fabiankaegy commented Jul 28, 2026 •

edited

Loading