Support 'preload' attribute for Video Block (#7929)

* Add preload for the video block

* Set metadata as default

* Add preload to tests

* feat: Disable editor interaction with video/audio blocks

* fix: allow preload=none

* fix validation issues

packages/block-library/src/audio/edit.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	Disabled,
 	IconButton,
 	PanelBody,
 	SelectControl,
@@ -129,7 +130,13 @@ class AudioEdit extends Component {
 					</PanelBody>
 				</InspectorControls>
 				<figure className={ className }>
-					<audio controls="controls" src={ src } />
+					{ /*
+						Disable the audio tag so the user clicking on it won't play the
+						file or change the position slider when the controls are enabled.
+					*/ }
+					<Disabled>
+						<audio controls="controls" src={ src } />
+					</Disabled>
 					{ ( ( caption && caption.length ) || !! isSelected ) && (
 						<RichText
 							tagName="figcaption"

packages/block-library/src/video/edit.js

@@ -3,8 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	Disabled,
 	IconButton,
 	PanelBody,
+	SelectControl,
 	Toolbar,
 	ToggleControl,
 	withNotices,
@@ -73,7 +75,7 @@ class VideoEdit extends Component {
 	}
 
 	render() {
-		const { autoplay, caption, controls, loop, muted, src } = this.props.attributes;
+		const { autoplay, caption, controls, loop, muted, preload, src } = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
@@ -148,10 +150,26 @@ class VideoEdit extends Component {
 							onChange={ this.toggleAttribute( 'controls' ) }
 							checked={ controls }
 						/>
+						<SelectControl
+							label={ __( 'Preload' ) }
+							value={ preload }
+							onChange={ ( value ) => setAttributes( { preload: value } ) }
+							options={ [
+								{ value: 'auto', label: __( 'Auto' ) },
+								{ value: 'metadata', label: __( 'Metadata' ) },
+								{ value: 'none', label: __( 'None' ) },
+							] }
+						/>
 					</PanelBody>
 				</InspectorControls>
 				<figure className={ className }>
-					<video controls src={ src } />
+					{ /*
+						Disable the video tag so the user clicking on it won't play the
+						video when the controls are enabled.
+					*/ }
+					<Disabled>
+						<video controls={ controls } src={ src } />
+					</Disabled>
 					{ ( ( caption && caption.length ) || !! isSelected ) && (
 						<RichText
 							tagName="figcaption"

packages/block-library/src/video/index.js

@@ -58,6 +58,13 @@ export const settings = {
 			selector: 'video',
 			attribute: 'muted',
 		},
+		preload: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'video',
+			attribute: 'preload',
+			default: 'metadata',
+		},
 		src: {
 			type: 'string',
 			source: 'attribute',
@@ -94,16 +101,17 @@ export const settings = {
 	edit,
 
 	save( { attributes } ) {
-		const { autoplay, caption, controls, loop, muted, src } = attributes;
+		const { autoplay, caption, controls, loop, muted, preload, src } = attributes;
 		return (
 			<figure>
 				{ src && (
 					<video
 						autoPlay={ autoplay }
 						controls={ controls }
-						src={ src }
 						loop={ loop }
 						muted={ muted }
+						preload={ preload !== 'metadata' ? preload : undefined }
+						src={ src }
 					/>
 				) }
 				{ caption && caption.length > 0 && (

test/integration/full-content/fixtures/core__video.json

@@ -9,6 +9,7 @@
             "controls": true,
             "loop": false,
             "muted": false,
+            "preload": "metadata",
             "src": "https://awesome-fake.video/file.mp4"
         },
         "innerBlocks": [],