Highlight themes and plugins that are AMP-compatible inside WordPress

[westonruter]

Currently the plugin has a short paragraph directing users to the ecosystem page on amp-wp.org before the list of template modes (#2135):

This is a good start but it's not integrated into the admin screens for installing themes and plugins.

Add new default tabs on the “Add New” theme/plugin screens for “AMP-compatible”, when in
Native/Transitional modes. This should selected instead of “Featured” because it's important to surface themes/plugins that actually work with AMP.

In addition, when searching for themes/plugins we could intercept the installation/activation action to show a warning whether or not it is known to be AMP-compatible.

Lastly, themes/plugins being listed could have an AMP badge for those known to be compatible. Also, for those which we know are not compatible, there could similarly be a warning badge, but this would require for us to maintain a list of incompatible plugins. For other themes and plugins which have an unknown compatibility status, there should be some message to indicate this.

---

Implementation Brief

1. Add a build step which downloads the AMP-compatible themes and plugins from WordPress.org and adds it as a JSON file to the plugin for us to use. (In the future we may download the list dynamically at runtime, but for now we can have a static copy which may make things simpler. Or maybe not.)
2. Create a new tab in the Add Plugins screen (left of Featured) that lists out the AMP-compatible plugins using the data obtained in the first step. Only plugins on WordPress.org would have an Install button available. Other plugins will have just an "Learn More" button.
3. Create a new tab in the Add Themes screen (left of Popular) that lists out the AMP-compatible themes using the data obtained in the first step. Only themes on WordPress.org would have an Install button available. Other themes will have just an "Learn More" button.
4. When doing a search for plugins, decorate the resulting plugins with PX badges which are included in the list of AMP-compatible plugins. This will naturally be limited to the plugins on WordPress.org.
5. When doing a search for themes, decorate the resulting plugins with PX badges which are included in the list of AMP-compatible plugins. This will naturally be limited to the themes on WordPress.org.

[amedina]

Excellent. Regarding the badges, would like to associate them to each of the there are three states regarding AMP compatibility: AMP Compatible (green AMP badge), non-AMP compatible (red AMP badge), unknown AMP compatibility (gray AMP badge).

[westonruter]

We may need to add a REST API endpoint to query the list of themes and plugins that are AMP-compatible from amp-wp.org.

[swissspidy]

There currently is https://amp-wp.org/wp-json/wp/v2/ecosystem

[westonruter]

It would be great if there was a way for users to opt-in to submit their validation errors to an aggregation service. Each time a URL is validated, the list of active themes and plugins can be sent along with any validation errors that were present. The aggregation service can then learn from the submissions which plugins and themes are AMP-incompatible, while at the same time infer which themes and plugins are AMP-compatible by noting X number of sites have them active but no validation errors are reported for them.

[amedina]

This seems related to prior discussions on AMP Brain, which would in essence be an aggregation service, as well as the plan for enabling users to channel errors (either manually or automatically) to specific target endpoints.

[westonruter]

Having the database of AMP-compatible/incompatible plugins will be useful in the plugin suppression UI as well (see #4477 via #4657). With that, plugins could be categories into 4 sets:

1. Currently-suppressed plugins (because they caused validation errors in the past).
2. Plugins currently causing validation errors.
3. Plugins that are not known to cause errors.
4. Plugins we know that do not cause issues.

To properly identify plugins in the 4th category, we'd ideally have the database of plugins. This would also provide the ability to highlight plugins in category 3 which are likely to cause validation errors.

If we merge the categories into 2 sets we have:

1. Problematic plugins (ones that once caused or are now causing validation errors, which may or may not be suppressed right now)
2. Unproblematic plugins (no validation errors are known to be caused by them)

So there are two supersets, with two sets inside each. At the moment the problematic plugins set is differentiated into two by which are checked and which are unchecked. In the unproblematic plugins set, there is no differentiation between the two subsets (known good vs unknown), currently. The database would provide us the ability to provide that differentiation.

[westonruter]

Update: We'll just omit showing any plugins which are not causing any validation errors at all.

[jwold]

As discussed, we could also add a page under the AMP settings, and reference it, where we list out compatible extensions.

[westonruter]

Another integration point to highlight AMP-compatible themes is the Reader theme picker: #5678.

[jwold]

The design for this is ready for engineering review and followup. Feel free to reach out with any questions!

Plugin compatibility

1. Within the WordPress admin > Add Plugins, we'll need to add: A PX Enhancing tab. This will show all the AMP compatible WordPress.org plugins in a single list.
2. Within Add Plugins we'll add a Page Experience Enhancing badge to any AMP Compatible plugins within the Featured, Popular, Recommended, and Favorites tabs.
3. When searching within plugins, we'll add a Page Experience Enhancing badge to any AMP Compatible plugins.
4. When hovering over the Page Experience Enhancing section of the plugin, there will be a tooltip visible with more information.

Theme compatibility

1. Within the WordPress admin > Add Themes, we'll need to add: A PX Enhancing tab. This will show all the AMP compatible WordPress.org themes in a single list.
2. Within Add Themes we'll add a Page Experience Enhancing badge to any AMP Compatible themes within the Popular, Latest, and Favorites tabs.
3. When searching within themes, we'll add a Page Experience Enhancing badge to any AMP Compatible themes.
4. When hovering over the Page Experience Enhancing section of the theme, there will be a tooltip visible with more information.

Plugin list

1. Within the list of installed plugins, we'll add a section into the card with the Page Experience Enhancing badge.
2. This badge will also include the tooltip.

Theme list
Similar to the Plugin list, we'll also show badges under installed plugins (screenshot not shown).

Optional: Onboarding
We may want to also show a badge during onboarding.

---

Please let me know if there are any questions! cc @westonruter, @dhaval-parekh, and @delawski (taking a guess with these initial folks, since we haven't decided who will pick this up)

Link to Figma: https://www.figma.com/file/SfMlDvHc5KHxJmAZN12PIM/?node-id=2649%3A18194

[westonruter]

1. Within the WordPress admin > Add Plugins, we'll need to add: A PX Enhancing tab. This will show all the AMP compatible WordPress.org plugins in a single list.

Note in this context we can also include plugins that are not on WordPress.org. We just wouldn't be able to offer installation from that screen. We wouldn't be able to offer the same in the search results.

• Within Add Plugins we'll add a Page Experience Enhancing badge to any AMP Compatible plugins within the Featured, Popular, Recommended, and Favorites tabs.

What about "PX Verified" instead? That seems a bit more clear.

• Within the WordPress admin > Add Themes, we'll need to add: A PX Enhancing tab. This will show all the AMP compatible WordPress.org themes in a single list.

Ditto for my comments above about plugins.

Plugin list

I wonder if this maybe too much? Maybe there could be a "PX Verified" comment tucked in with the plugin meta items, in the same line after the version and author are shown.

Theme list

How would this look since themes are not listed in a list table but are rather presented as cards. I guess similar to browsing themes in the directory to install?

Optional: Onboarding
We may want to also show a badge during onboarding.

I don't think this is necessary because only AMP-compatible themes are offered as Reader themes in the first place.

[jwold]

Note in this context we can also include plugins that are not on WordPress.org. We just wouldn't be able to offer installation from that screen. We wouldn't be able to offer the same in the search results.

Good call out! cc @delawski

What about "PX Verified" instead? That seems a bit more clear.

@amedina what do you think?

Plugin List: I wonder if this maybe too much? Maybe there could be a "PX Verified" comment tucked in with the plugin meta items, in the same line after the version and author are shown.

Good point. We could go with just the text; or try to make the design a little more subtle:

Theme List: How would this look since themes are not listed in a list table but are rather presented as cards. I guess similar to browsing themes in the directory to install?

Yes I am thinking it would look the same as the theme directory.

Showing badge in onboarding: I don't think this is necessary because only AMP-compatible themes are offered as Reader themes in the first place.

Good point.

[westonruter]

Good point. We could go with just the text; or try to make the design a little more subtle:

Yes, and I think it can be shortened a bit more to just “PX Verified” here too. The text “Page Experience Enhancing” feels too verbose.

[maitreyie-chavan]

@dhaval-parekh is picking up this issue to work on the recently updated implementation brief, while in the meantime the design gets finalised/updated by this week.

[dhaval-parekh]

@jwold , @westonruter Could we remove the rating, active install part from the plugin card that is not listed in WordPress org? Since, that information is not available in amp-wp.org and showing that information will be misleading.

For example,

[westonruter]

Yes, this section would be omitted entirely:

[delawski]

QA Passed

The Add Plugins screen contains a new "AMP Compatible" tab. Also, plugins that are AMP compatible have a badge in the top left corner (when not on "AMP Compatible" tab)

Add Plugins Featured	Add Plugins Popular	Add Plugins AMP Compatible

The Add Themes screen contains a new "AMP Compatible" tab, too. Themes that are AMP compatible have a badge in the top left corner (when not on "AMP Compatible" tab)

Add Themes Popular	Add Themes AMP Compatible

On Themes and Plugins screens, all AMP compatible items are marked as being AMP compatible.

Themes	Plugins

Lastly, themes and plugins that don't link to wp.org have "Visit site" label with an external link icon:

Themes	Plugins