[RNMobile] Simplify media insertion flow - Part 3 component integrati…

…on (#29548) * Track the clientId of the block that is inserted. * implemented auto opening utilizing last block inserted from the store * added dismissal support for the auto opening picker to the UI tests. * Updated Dismiss button in closePicker function to Cancel
WordPress · Mar 16, 2021 · 232a0cd · 232a0cd
1 parent 82a8c03
commit 232a0cd
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -36,6 +36,8 @@ function InserterMenu( {
 		insertDefaultBlock,
 	} = useDispatch( blockEditorStore );
 
+	const { addLastBlockInserted } = useDispatch( 'core/editor' );
+
 	const {
 		items,
 		destinationRootClientId,
@@ -110,6 +112,8 @@ function InserterMenu( {
 				innerBlocks
 			);
 
+			addLastBlockInserted( newBlock.clientId );
+
 			insertBlock( newBlock, insertionIndex, destinationRootClientId );
 		},
 		[ insertBlock, destinationRootClientId, insertionIndex ]

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -34,7 +34,7 @@ import {
 import { Platform, useEffect, useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { useDispatch, withSelect } from '@wordpress/data';
+import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
 import { store as coreStore } from '@wordpress/core-data';
@@ -81,6 +81,7 @@ function GalleryEdit( props ) {
 		imageSizes,
 		resizedImages,
 		onFocus,
+		wasBlockJustInserted,
 	} = props;
 	const {
 		columns = defaultColumnsNumber( attributes ),
@@ -343,6 +344,9 @@ function GalleryEdit( props ) {
 			onError={ onUploadError }
 			notices={ hasImages ? undefined : noticeUI }
 			onFocus={ onFocus }
+			autoOpenMediaUpload={
+				! hasImages && isSelected && wasBlockJustInserted()
+			}
 		/>
 	);
 
@@ -466,6 +470,22 @@ export default compose( [
 			resizedImages,
 		};
 	} ),
+	withDispatch( ( dispatch, { clientId }, { select } ) => {
+		return {
+			wasBlockJustInserted() {
+				const { clearLastBlockInserted } = dispatch( 'core/editor' );
+				const { wasBlockJustInserted } = select( 'core/editor' );
+
+				const result = wasBlockJustInserted( clientId );
+
+				if ( result ) {
+					clearLastBlockInserted();
+					return true;
+				}
+				return false;
+			},
+		};
+	} ),
 	withNotices,
 	withViewportMatch( { isNarrow: '< small' } ),
 ] )( GalleryEdit );
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -42,7 +42,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getProtocol, hasQueryArg } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { withSelect, withDispatch } from '@wordpress/data';
 import {
 	image as placeholderIcon,
 	textColor,
@@ -399,7 +399,13 @@ export class ImageEdit extends Component {
 
 	render() {
 		const { isCaptionSelected } = this.state;
-		const { attributes, isSelected, image, clientId } = this.props;
+		const {
+			attributes,
+			isSelected,
+			image,
+			clientId,
+			wasBlockJustInserted,
+		} = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
 
 		const sizeOptionsValid = find( this.sizeOptions, [
@@ -461,6 +467,9 @@ export class ImageEdit extends Component {
 						onSelect={ this.onSelectMediaUploadOption }
 						icon={ this.getPlaceholderIcon() }
 						onFocus={ this.props.onFocus }
+						autoOpenMediaUpload={
+							isSelected && ! url && wasBlockJustInserted()
+						}
 					/>
 				</View>
 			);
@@ -579,5 +588,21 @@ export default compose( [
 			imageSizes,
 		};
 	} ),
+	withDispatch( ( dispatch, { clientId }, { select } ) => {
+		return {
+			wasBlockJustInserted() {
+				const { clearLastBlockInserted } = dispatch( 'core/editor' );
+				const { wasBlockJustInserted } = select( 'core/editor' );
+
+				const result = wasBlockJustInserted( clientId );
+
+				if ( result ) {
+					clearLastBlockInserted();
+					return true;
+				}
+				return false;
+			},
+		};
+	} ),
 	withPreferredColorScheme,
 ] )( ImageEdit );
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -19,7 +19,7 @@ import {
 	ToolbarGroup,
 	PanelBody,
 } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { withPreferredColorScheme, compose } from '@wordpress/compose';
 import {
 	BlockCaption,
 	MediaPlaceholder,
@@ -35,6 +35,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { video as SvgIcon, replace } from '@wordpress/icons';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -189,7 +190,12 @@ class VideoEdit extends Component {
 	}
 
 	render() {
-		const { setAttributes, attributes, isSelected } = this.props;
+		const {
+			setAttributes,
+			attributes,
+			isSelected,
+			wasBlockJustInserted,
+		} = this.props;
 		const { id, src } = attributes;
 		const { videoContainerHeight } = this.state;
 
@@ -221,6 +227,9 @@ class VideoEdit extends Component {
 						onSelect={ this.onSelectMediaUploadOption }
 						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
 						onFocus={ this.props.onFocus }
+						autoOpenMediaUpload={
+							isSelected && ! src && wasBlockJustInserted()
+						}
 					/>
 				</View>
 			);
@@ -361,4 +370,22 @@ class VideoEdit extends Component {
 	}
 }
 
-export default withPreferredColorScheme( VideoEdit );
+export default compose( [
+	withDispatch( ( dispatch, { clientId }, { select } ) => {
+		return {
+			wasBlockJustInserted() {
+				const { clearLastBlockInserted } = dispatch( 'core/editor' );
+				const { wasBlockJustInserted } = select( 'core/editor' );
+
+				const result = wasBlockJustInserted( clientId );
+
+				if ( result ) {
+					clearLastBlockInserted();
+					return true;
+				}
+				return false;
+			},
+		};
+	} ),
+	withPreferredColorScheme,
+] )( VideoEdit );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-gallery.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-gallery.test.js
@@ -6,6 +6,9 @@ import { blockNames } from './pages/editor-page';
 describe( 'Gutenberg Editor Gallery Block tests', () => {
 	it( 'should be able to add a gallery block', async () => {
 		await editorPage.addNewBlock( blockNames.gallery );
+		await editorPage.driver.sleep( 1000 );
+		await editorPage.closePicker();
+
 		const galleryBlock = await editorPage.getBlockAtPosition(
 			blockNames.gallery
 		);

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js
@@ -8,6 +8,9 @@ import testData from './helpers/test-data';
 describe( 'Gutenberg Editor Image Block tests', () => {
 	it( 'should be able to add an image block', async () => {
 		await editorPage.addNewBlock( blockNames.image );
+		await editorPage.driver.sleep( 1000 );
+		await editorPage.closePicker();
+
 		let imageBlock = await editorPage.getBlockAtPosition(
 			blockNames.image
 		);

diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -526,6 +526,17 @@ class EditorPage {
 		return await typeString( this.driver, textViewElement, text, clear );
 	}
 
+	async closePicker() {
+		if ( isAndroid() ) {
+			await swipeDown( this.driver );
+		} else {
+			const cancelButton = await this.driver.elementByAccessibilityId(
+				'Cancel'
+			);
+			await cancelButton.click();
+		}
+	}
+
 	// =============================
 	// Unsupported Block functions
 	// =============================