Merge pull request #2299 from WordPress/add/audio-block

Add Audio Block

blocks/library/audio/index.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Placeholder } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlockType, source } from '../../api';
+import MediaUploadButton from '../../media-upload-button';
+
+const { attr } = source;
+
+registerBlockType( 'core/audio', {
+	title: __( 'Audio' ),
+
+	icon: 'media-audio',
+
+	category: 'common',
+
+	attributes: {
+		src: {
+			type: 'string',
+			source: attr( 'audio', 'src' ),
+		},
+	},
+
+	edit( { attributes, setAttributes, className } ) {
+		const { src } = attributes;
+		const onSelectAudio = ( media ) => {
+			if ( media && media.url ) {
+				setAttributes( { src: media.url } );
+			}
+		};
+
+		if ( ! src ) {
+			return [
+				<Placeholder
+					key="placeholder"
+					icon="media-audio"
+					label={ __( 'Audio' ) }
+					instructions={ __( 'Select an audio file from your library, or upload a new one:' ) }
+					className={ className }>
+					<MediaUploadButton
+						buttonProps={ { isLarge: true } }
+						onSelect={ onSelectAudio }
+						type="audio"
+					>
+						{ __( 'Insert from Media Library' ) }
+					</MediaUploadButton>
+				</Placeholder>,
+			];
+		}
+
+		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		return [
+			<div key="audio">
+				<audio controls="controls" src={ src } />
+			</div>,
+		];
+		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+	},
+
+	save( { attributes } ) {
+		const { src } = attributes;
+		return (
+			<audio controls="controls" src={ src } />
+		);
+	},
+} );

blocks/library/audio/style.scss

@@ -0,0 +1,3 @@
+.wp-block-audio .components-placeholder__input {
+	margin-top: 1em;
+}

blocks/library/index.js

@@ -22,3 +22,4 @@ import './shortcode';
 import './text-columns';
 import './verse';
 import './video';
+import './audio';

blocks/test/fixtures/core__audio.html

@@ -0,0 +1,3 @@
+<!-- wp:core/audio -->
+<audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3" class="wp-block-audio"></audio>
+<!-- /wp:core/audio -->

blocks/test/fixtures/core__audio.json

@@ -0,0 +1,10 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/audio",
+        "isValid": true,
+        "attributes": {
+            "src": "https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3"
+        }
+    }
+]

blocks/test/fixtures/core__audio.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/audio",
+        "attrs": null,
+        "rawContent": "\n<audio controls=\"\" src=\"https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3\" class=\"wp-block-audio\"></audio>\n"
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]

blocks/test/fixtures/core__audio.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:core/audio -->
+<audio controls="" src="https://media.simplecast.com/episodes/audio/80564/draft-podcast-51-livePublish2.mp3" class="wp-block-audio"></audio>
+<!-- /wp:core/audio -->