From 6bf528f34dde1b60a89279d84f3e8a7e4fb32b31 Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel@bachhuber.co>
Date: Fri, 15 Jun 2018 09:18:25 -0700
Subject: [PATCH] Support 'Autoplay' and 'Loop' in Audio Block 'Playback
 Controls'

---
 core-blocks/audio/edit.js  | 35 ++++++++++++++++++++++++++++++++---
 core-blocks/audio/index.js | 16 ++++++++++++++--
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
index 8b2d2d8db18982..7d1bbd9340299d 100644
--- a/core-blocks/audio/edit.js
+++ b/core-blocks/audio/edit.js
@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Toolbar, withNotices } from '@wordpress/components';
+import {
+	CheckboxControl,
+	IconButton,
+	PanelBody,
+	Toolbar,
+	withNotices,
+} from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import {
+	BlockControls,
+	InspectorControls,
 	MediaPlaceholder,
 	RichText,
-	BlockControls,
 } from '@wordpress/editor';
 
 /**
@@ -26,7 +33,7 @@ class AudioEdit extends Component {
 	}
 
 	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 = () => {
@@ -53,6 +60,14 @@ class AudioEdit extends Component {
 			this.setState( { editing: false } );
 		};
 
+		const onToggleAutoplay = ( newVal ) => {
+			setAttributes( { autoplay: newVal } );
+		};
+
+		const onToggleLoop = ( newVal ) => {
+			setAttributes( { loop: newVal } );
+		};
+
 		if ( editing ) {
 			return (
 				<MediaPlaceholder
@@ -86,6 +101,20 @@ class AudioEdit extends Component {
 						/>
 					</Toolbar>
 				</BlockControls>
+				<InspectorControls>
+					<PanelBody title={ __( 'Playback Controls' ) }>
+						<CheckboxControl
+							label={ __( 'Autoplay' ) }
+							onChange={ onToggleAutoplay }
+							checked={ autoplay }
+						/>
+						<CheckboxControl
+							label={ __( 'Loop' ) }
+							onChange={ onToggleLoop }
+							checked={ loop }
+						/>
+					</PanelBody>
+				</InspectorControls>
 				<figure className={ className }>
 					<audio controls="controls" src={ src } />
 					{ ( ( caption && caption.length ) || !! isSelected ) && (
diff --git a/core-blocks/audio/index.js b/core-blocks/audio/index.js
index 670041bb5078b9..b3983c300ca288 100644
--- a/core-blocks/audio/index.js
+++ b/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>
 		);