Change audio wrapper tag to figure and add caption (#2921)

WordPress · Oct 9, 2017 · 64a2b57 · 64a2b57
1 parent 0a02528
commit 64a2b57
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 14 deletions.
diff --git a/blocks/library/audio/index.js b/blocks/library/audio/index.js
@@ -15,12 +15,13 @@ import { Component } from '@wordpress/element';
 import './style.scss';
 import { registerBlockType, source } from '../../api';
 import MediaUploadButton from '../../media-upload-button';
+import Editable from '../../editable';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
 import BlockDescription from '../../block-description';
 
-const { attr } = source;
+const { attr, children } = source;
 
 registerBlockType( 'core/audio', {
 	title: __( 'Audio' ),
@@ -37,6 +38,10 @@ registerBlockType( 'core/audio', {
 		align: {
 			type: 'string',
 		},
+		caption: {
+			type: 'array',
+			source: children( 'figcaption' ),
+		},
 	},
 
 	getEditWrapperProps( attributes ) {
@@ -58,8 +63,8 @@ registerBlockType( 'core/audio', {
 			};
 		}
 		render() {
-			const { align } = this.props.attributes;
-			const { setAttributes, focus } = this.props;
+			const { align, caption } = this.props.attributes;
+			const { setAttributes, focus, setFocus } = this.props;
 			const { editing, className, src } = this.state;
 			const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 			const switchToEditing = () => {
@@ -113,6 +118,8 @@ registerBlockType( 'core/audio', {
 				</InspectorControls>
 			);
 
+			const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
+
 			if ( editing ) {
 				return [
 					inspectorControls,
@@ -150,20 +157,32 @@ registerBlockType( 'core/audio', {
 			return [
 				controls,
 				inspectorControls,
-				<div key="audio">
+				<figure key="audio" className={ className }>
 					<audio controls="controls" src={ src } />
-				</div>,
+					{ ( ( caption && caption.length ) || !! focus ) && (
+						<Editable
+							tagName="figcaption"
+							placeholder={ __( 'Write caption…' ) }
+							value={ caption }
+							focus={ focus && focus.editable === 'caption' ? focus : undefined }
+							onFocus={ focusCaption }
+							onChange={ ( value ) => setAttributes( { caption: value } ) }
+							inlineToolbar
+						/>
+					) }
+				</figure>,
 			];
 			/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		}
 	},
 
 	save( { attributes } ) {
-		const { align, src } = attributes;
+		const { align, src, caption } = attributes;
 		return (
-			<div className={ align ? `align${ align }` : null }>
+			<figure className={ align ? `align${ align }` : null }>
 				<audio controls="controls" src={ src } />
-			</div>
+				{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
+			</figure>
 		);
 	},
 } );
diff --git a/blocks/library/audio/style.scss b/blocks/library/audio/style.scss
@@ -5,3 +5,14 @@
 .wp-block-audio .button.button-large {
 	margin-top: 0.5em;
 }
+
+.wp-block-audio audio {
+	width: 100%;
+}
+
+.wp-block-audio figcaption {
+	margin-top: 0.5em;
+	color: $dark-gray-100;
+	text-align: center;
+	font-size: $default-font-size;
+}
diff --git a/blocks/test/fixtures/core__audio.html b/blocks/test/fixtures/core__audio.html
@@ -1,5 +1,5 @@
 <!-- wp:core/audio {"align":"right"} -->
-<div class="wp-block-audio alignright">
+<figure class="wp-block-audio alignright">
     <audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio>
-</div>
+</figure>
 <!-- /wp:core/audio -->
diff --git a/blocks/test/fixtures/core__audio.json b/blocks/test/fixtures/core__audio.json
@@ -5,8 +5,9 @@
         "isValid": true,
         "attributes": {
             "src": "https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3",
-            "align": "right"
+            "align": "right",
+            "caption": []
         },
-        "originalContent": "<div class=\"wp-block-audio alignright\">\n    <audio controls=\"\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\"></audio>\n</div>"
+        "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>"
     }
 ]
diff --git a/blocks/test/fixtures/core__audio.parsed.json b/blocks/test/fixtures/core__audio.parsed.json
@@ -4,7 +4,7 @@
         "attrs": {
             "align": "right"
         },
-        "rawContent": "\n<div class=\"wp-block-audio alignright\">\n    <audio controls=\"\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\"></audio>\n</div>\n"
+        "rawContent": "\n<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>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__audio.serialized.html b/blocks/test/fixtures/core__audio.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:core/audio {"align":"right"} -->
-<div class="wp-block-audio alignright"><audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio></div>
+<figure class="wp-block-audio alignright"><audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"></audio></figure>
 <!-- /wp:core/audio -->