Revamp Stylesheets Box on Validated URL Screen

[delawski]

Feature description

Following the strangler fig approach, the "Stylesheets" meta box on the Validated URL screen is a good first candidate to go through the redesign process (#2316).

Right now, it uses the regular WordPress functionality, i.e. list tables and admin hooks.

The aim of this issue is to replace the server-side rendered meta box with a React-based component fed via the REST API.

It will require the following to be done:

• Create a new REST endpoint, GET /wp-json/amp/v1/validated-urls/:id/, that will return the validation data stored in a amp_validated_url post type. For now, the response data structure will be limited to just the stylesheets data structure (along with some general fields like id, url, date, etc.).
• Ensure the REST endpoint is secure so that only authorized users are receiving the validation data.
• Implement a new React component that will look similar to the existing "Stylesheets" meta box. It should incorporate any applicable usability improvements described in Update to validator with usability improvements #5191.
• Remove the legacy "Stylesheets" meta box along with code dependencies.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[jwold]

@delawski in our last Leads meeting, Alberto asked if we could add a note that the % column is difficult for users to understand. There are some challenges with differentiating between 71% and 49%, for instance. Is this something we could put in numbers visually, or replace the bar with %? The bar itself isn't quite enough to convey what's happening.

cc @amedina and @westonruter

[delawski]

@jwold That's a good point. Yes, I think we can definitely add a number next to or above the bar, or replace the bar entirely with a number. If you have a suggestion on what would work better, please share.

[jwold]

I'm thinking in this case we may want to replace the bar entirely just with percentages. Does that make sense?

[jwold]

[westonruter]

Yes, I think replacing the bar with percentage numbers makes sense, or a number overlaying the bar as I recall seeing Ken show a design mock for.

Originally I was just trying to find a good use of meter. But it's problematic as shown in your screenshot when there are many small CSS files along with one big one, as it is not clear what is going on.

[jwold]

This is ready for review but is parked. Building block piece not required to address for narrative. Not needed for 2.2, and needs further iterations in the future. Hence not being prioritized.