[RNMobile] File and Audio block simplify media flow (#31025)

* implemented auto opening of file block media upload picker. * implemented auto opening of audio block media upload picker. * removed redundant src and url checks from video and image. * Dismisses the auto opened bottom sheets of the file and audio block. * Added changelog entry for file and audio block auto opening. * Added PR number to changelog. * removed return from useSelect hook
WordPress · Apr 23, 2021 · 0037ab3 · 0037ab3
1 parent 928e6a4
commit 0037ab3
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 5 deletions.
diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js
@@ -24,11 +24,12 @@ import {
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { audio as icon, replace } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -55,6 +56,13 @@ function AudioEdit( {
 		setAttributes( { id: mediaId, src: mediaUrl } );
 	};
 
+	const { wasBlockJustInserted } = useSelect( ( select ) => ( {
+		wasBlockJustInserted: select( blockEditorStore ).wasBlockJustInserted(
+			clientId,
+			'inserter_menu'
+		),
+	} ) );
+
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const onError = () => {
@@ -104,6 +112,7 @@ function AudioEdit( {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ attributes }
 					onFocus={ onFocus }
+					autoOpenMediaUpload={ isSelected && wasBlockJustInserted }
 				/>
 			</View>
 		);

diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js
@@ -21,6 +21,7 @@ import {
 	MediaUpload,
 	InspectorControls,
 	MEDIA_TYPE_ANY,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToolbarButton,
@@ -552,7 +553,7 @@ export class FileEdit extends Component {
 	}
 
 	render() {
-		const { attributes } = this.props;
+		const { attributes, wasBlockJustInserted, isSelected } = this.props;
 		const { href } = attributes;
 
 		if ( ! href ) {
@@ -566,6 +567,7 @@ export class FileEdit extends Component {
 					onSelect={ this.onSelectFile }
 					onFocus={ this.props.onFocus }
 					allowedTypes={ [ MEDIA_TYPE_ANY ] }
+					autoOpenMediaUpload={ isSelected && wasBlockJustInserted }
 				/>
 			);
 		}
@@ -585,7 +587,7 @@ export class FileEdit extends Component {
 
 export default compose( [
 	withSelect( ( select, props ) => {
-		const { attributes, isSelected } = props;
+		const { attributes, isSelected, clientId } = props;
 		const { id, href } = attributes;
 		const { isEditorSidebarOpened } = select( 'core/edit-post' );
 		const isNotFileHref = id && getProtocol( href ) !== 'file:';
@@ -594,6 +596,9 @@ export default compose( [
 				? select( coreStore ).getMedia( id )
 				: undefined,
 			isSidebarOpened: isSelected && isEditorSidebarOpened(),
+			wasBlockJustInserted: select(
+				blockEditorStore
+			).wasBlockJustInserted( clientId, 'inserter_menu' ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -499,7 +499,7 @@ export class ImageEdit extends Component {
 						icon={ this.getPlaceholderIcon() }
 						onFocus={ this.props.onFocus }
 						autoOpenMediaUpload={
-							isSelected && ! url && wasBlockJustInserted
+							isSelected && wasBlockJustInserted
 						}
 					/>
 				</View>

diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -229,7 +229,7 @@ class VideoEdit extends Component {
 						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
 						onFocus={ this.props.onFocus }
 						autoOpenMediaUpload={
-							isSelected && ! src && wasBlockJustInserted
+							isSelected && wasBlockJustInserted
 						}
 					/>
 				</View>

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -13,6 +13,8 @@ For each user feature we should also add a importance categorization label  to i
 
 -   [*] Image block: Add a "featured" banner. (Android only) [#30806]
 -   [**] The media upload options of the Image, Video and Gallery block automatically opens when the respective block is inserted. [#29546]
+-   [**] The media upload options of the File and Audio block automatically opens when the respective block is inserted. [#31025]
+
 
 
 ## 1.51.0

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js
@@ -8,6 +8,10 @@ import { isAndroid } from './helpers/utils';
 describe( 'Gutenberg Editor Audio Block tests', () => {
 	it( 'should be able to add an audio block', async () => {
 		await editorPage.addNewBlock( blockNames.audio );
+
+		await editorPage.driver.sleep( 1000 );
+		await editorPage.closePicker();
+
 		const block = await editorPage.getFirstBlockVisible();
 		await expect( block ).toBeTruthy();
 	} );

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js
@@ -8,6 +8,10 @@ import { isAndroid } from './helpers/utils';
 describe( 'Gutenberg Editor File Block tests', () => {
 	it( 'should be able to add a file block', async () => {
 		await editorPage.addNewBlock( blockNames.file );
+
+		await editorPage.driver.sleep( 1000 );
+		await editorPage.closePicker();
+
 		const block = await editorPage.getFirstBlockVisible();
 		await expect( block ).toBeTruthy();
 	} );