adds new edit flow for the audio block

packages/block-library/src/audio/audio-toolbar.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ IconButton,
+ Path,
+ Rect,
+ SVG,
+ Toolbar,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function AudioToolbar( props ) {
+ const { isEditing, onClick } = props;
+
+ const editImageIcon = ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );
+
+ return <Toolbar>
+ <IconButton
+ className={ classnames( 'components-toolbar__control', { 'is-active': isEditing } ) }
+ label={ __( 'Edit audio' ) }
+ onClick={ onClick }
+ icon={ editImageIcon }
+ />
+ </Toolbar>;
+}

packages/block-library/src/audio/edit.js

@@ -4,11 +4,9 @@
 import { getBlobByURL, isBlobURL } from '@wordpress/blob';
 import {
  Disabled,
- IconButton,
  PanelBody,
  SelectControl,
  ToggleControl,
- Toolbar,
  withNotices,
 } from '@wordpress/components';
 import {
@@ -26,11 +24,13 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import icon from './icon';
+import AudioToolbar from './audio-toolbar';
 
 /**
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { speak } from '@wordpress/a11y';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
@@ -40,7 +40,7 @@ class AudioEdit extends Component {
  // edit component has its own src in the state so it can be edited
  // without setting the actual value outside of the edit UI
  this.state = {
- editing: ! this.props.attributes.src,
+ isEditing: ! this.props.attributes.src,
  };
 
  this.toggleAttribute = this.toggleAttribute.bind( this );
@@ -62,7 +62,7 @@ class AudioEdit extends Component {
  },
  onError: ( e ) => {
  setAttributes( { src: undefined, id: undefined } );
- this.setState( { editing: true } );
+ this.setState( { isEditing: true } );
  noticeOperations.createErrorNotice( e );
  },
  allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -81,8 +81,8 @@ class AudioEdit extends Component {
  const { attributes, setAttributes } = this.props;
  const { src } = attributes;
 
- // Set the block's src from the edit component's state, and switch off
- // the editing UI.
+ // Set the block's src from the edit component's state, and toggle off
+ // the isEditing UI.
  if ( newSrc !== src ) {
  // Check if there's an embed block that handles this URL.
  const embedBlock = createUpgradedEmbedBlock(
@@ -95,7 +95,7 @@ class AudioEdit extends Component {
  setAttributes( { src: newSrc, id: undefined } );
  }
 
- this.setState( { editing: false } );
+ this.setState( { isEditing: false } );
  }
 
  getAutoplayHelp( checked ) {
@@ -105,53 +105,50 @@ class AudioEdit extends Component {
  render() {
  const { autoplay, caption, loop, preload, src } = this.props.attributes;
  const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
- const { editing } = this.state;
- const switchToEditing = () => {
- this.setState( { editing: true } );
+ const { isEditing } = this.state;
+ const toggleIsEditing = () => {
+ this.setState( { isEditing: ! this.state.isEditing } );
+ if ( this.state.isEditing ) {
+ speak( __( 'You can now listen to the audio in the audio block.' ) );
+ } else {
+ speak( __( 'You are now editing the audio in the audio block.' ) );
+ }
  };
  const onSelectAudio = ( media ) => {
  if ( ! media || ! media.url ) {
- // in this case there was an error and we should continue in the editing state
+ // in this case there was an error and we should continue in the isEditing state
  // previous attributes should be removed because they may be temporary blob urls
  setAttributes( { src: undefined, id: undefined } );
- switchToEditing();
+ toggleIsEditing();
  return;
  }
  // sets the block's attribute and updates the edit component from the
- // selected media, then switches off the editing UI
+ // selected media, then toggles off the isEditing UI
  setAttributes( { src: media.url, id: media.id } );
- this.setState( { src: media.url, editing: false } );
+ this.setState( { src: media.url, isEditing: false } );
  };
- if ( editing ) {
- return (
- <MediaPlaceholder
+
+ /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+ return (
+ <>
+ <BlockControls>
+ { !! src &&
+ <AudioToolbar isEditing={ isEditing } onClick={ toggleIsEditing } />
+ }
+ </BlockControls>
+ { isEditing && <MediaPlaceholder
  icon={ <BlockIcon icon={ icon } /> }
  className={ className }
+ onCancel={ !! src && toggleIsEditing }
  onSelect={ onSelectAudio }
  onSelectURL={ this.onSelectURL }
  accept="audio/*"
  allowedTypes={ ALLOWED_MEDIA_TYPES }
  value={ this.props.attributes }
  notices={ noticeUI }
  onError={ noticeOperations.createErrorNotice }
- />
- );
- }
-
- /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
- return (
- <>
- <BlockControls>
- <Toolbar>
- <IconButton
- className="components-icon-button components-toolbar__control"
- label={ __( 'Edit audio' ) }
- onClick={ switchToEditing }
- icon="edit"
- />
- </Toolbar>
- </BlockControls>
- <InspectorControls>
+ /> }
+ { ! isEditing && <InspectorControls>
  <PanelBody title={ __( 'Audio Settings' ) }>
  <ToggleControl
  label={ __( 'Autoplay' ) }
@@ -176,8 +173,8 @@ class AudioEdit extends Component {
  ] }
  />
  </PanelBody>
- </InspectorControls>
- <figure className={ className }>
+ </InspectorControls> }
+ { ! isEditing && <figure className={ className }>
  { /*
  Disable the audio tag so the user clicking on it won't play the
  file or change the position slider when the controls are enabled.
@@ -194,7 +191,7 @@ class AudioEdit extends Component {
  inlineToolbar
  />
  ) }
- </figure>
+ </figure> }
  </>
  );
  /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */