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

WordPress · Jun 25, 2018 · 6bf528f · 6bf528f
1 parent e5e7335
commit 6bf528f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git 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
@@ -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>
 		);