Amp-wp: List AMP support for all native WordPress widgets

[kienstra]

Acceptance criteria:
AC1: List the AMP support for all native WordPress widgets, as produced by the script in #839.

This from AC5 in #839:
AC5: One story will be created as an outcome of the Discovery to address enhanced/added support for sidebar widgets.

When AMP doesn't support a widget, either describe it in detail here, or open a sub-issue.

There doesn't seem to be an issue for this yet.

[kienstra]

Widget AMP Support

Update: this list is now updated, and located in the project wiki

Widget | Status | Note
--- | --- | ---
Archives without 'dropdown' | ✅
Archives with 'dropdown' | ❌ | AMP error from the script on the onchange attribute
Audio | ❌ | Has AMP errors
Calendar | ✅
Categories without 'dropdown' | ✅
Categories with 'dropdown' | ❌ | 2 AMP errors
Custom HTML | ✅
Gallery | ❌ | Displays, but has AMP errors
Image | ❌ | Displays, but has AMP errors
Meta | ✅
Nav Menu | ✅
Pages | ✅
Recent Comments | ❌ | WP_Widget_Recent_Comments::recent_comments_style() outputs illegal style element in head.
RSS | ❌ | Echoes illegal <img>
Video | ❌ | 2 AMP errors

AMP Errors
Archives Widget with "dropdown"

• The attribute 'onchange' may not appear in tag 'select':
  <select id="archives-dropdown-106" name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
  There's no filter for the markup in widget(), so we might subclass this, as @westonruter suggested.

Audio Widget

• Only AMP runtime 'script' tags are allowed, and only in the document head.
• This conditionally outputs inline styling.
  Once the plugin's sanitizization is decoupled from the post content, we might use it to filter wp_audio_shortcode.
• It also enqueues styling and a script.

Categories Widget with "dropdown"

• The tag 'FORM [method=GET]' requires including the 'amp-form' extension JavaScript.
• Only AMP runtime 'script' tags are allowed, and only in the document head. There's an inline script below the <form>:
  <script type='text/javascript'>
  This widget() method also doesn't have a filter. So we might subclass and sanitize it, to prevent outputting the inline <script>. We'll also have to use the amp-form extension.

Gallery Widget

• The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
• If the theme doesn't support HTML5 galleries, this outputs an inline <style>.
  This widget outputs the <img> elements by calling wp_get_attachment_link() or wp_get_attachment_image. Only wp_get_attachment_image_link() has a filter that we could use.

Image Widget

• The inline 'style' attribute is not allowed in AMP documents. Use 'style amp-custom' tag instead.
• The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
  There doesn't look to be a way to filter the widget output.

Recent Comments Widget

• As Weston mentioned, WP_Widget_Recent_Comments::recent_comments_style() renders a disallowed style element in head.

RSS Widget

• The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

Video Widget

• The inline 'style' attribute is not allowed in AMP documents. Use 'style amp-custom' tag instead
• This usually enqueues 2 scripts and a style, which aren't allowed by AMP.
• The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'?
  There's a way to filter the output, but only if it's an attachment, a YouTube video, or a Vimeo video. Subclassing this might be a good strategy.

[westonruter]

@kienstra these are all supported now via #870, right?

[kienstra]

All Widgets Supported, But Gallery Widget Might Benefit From amp-carousel

Hi @westonruter,
Sorry for the delay here. All of the widgets above are now supported, without any AMP error.

But the 'Gallery' widget might be able to use an <amp-carousel>. It looks plain now:

AMP_Gallery_Embed looks to convert 'gallery' shortcodes into <amp-carousel> elements. I'll look at whether it could help with this.

[westonruter]

@kienstra I just found that neither YouTube nor Vimeo videos work in the video widget:

This may require extending the video widget like you had done originally.

See relevant logic in https://github.com/WordPress/wordpress-develop/blob/1c4f57f425fed9bec01e558d22d1fb751881e347/src/wp-includes/widgets/class-wp-widget-media-video.php#L128-L145

Another option would be to add a wp_video_shortcode_override filter. In fact, this would work for the gallery as well via the post_gallery filter. I'm not 100% sure if it is better to use the filter vs. override the gallery shortcode. Jetpack actually uses the post_gallery filter:

https://github.com/Automattic/jetpack/blob/cadaa581381aae1906680ab3312b5b3be30dc60e/modules/shortcodes/slideshow.php#L19-L51

[kienstra]

Thanks For The Details

Hi @westonruter,
Thanks for catching that YouTube and Vimeo videos don't work, and for your details on fixing it. If it's alright, I'll work on this tomorrow (Tuesday).

[kienstra]

Request For QA

Hi @csossi,
Could you please test this ticket? The widgets look to appear and work as expected in my local environment.

The test site might not be the best place for this, as it'll distort the pages when we place 20-30 test widgets in the sidebar.

We should run the widget test script on a site, as it will insert all of the needed widgets. As long as the site already has 3 videos and 3 audio files.

[kienstra]

Test Page

Hi @csossi,
Could you please test the widgets on this test page?

Please verify these widgets:

• Audio
• Archives (without dropdown)
• Archives (with dropdown)
• Calendar
• Categories (without dropdown)
• Categories (with dropdown)
• Custom HTML
• Gallery
• Image
• Menu
• Pages
• Recent Posts
• RSS
• Tag Cloud (without count)
• Tag Cloud (with count)
• Text
• Video

[csossi]

verified in QA

[ThierryA]

@kienstra could kindly update the list of widget supported now that the work is done. It would be great to have it in the WIKI and then change all instances of the tables to link to the wiki to avoid confusion.

PS: this should apply to embeds too

[kienstra]

Added Page To Wiki

Hi @ThierryA,
This new page in the project wiki has the updated matrices for widget and embed support. Also, I made a comment in the existing matrices, referencing that wiki page.

[ThierryA]

Awesome, thanks @kienstra