From 49cec3c6bfb9bf5facdfcb6bdf352c4556ea465e Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 11 Dec 2020 20:30:22 +0100 Subject: [PATCH 1/4] Use BlockCaption component for caption field --- .../block-library/src/audio/edit.native.js | 149 ++++++++++-------- 1 file changed, 87 insertions(+), 62 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index d8ee2f45f8b65..32a2aca34f812 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -1,7 +1,8 @@ /** * External dependencies */ -import { Text } from 'react-native'; +import { Text, TouchableWithoutFeedback } from 'react-native'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies @@ -16,17 +17,17 @@ import { ToolbarGroup, } from '@wordpress/components'; import { + BlockCaption, BlockControls, BlockIcon, InspectorControls, MediaPlaceholder, MediaUpload, MediaUploadProgress, - RichText, } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { audio as icon, replace } from '@wordpress/icons'; -import { createBlock } from '@wordpress/blocks'; +import { useState } from '@wordpress/element'; const ALLOWED_MEDIA_TYPES = [ 'audio' ]; @@ -38,8 +39,12 @@ function AudioEdit( { noticeUI, insertBlocksAfter, onFocus, + onBlur, + clientId, } ) { - const { id, autoplay, caption, loop, preload, src } = attributes; + const { id, autoplay, loop, preload, src } = attributes; + + const [ isCaptionSelected, setIsCaptionSelected ] = useState( false ); const onFileChange = ( { mediaId, mediaUrl } ) => { setAttributes( { id: mediaId, src: mediaUrl } ); @@ -78,6 +83,16 @@ function AudioEdit( { setAttributes( { src: media.url, id: media.id } ); } + function onAudioPress() { + setIsCaptionSelected( false ); + } + + function onFocusCaption() { + if ( ! isCaptionSelected ) { + setIsCaptionSelected( true ); + } + } + if ( ! src ) { return ( @@ -97,6 +112,9 @@ function AudioEdit( { } function getBlockControls( open ) { + if ( isCaptionSelected ) { + return null; + } return ( @@ -128,23 +146,6 @@ function AudioEdit( { { isUploadInProgress && 'Uploading...' } { isUploadFailed && 'ERROR' } - { ( ! RichText.isEmpty( caption ) || - isSelected ) && ( - - setAttributes( { caption: value } ) - } - inlineToolbar - __unstableOnSplitAtEnd={ () => - insertBlocksAfter( - createBlock( 'core/paragraph' ) - ) - } - /> - ) } ); } } @@ -153,46 +154,70 @@ function AudioEdit( { } return ( - <> - - - - - - setAttributes( { - preload: value || undefined, - } ) - } - options={ [ - { value: '', label: __( 'Browser default' ) }, - { value: 'auto', label: __( 'Auto' ) }, - { value: 'metadata', label: __( 'Metadata' ) }, - { value: 'none', label: __( 'None' ) }, - ] } - /> - - - { - return getBlockUI( open, getMediaOptions ); - } } - /> - + + + + + + + + setAttributes( { + preload: value || undefined, + } ) + } + options={ [ + { value: '', label: __( 'Browser default' ) }, + { value: 'auto', label: __( 'Auto' ) }, + { value: 'metadata', label: __( 'Metadata' ) }, + { value: 'none', label: __( 'None' ) }, + ] } + /> + + + { + return getBlockUI( open, getMediaOptions ); + } } + /> + + isEmpty( caption ) + ? /* translators: accessibility text. Empty Audio caption. */ + __( 'Audio caption. Empty' ) + : sprintf( + /* translators: accessibility text. %s: Audio caption. */ + __( 'Audio caption. %s' ), + caption + ) + } + clientId={ clientId } + isSelected={ isCaptionSelected } + onFocus={ onFocusCaption } + onBlur={ onBlur } + insertBlocksAfter={ insertBlocksAfter } + /> + + ); } export default withNotices( AudioEdit ); From d433e9ae3ea797dc0fd8c9a1d41d0bfb88e0bb5e Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Wed, 16 Dec 2020 16:27:13 +0100 Subject: [PATCH 2/4] Move isCaptionSelected check --- packages/block-library/src/audio/edit.native.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 32a2aca34f812..99b3b7f5c9d58 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -112,9 +112,6 @@ function AudioEdit( { } function getBlockControls( open ) { - if ( isCaptionSelected ) { - return null; - } return ( @@ -139,7 +136,7 @@ function AudioEdit( { renderContent={ ( { isUploadInProgress, isUploadFailed } ) => { return ( - { getBlockControls( open ) } + { !isCaptionSelected && getBlockControls( open ) } { getMediaOptions() } ⏯ Audio Player goes here.{ ' ' } From a88bd3ce02aba7296666c30540013af1776d226e Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Wed, 16 Dec 2020 17:03:09 +0100 Subject: [PATCH 3/4] Remove ineffective flex:1 from View --- packages/block-library/src/audio/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 99b3b7f5c9d58..4278f14e70dbf 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -156,7 +156,7 @@ function AudioEdit( { onPress={ onAudioPress } disabled={ ! isSelected } > - + Date: Wed, 16 Dec 2020 17:06:11 +0100 Subject: [PATCH 4/4] Fix lint error --- packages/block-library/src/audio/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 4278f14e70dbf..3e66485f93699 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -136,7 +136,7 @@ function AudioEdit( { renderContent={ ( { isUploadInProgress, isUploadFailed } ) => { return ( - { !isCaptionSelected && getBlockControls( open ) } + { ! isCaptionSelected && getBlockControls( open ) } { getMediaOptions() } ⏯ Audio Player goes here.{ ' ' }