From 8e69c8eb0ead118fccff354d5e9a30a494fa53cd Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel@bachhuber.co>
Date: Wed, 27 Jun 2018 12:59:49 -0700
Subject: [PATCH 1/5] Support 'preload' attribute for Audio Block

---
 core-blocks/audio/edit.js  | 40 +++++++++++++++++++++++++++++++++++++-
 core-blocks/audio/index.js | 10 ++++++++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
index 9bbc8cf67e08df..7217e0e7578a34 100644
--- 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
index b3983c300ca288..ca4582727da17f 100644
--- 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>
 		);

From bd30049b995f0e1e78316a32556b31ef36d1b116 Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel@bachhuber.co>
Date: Thu, 5 Jul 2018 06:02:52 -0700
Subject: [PATCH 2/5] Avoid `ButtonGroup` for preload; collapse controls into
 one section

---
 core-blocks/audio/edit.js | 72 ++++++++++++---------------------------
 1 file changed, 21 insertions(+), 51 deletions(-)

diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
index 7217e0e7578a34..137d8532b0b9a6 100644
--- a/core-blocks/audio/edit.js
+++ b/core-blocks/audio/edit.js
@@ -1,17 +1,10 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	ButtonGroup,
 	IconButton,
-	PanelBody,
+	SelectControl,
 	Toolbar,
 	ToggleControl,
 	withNotices,
@@ -109,49 +102,26 @@ 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' ) }
-							onChange={ this.toggleAttribute( 'autoplay' ) }
-							checked={ autoplay }
-						/>
-						<ToggleControl
-							label={ __( 'Loop' ) }
-							onChange={ this.toggleAttribute( 'loop' ) }
-							checked={ loop }
-						/>
-					</PanelBody>
+					<SelectControl
+						label={ __( 'Preload' ) }
+						value={ undefined !== preload ? preload : 'none' }
+						onChange={ ( value ) => setAttributes( { preload: 'none' !== value ? value : undefined } ) }
+						options={ [
+							{ value: 'auto', label: __( 'Auto' ) },
+							{ value: 'metadata', label: __( 'Metadata' ) },
+							{ value: 'none', label: __( 'None' ) },
+						] }
+					/>
+					<ToggleControl
+						label={ __( 'Autoplay' ) }
+						onChange={ this.toggleAttribute( 'autoplay' ) }
+						checked={ autoplay }
+					/>
+					<ToggleControl
+						label={ __( 'Loop' ) }
+						onChange={ this.toggleAttribute( 'loop' ) }
+						checked={ loop }
+					/>
 				</InspectorControls>
 				<figure className={ className }>
 					<audio controls="controls" src={ src } />

From 3e1cd9d2a6a43e5b22d8673274ccc6be0e874303 Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel@bachhuber.co>
Date: Thu, 5 Jul 2018 06:07:44 -0700
Subject: [PATCH 3/5] Comment on the special casing for `undefined`

---
 core-blocks/audio/edit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
index 137d8532b0b9a6..a76ae3c5b30670 100644
--- a/core-blocks/audio/edit.js
+++ b/core-blocks/audio/edit.js
@@ -105,6 +105,7 @@ class AudioEdit extends Component {
 					<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' ) },

From eed2f1b15371e6c8c312f915e26b1eea3f488b4c Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel@bachhuber.co>
Date: Wed, 11 Jul 2018 04:20:21 -0700
Subject: [PATCH 4/5] Re-arrangle Audio Block controls again

---
 core-blocks/audio/edit.js | 45 +++++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
index a76ae3c5b30670..b46600b5768d64 100644
--- a/core-blocks/audio/edit.js
+++ b/core-blocks/audio/edit.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	IconButton,
+	PanelBody,
 	SelectControl,
 	Toolbar,
 	ToggleControl,
@@ -102,27 +103,29 @@ class AudioEdit extends Component {
 					</Toolbar>
 				</BlockControls>
 				<InspectorControls>
-					<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' ) },
-						] }
-					/>
-					<ToggleControl
-						label={ __( 'Autoplay' ) }
-						onChange={ this.toggleAttribute( 'autoplay' ) }
-						checked={ autoplay }
-					/>
-					<ToggleControl
-						label={ __( 'Loop' ) }
-						onChange={ this.toggleAttribute( 'loop' ) }
-						checked={ loop }
-					/>
+					<PanelBody>
+						<ToggleControl
+							label={ __( 'Autoplay' ) }
+							onChange={ this.toggleAttribute( 'autoplay' ) }
+							checked={ autoplay }
+						/>
+						<ToggleControl
+							label={ __( 'Loop' ) }
+							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 }>
 					<audio controls="controls" src={ src } />

From d1f70622fcbc02b071e33e008e321c4d6b0aceed Mon Sep 17 00:00:00 2001
From: "Matthew Riley MacPherson (tofumatt)" <hi@tofumatt.com>
Date: Wed, 11 Jul 2018 19:11:30 +0100
Subject: [PATCH 5/5] chore: Tweak ternary to add clarity

---
 core-blocks/audio/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
index b46600b5768d64..e418a878a16bb5 100644
--- a/core-blocks/audio/edit.js
+++ b/core-blocks/audio/edit.js
@@ -118,7 +118,7 @@ class AudioEdit extends Component {
 							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 } ) }
+							onChange={ ( value ) => setAttributes( { preload: ( 'none' !== value ) ? value : undefined } ) }
 							options={ [
 								{ value: 'auto', label: __( 'Auto' ) },
 								{ value: 'metadata', label: __( 'Metadata' ) },