Provide a framework for building out react powered settings pages

[fabiankaegy]

The Phase 3: Admin Redesign effort aims to slowly revamp the user experience of using WordPress.

One large piece of using WordPress is settings pages. These settings pages get registered in PHP where you get a callback function to then render the markup that gets printed on that admin screen.

It technically is already possible today to register all of the @wordpress/ packages that are bundled and instantiate a custom react app on that screen to power your custom settings page. In fact that is how WordPress core handles loading all the instances of the block editor already today. (See the Site Editor for example:

• PHP Settings Screen: https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-admin/site-editor.php
• JS instantiation:

  gutenberg/packages/edit-site/src/index.js

  Line 33 in a12fa90

  export function initializeEditor( id, settings ) {

• Actual React App Scaffolding: https://github.com/WordPress/gutenberg/blob/a12fa9064f9bb3744de2c1f3a94fbc2a54b5348c/packages/edit-site/src/components/app/index.js
  )

However, setting that up custom for every single settings page that is out there is a lot of repetitive error-prone scaffolding code.

We already see various plugins starting to adopt this pattern of react-powered setting screens that use the @wordpress/components and even the @wordpress/data-views to create user experiences that match what core itself produces in the Site Editor.

Given that as part of the overall Admin Redesign we need to find a way to make this settings page creation easier anyway I think this would be a great area of exploration to see if we can abstract a lot of the manual, repetitive work here into a simpler API in core that allows developers to register these react powered settings screens that use a full navigation controller with tabs etc.

Doing this now allows plugin developers to start adopting this new paradigm before we eventually start to roll out the new "Frame" of the admin redesign and therefore will create a much smoother upgrade path and therefore a less fragmented experience of users.

Essentially, can we start building an API for plugins to build whats is highlighted here:

[lgersman]

Using JSON Schema for rendering settings pages is also a powerful option.

(Not only, but) Plugin settings are declared using JSON Schema using the WordPress Settings API. The only thing needed is a JSON Schema Form Renderer based on Gutenberg UI.

Fortunately we implemented a prototype at CloudFest Hackathon 2024 :-)

It costs just a few lines of code to render already registered plugin settings into a beautiful Gutenberg form.

GitHub Repo : https://github.com/IONOS-WordPress/cfhack2024-wp-react-jsonschema-form

WP Playground Link to see live and in action : https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/IONOS-WordPress/cfhack2024-wp-react-jsonschema-form/wp-now-support/playground.json

It even contains a JSON Schema playground to play around with the renderer.

IONOS plans to continuously make this project feature complete and contribute it to WordPress.