Rebuild admin UI with React + Tailwind CSS v4 + shadcn/ui#187
Open
Rebuild admin UI with React + Tailwind CSS v4 + shadcn/ui#187
Conversation
Replace the jQuery/Select2/PHP template admin interface with a modern React component architecture. Each admin page renders as a separate React root mounted on #fakerpress-react-root, using lazy-loaded page components, React Hook Form for state, and the existing REST API for data generation. PHP refactoring: - Unify container usage in Factory classes with helper functions - Convert Ajax.php static methods to instance methods - Add DI-friendly instance methods to Plugin.php - Mark Field.php as @deprecated - Add wp_localize_script page config bridge to all View classes Build pipeline: - Switch from npm to Bun, add React 18, Tailwind v4, shadcn/ui - Configure webpack with @tailwindcss/postcss for packages/ - Register React bundle in Assets.php with conditional loading - Set up Jest with jsdom, @testing-library/react, WordPress mocks React components (22 shadcn/ui + 9 custom): - Form: RangeInput, ComboboxMulti, DateRangeField, MetaFieldRules, TaxonomyFieldRules, GenerateButton, FormField - Layout: PageLayout, AdminNotice - Hooks: usePageConfig, useGenerateModule (with batching), useAsyncSearch (debounced AJAX) Pages migrated: Settings, Terms, Users, Comments, Attachments, Posts Tests: 42 Jest tests (components, hooks, pages) + 11 WPUnit tests
- Delete .nvmrc (no longer needed with Bun) - Update AGENTS.md: prerequisites table, JS/CSS section heading, and all npm run commands → bun run - Update CI js-build job: setup-node+npm ci → oven-sh/setup-bun+bun install/run
- Replace @import "tailwindcss" with partial imports (theme + utilities) to skip preflight and prevent global reset leaking into WP admin - Add minimal scoped reset in @layer base targeting #fakerpress-react-root - Add StripTailwindLayerHacksPlugin webpack plugin to remove Tailwind v4's :not(#\#) cascade-compatibility shims from compiled CSS assets - Add postcss.config.js to route package CSS through @tailwindcss/postcss - Document Tailwind/WP admin pitfalls in CLAUDE.md (formerly AGENTS.md)
…ter-code-structure
- Fix all Tailwind classes from `fp-*` dash notation to `fp:*` colon notation - Fix variant ordering: `fp:hover:`, `fp:last:`, `fp:sm:` (prefix always first) - Document the correct `fp:` colon prefix rule in AGENTS.md - Add scoped CSS variables and base styles to globals.css - Add StripTailwindLayerHacksPlugin and minor webpack config tweaks Tailwind v4 `prefix(fp)` generates `.fp\:flex` selectors — the dash form `fp-flex` matches nothing and styles silently fail.
- Add @config directive to globals.css - Switch box-sizing reset to :where(#fakerpress-react-root) for lower specificity - Add :where([data-fp-root]) resets for all WP admin form element overrides - Update color tokens to WP admin blue palette - Remove legacy .__fakerpress block from admin.pcss (~433 lines) - Add data-fp-root attribute to all PHP template root divs
- Set data-fp-root on document.body so CSS resets apply to all WP form elements - Simplify DateRangeField to value/onChange API; export getPresetRange helper - Initialise date default values with computed preset dates (not empty strings) - Add tooltip props to all FormField instances on Attachments page - Reduce button/input sizes one step for WP admin density (h-9→h-8, etc.) - Add build:dev script to package.json
… reset - Add @csstools/postcss-is-pseudo-class with onComplexSelector: 'ignore' to postcss.config.js - Patch postcss-preset-env in .pcss webpack pipeline to also suppress warning - Move CSS vars into @layer fp-base for internal cascade organization - Promote WP admin resets out of @layer base (unlayered beats WP unlayered via source order) - Add missing resets for headings, links, lists, and paragraphs to block WP admin bleed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@tailwindcss/postcss, andfp:class prefix for CSS isolation from WordPress adminLatest changes
#fakerpress-react-rootspecificity with zero-specificity:where([data-fp-root])attribute scoping so WordPress admin form styles are cleanly overridden without!important.__fakerpressstyles fromadmin.pcssDateRangeFieldto a singlevalue/onChangeprop pair; fixed default dates being initialised as empty stringsdata-fp-rootondocument.bodyin JS and on template root divs in PHP so resets apply globallyTest plan
bun install && bun run build— verifybuild/admin.js,build/admin.css, andbuild/admin.asset.phpare producedbun run test— verify all 42 Jest tests passcomposer test:wpunit— verify all WPUnit tests pass (existing + 11 new)