Prevent video block from causing AMP validation errors in stories

[westonruter]

Fixes #2109.

• Set attribute defaults for autoplay:true. Note the toggle actually has no effect because the sanitizer will automatically supply the autoplay attribute since it is mandatory and thus it gets automatically supplied to ensure AMP validation.
• Set attribute defaults for controls:false. This seems relevant since the video is not interactive, so the controls can't be manipulated anyway.
• Make loop:true attribute default? The background video loops by default.
• Hide/remove the "Autoplay" toggle (since it must always be autoplay:true). Depends on Allow for core block Inspector Controls to be extended and removed WordPress/gutenberg#6023. See Hide Video block toggles for Autoplay and Plays Inline #2283.
• Hide/remove the "Play inline" toggle (and make sure it defaults to playsinline:false). Depends on Allow for core block Inspector Controls to be extended and removed WordPress/gutenberg#6023. See Hide Video block toggles for Autoplay and Plays Inline #2283.
• Automatically populate poster image from selected video attachment's featured image. See e3d92a5 and Improve video poster image handling #2240 (comment).
• Add an error message when no poster image is selected. See Improve video poster image handling #2240. (Note that if a user set the poster and then removed it, Gutenberg leaves behind an empty poster attribute that technically prevents a validation error from happening; this is because of a loose definition of poster on the amp-story >> amp-video spec where the attribute is merely mandatory, and it leaves its type undefined; but if this in the future changes to be defined as value_url, then this will become a hard AMP validation error, since the plugin's sanitizer wouldn't be able to automatically supply an empty poster attribute to circumvent the validation error.)
  

[westonruter]

• Automatically populate poster image from selected video attachment's featured image. See e3d92a5 and #2240 (comment).

@swissspidy I'm not sure how to pull this off. I'm looking at something like this:

diff --git a/assets/src/components/with-amp-story-settings.js b/assets/src/components/with-amp-story-settings.js
index 67a0240e..042c53a0 100644
--- a/assets/src/components/with-amp-story-settings.js
+++ b/assets/src/components/with-amp-story-settings.js
@@ -48,6 +48,7 @@ const applyWithSelect = withSelect( ( select, props ) => {
 	const animationOrderEntry = animatedBlocks.find( ( { id } ) => id === props.clientId );
 
 	return {
+		select,
 		parentBlock: getBlock( getBlockRootClientId( props.clientId ) ),
 		// Use parent's clientId instead of anchor attribute.
 		// The attribute will be updated via subscribers.
@@ -125,6 +126,7 @@ export default createHigherOrderComponent(
 	( BlockEdit ) => {
 		return enhance( ( props ) => {
 			const {
+				select,
 				clientId,
 				name,
 				attributes,
@@ -156,6 +158,7 @@ export default createHigherOrderComponent(
 			}
 
 			const isImageBlock = 'core/image' === name;
+			const isVideoBlock = 'core/video' === name;
 			const isTextBlock = 'amp/amp-story-text' === name;
 			const needsTextSettings = BLOCKS_WITH_TEXT_SETTINGS.includes( name );
 			const isMovableBlock = ALLOWED_MOVABLE_BLOCKS.includes( name );
@@ -179,6 +182,14 @@ export default createHigherOrderComponent(
 				setAttributes( { caption: '' } );
 			}
 
+			// If we have a video set from an attachment but there is no poster, use the featured image of the video if available.
+			if ( isVideoBlock && attributes.id && ! attributes.poster ) {
+				const media = select( 'core' ).getMedia( attributes.id );
+				if ( media && media.featuredmedia ) {
+					setAttributes( { poster: media.featuredmedia.src } );
+				}
+			}
+
 			const minTextHeight = 20;
 			const minTextWidth = 30;

But it seems that a media REST API response does not have the featuredmedia populated. Help?

[westonruter]

Also, I'm at a loss for how to hide the “autoplay” and “plays inline” toggles in the inspector controls.

[swissspidy]

Also, I'm at a loss for how to hide the “autoplay” and “plays inline” toggles in the inspector controls.

Same. There doesn't seem to be any class name that could be used for targeting these elements. Two possible options:

a) We can try to find a way to add some class names somewhere to allow for this
b) We just roll our own copy of the video block, at least in the meantime.

Related upstream issues:

WordPress/gutenberg#6023
WordPress/gutenberg#15450

[swissspidy]

But it seems that a media REST API response does not have the featuredmedia populated. Help?

Indeed. Looks like that's because the attachment post type does not officially support thumbnails, yet the UI for it is exposed in the admin... 🤷‍♂

I tried to come up with a workaround and 2a430d4 seems to do the trick.