Support 'Autoplay' and 'Loop' in Audio Block 'Playback Controls'

blocks/api/parser.js

@@ -98,7 +98,14 @@ export function matcherFromSource( sourceConfig ) {
  * @return {*} Attribute value.
  */
 export function parseWithAttributeSchema( innerHTML, attributeSchema ) {
-	return hpqParse( innerHTML, matcherFromSource( attributeSchema ) );
+	const attributeValue = hpqParse( innerHTML, matcherFromSource( attributeSchema ) );
+	// HTML attributes without a defined value (e.g. <audio loop>) are parsed
+	// to a value of '' (empty string), so return `true` if we know this should
+	// be boolean.
+	if ( 'attribute' === attributeSchema.source && 'boolean' === attributeSchema.type ) {
+		return '' === attributeValue;
+	}
+	return attributeValue;
 }
 
 /**

blocks/api/test/parser.js

@@ -105,6 +105,45 @@ describe( 'block parser', () => {
 			);
 			expect( value ).toBe( 'chicken' );
 		} );
+
+		it( 'should return the matcher\'s string attribute value', () => {
+			const value = parseWithAttributeSchema(
+				'<audio src="#" loop>',
+				{
+					type: 'string',
+					source: 'attribute',
+					selector: 'audio',
+					attribute: 'src',
+				},
+			);
+			expect( value ).toBe( '#' );
+		} );
+
+		it( 'should return the matcher\'s true boolean attribute value', () => {
+			const value = parseWithAttributeSchema(
+				'<audio src="#" loop>',
+				{
+					type: 'boolean',
+					source: 'attribute',
+					selector: 'audio',
+					attribute: 'loop',
+				},
+			);
+			expect( value ).toBe( true );
+		} );
+
+		it( 'should return the matcher\'s false boolean attribute value', () => {
+			const value = parseWithAttributeSchema(
+				'<audio src="#" autoplay>',
+				{
+					type: 'boolean',
+					source: 'attribute',
+					selector: 'audio',
+					attribute: 'loop',
+				},
+			);
+			expect( value ).toBe( false );
+		} );
 	} );
 
 	describe( 'getBlockAttribute', () => {

core-blocks/audio/edit.js

@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Toolbar, withNotices } from '@wordpress/components';
+import {
+	IconButton,
+	PanelBody,
+	Toolbar,
+	ToggleControl,
+	withNotices,
+} from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import {
+	BlockControls,
+	InspectorControls,
 	MediaPlaceholder,
 	RichText,
-	BlockControls,
 } from '@wordpress/editor';
 
 /**
@@ -23,10 +30,18 @@ class AudioEdit extends Component {
 		this.state = {
 			editing: ! this.props.attributes.src,
 		};
+
+		this.toggleAttribute = this.toggleAttribute.bind( this );
+	}
+
+	toggleAttribute( attribute ) {
+		return ( newValue ) => {
+			this.props.setAttributes( { [ attribute ]: newValue } );
+		};
 	}
 
 	render() {
-		const { caption, src } = this.props.attributes;
+		const { autoplay, caption, loop, src } = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
@@ -86,6 +101,20 @@ class AudioEdit extends Component {
 						/>
 					</Toolbar>
 				</BlockControls>
+				<InspectorControls>
+					<PanelBody title={ __( 'Playback Controls' ) }>
+						<ToggleControl
+							label={ __( 'Autoplay' ) }
+							onChange={ this.toggleAttribute( 'autoplay' ) }
+							checked={ autoplay }
+						/>
+						<ToggleControl
+							label={ __( 'Loop' ) }
+							onChange={ this.toggleAttribute( 'loop' ) }
+							checked={ loop }
+						/>
+					</PanelBody>
+				</InspectorControls>
 				<figure className={ className }>
 					<audio controls="controls" src={ src } />
 					{ ( ( caption && caption.length ) || !! isSelected ) && (

core-blocks/audio/index.js

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

core-blocks/test/fixtures/core__audio.json

@@ -6,7 +6,9 @@
         "attributes": {
             "src": "https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3",
             "caption": [],
-            "align": "right"
+            "align": "right",
+            "autoplay": false,
+            "loop": false
         },
         "innerBlocks": [],
         "originalContent": "<figure class=\"wp-block-audio alignright\">\n    <audio controls=\"\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\"></audio>\n</figure>"