Skip to content

Add a beta-gated Tools screen prototype using @wordpress/components - #554

Open
faisalahammad wants to merge 2 commits into
WordPress:trunkfrom
faisalahammad:enhancement/172-tools-redesign
Open

faisalahammad wants to merge 2 commits into
WordPress:trunkfrom
faisalahammad:enhancement/172-tools-redesign

Conversation

@faisalahammad

Copy link
Copy Markdown

Adds a beta-gated prototype of the Tools screen built with @wordpress/components, as a first exploration of the design system direction in issue #172.

The classic screen stays the default. When the new "Modern Tools Screen (Prototype)" beta feature is enabled, the metabox grid is replaced by a React screen with card based Import and Export sections. The screen posts to the existing nonce verified PHP handlers through a hidden form, so there are no new endpoints and import/export behavior does not change. The export tool exposes a new get_php_export_code() so the React screen can display generated PHP, and the classic path now escapes that output with esc_textarea().

This also repairs the beta features registry, which included a deleted class file and never registered any features, so the beta features page listed nothing on trunk.

How to test:

  1. Go to SCF > Beta Features and enable "Modern Tools Screen (Prototype)".
  2. Open SCF > Tools. The React screen replaces the metabox grid.
  3. Under Export, check some items and click "Export JSON". A .json file downloads with the selected items.
  4. Check items and click "Generate PHP". The page shows the generated PHP in a read only textarea and the Copy button puts it on the clipboard.
  5. Under Import, select a previously exported JSON file and click "Import JSON". The items import as before.
  6. Disable the beta feature and reopen Tools. The classic screen is back and import/export still work as before.

Automated PHPUnit and Jest tests, the production build, scoped PHPStan, and PHPCS on changed lines passed. Manual/browser testing was not run yet.

Closes #172

Use of AI Tools

Add a beta-gated prototype of the Tools screen built with
@wordpress/components, exploring the design system direction
from issue WordPress#172.

- New tools_redesign beta feature, off by default; the classic
  metabox screen stays the default experience
- React screen for import and export, posting to the existing
  nonce-verified PHP handlers through a hidden form bridge, so
  no new endpoints are added
- Export tool gets get_php_export_code() so the React screen can
  show generated PHP, and html_generate() now escapes the output
- Jest and PHPUnit coverage for the bridge, screen and gating
@github-actions

Copy link
Copy Markdown

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props faisalahammad, priethor.

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

The preview menu item label changed on trunk, which times out the
pinned e2e helper on every preview call. Override openPreviewPage
in the editor fixture to click the View button and match the new
label with a regex that also covers older WordPress versions.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Explore Following Core Design Systems to Implement the Rest of Custom wp-admin Pages

1 participant