Support 'preload' attribute for Audio Block

WordPress · Jun 27, 2018 · 127039f · 127039f
1 parent fffd8e3
commit 127039f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
@@ -1,8 +1,15 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import {
+	Button,
+	ButtonGroup,
 	IconButton,
 	PanelBody,
 	Toolbar,
@@ -41,7 +48,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,6 +109,37 @@ class AudioEdit extends Component {
 					</Toolbar>
 				</BlockControls>
 				<InspectorControls>
+					<PanelBody title={ __( 'Preload' ) }>
+						<ButtonGroup aria-label={ __( 'Preload' ) }>
+							{ map( [
+								{
+									name: __( 'Auto' ),
+									key: 'auto',
+									attributeValue: 'auto',
+								},
+								{
+									name: __( 'Metadata' ),
+									key: 'metadata',
+									attributeValue: 'metadata',
+								},
+								{
+									name: __( 'None' ),
+									key: 'none',
+									attributeValue: undefined,
+								},
+							], ( { name, key, attributeValue } ) => (
+								<Button
+									key={ key }
+									isLarge
+									isPrimary={ attributeValue === preload }
+									aria-pressed={ attributeValue === preload }
+									onClick={ () => setAttributes( { preload: attributeValue } ) }
+								>
+									{ name }
+								</Button>
+							) ) }
+						</ButtonGroup>
+					</PanelBody>
 					<PanelBody title={ __( 'Playback Controls' ) }>
 						<ToggleControl
 							label={ __( 'Autoplay' ) }

diff --git a/core-blocks/audio/index.js b/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>
 		);