Support 'preload' attribute for Audio Block (#7590)

* Support 'preload' attribute for Audio Block

* Avoid `ButtonGroup` for preload; collapse controls into one section

* Comment on the special casing for `undefined`

* Re-arrangle Audio Block controls again

* chore: Tweak ternary to add clarity

core-blocks/audio/edit.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	IconButton,
 	PanelBody,
+	SelectControl,
 	Toolbar,
 	ToggleControl,
 	withNotices,
@@ -41,7 +42,7 @@ class AudioEdit extends Component {
 	}
 
 	render() {
-		const { autoplay, caption, loop, src } = this.props.attributes;
+		const { autoplay, caption, loop, preload, src } = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
@@ -102,7 +103,7 @@ class AudioEdit extends Component {
 					</Toolbar>
 				</BlockControls>
 				<InspectorControls>
-					<PanelBody title={ __( 'Playback Controls' ) }>
+					<PanelBody>
 						<ToggleControl
 							label={ __( 'Autoplay' ) }
 							onChange={ this.toggleAttribute( 'autoplay' ) }
@@ -113,6 +114,17 @@ class AudioEdit extends Component {
 							onChange={ this.toggleAttribute( 'loop' ) }
 							checked={ loop }
 						/>
+						<SelectControl
+							label={ __( 'Preload' ) }
+							value={ undefined !== preload ? preload : 'none' }
+							// `undefined` is required for the preload attribute to be unset.
+							onChange={ ( value ) => setAttributes( { preload: ( 'none' !== value ) ? value : undefined } ) }
+							options={ [
+								{ value: 'auto', label: __( 'Auto' ) },
+								{ value: 'metadata', label: __( 'Metadata' ) },
+								{ value: 'none', label: __( 'None' ) },
+							] }
+						/>
 					</PanelBody>
 				</InspectorControls>
 				<figure className={ className }>

core-blocks/audio/index.js

@@ -48,6 +48,12 @@ export const settings = {
 			selector: 'audio',
 			attribute: 'loop',
 		},
+		preload: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'audio',
+			attribute: 'preload',
+		},
 	},
 
 	supports: {
@@ -57,10 +63,10 @@ export const settings = {
 	edit,
 
 	save( { attributes } ) {
-		const { autoplay, caption, loop, src } = attributes;
+		const { autoplay, caption, loop, preload, src } = attributes;
 		return (
 			<figure>
-				<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } />
+				<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
 				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
 			</figure>
 		);