[RNMobile] Refactor: Simplify media flow redux migration (#30238)

* Add meta argument to insertBlock action

* Add inserter menu source

* Update last block inserted reducer

Instead of using specific actions for tracking the last block inserted, it uses the actions related to the insertion flow.

* Add get last block inserted selector

* Refactor gallery edit component

withSelect and withDispatch logic has been refactored to use useSelect and useDispatch hooks

* Refactor image edit component

wasBlockJustInserted is now calculated with getLastBlockInserted

* Refactor video edit component

wasBlockJustInserted is now calculated with getLastBlockInserted

* Fix reset blocks action in last block inserted reducer

* Add source param to wasBlockJustInserted selector

* Simplify withSelect part of video block

packages/block-editor/src/components/inserter/menu.native.js

@@ -136,7 +136,13 @@ function InserterMenu( {
 
 			addLastBlockInserted( newBlock.clientId );
 
-			insertBlock( newBlock, insertionIndex, destinationRootClientId );
+			insertBlock(
+				newBlock,
+				insertionIndex,
+				destinationRootClientId,
+				true,
+				{ source: 'inserter_menu' }
+			);
 		},
 		[ insertBlock, destinationRootClientId, insertionIndex ]
 	);

packages/block-editor/src/store/actions.js

@@ -538,16 +538,25 @@ export function* moveBlockToPosition(
  * @param {?number} index            Index at which block should be inserted.
  * @param {?string} rootClientId     Optional root client ID of block list on which to insert.
  * @param {?boolean} updateSelection If true block selection will be updated. If false, block selection will not change. Defaults to true.
+ * @param {?Object} meta             Optional Meta values to be passed to the action object.
  *
  * @return {Object} Action object.
  */
 export function insertBlock(
 	block,
 	index,
 	rootClientId,
-	updateSelection = true
+	updateSelection = true,
+	meta
 ) {
-	return insertBlocks( [ block ], index, rootClientId, updateSelection );
+	return insertBlocks(
+		[ block ],
+		index,
+		rootClientId,
+		updateSelection,
+		0,
+		meta
+	);
 }
 
 /**

packages/block-editor/src/store/reducer.js

@@ -1737,10 +1737,16 @@ export function highlightedBlock( state, action ) {
  */
 export function lastBlockInserted( state = {}, action ) {
 	switch ( action.type ) {
-		case 'ADD_LAST_BLOCK_INSERTED':
-			return { ...state, clientId: action.clientId };
+		case 'INSERT_BLOCKS':
+			if ( ! action.updateSelection || ! action.blocks.length ) {
+				return state;
+			}
+
+			const clientId = action.blocks[ 0 ].clientId;
+			const source = action.meta?.source;
 
-		case 'CLEAR_LAST_BLOCK_INSERTED':
+			return { clientId, source };
+		case 'RESET_BLOCKS':
 			return {};
 	}
 	return state;

packages/block-editor/src/store/selectors.js

@@ -2089,9 +2089,14 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
  * Tells if the block with the passed clientId was just inserted.
  *
  * @param {Object} state Global application state.
- * @param {Object} clientId client id of the block.
- * @return {boolean} If the client id exists within the lastBlockInserted state then the block was just inserted.
+ * @param {Object} clientId Client Id of the block.
+ * @param {boolean} source Insertion source of the block.
+ * @return {boolean} True if the block matches the last block inserted from the specified source.
  */
-export function wasBlockJustInserted( state, clientId ) {
-	return state.lastBlockInserted.clientId === clientId;
+export function wasBlockJustInserted( state, clientId, source ) {
+	const { lastBlockInserted } = state;
+	return (
+		lastBlockInserted.clientId === clientId &&
+		lastBlockInserted.source === source
+	);
 }

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, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
 import { store as coreStore } from '@wordpress/core-data';
@@ -74,14 +74,11 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( {
 function GalleryEdit( props ) {
 	const {
 		attributes,
+		clientId,
 		isSelected,
 		noticeUI,
 		noticeOperations,
-		mediaUpload,
-		imageSizes,
-		resizedImages,
 		onFocus,
-		wasBlockJustInserted,
 	} = props;
 	const {
 		columns = defaultColumnsNumber( attributes ),
@@ -96,6 +93,65 @@ function GalleryEdit( props ) {
 		blockEditorStore
 	);
 
+	const {
+		imageSizes,
+		mediaUpload,
+		getMedia,
+		wasBlockJustInserted,
+	} = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+
+		return {
+			imageSizes: settings.imageSizes,
+			mediaUpload: settings.mediaUpload,
+			getMedia: select( coreStore ).getMedia,
+			wasBlockJustInserted: select(
+				blockEditorStore
+			).wasBlockJustInserted( clientId, 'inserter_menu' ),
+		};
+	} );
+
+	const { resizedImages } = useMemo( () => {
+		if ( isSelected ) {
+			return reduce(
+				attributes.ids,
+				( currentResizedImages, id ) => {
+					if ( ! id ) {
+						return currentResizedImages;
+					}
+					const image = getMedia( id );
+					const sizes = reduce(
+						imageSizes,
+						( currentSizes, size ) => {
+							const defaultUrl = get( image, [
+								'sizes',
+								size.slug,
+								'url',
+							] );
+							const mediaDetailsUrl = get( image, [
+								'media_details',
+								'sizes',
+								size.slug,
+								'source_url',
+							] );
+							return {
+								...currentSizes,
+								[ size.slug ]: defaultUrl || mediaDetailsUrl,
+							};
+						},
+						{}
+					);
+					return {
+						...currentResizedImages,
+						[ parseInt( id, 10 ) ]: sizes,
+					};
+				},
+				{}
+			);
+		}
+		return {};
+	}, [ isSelected, attributes.ids, imageSizes ] );
+
 	function setAttributes( newAttrs ) {
 		if ( newAttrs.ids ) {
 			throw new Error(
@@ -345,7 +401,7 @@ function GalleryEdit( props ) {
 			notices={ hasImages ? undefined : noticeUI }
 			onFocus={ onFocus }
 			autoOpenMediaUpload={
-				! hasImages && isSelected && wasBlockJustInserted()
+				! hasImages && isSelected && wasBlockJustInserted
 			}
 		/>
 	);
@@ -417,75 +473,6 @@ function GalleryEdit( props ) {
 }
 
 export default compose( [
-	withSelect( ( select, { attributes: { ids }, isSelected } ) => {
-		const { getMedia } = select( coreStore );
-		const { getSettings } = select( blockEditorStore );
-		const { imageSizes, mediaUpload } = getSettings();
-
-		const resizedImages = useMemo( () => {
-			if ( isSelected ) {
-				return reduce(
-					ids,
-					( currentResizedImages, id ) => {
-						if ( ! id ) {
-							return currentResizedImages;
-						}
-						const image = getMedia( id );
-						const sizes = reduce(
-							imageSizes,
-							( currentSizes, size ) => {
-								const defaultUrl = get( image, [
-									'sizes',
-									size.slug,
-									'url',
-								] );
-								const mediaDetailsUrl = get( image, [
-									'media_details',
-									'sizes',
-									size.slug,
-									'source_url',
-								] );
-								return {
-									...currentSizes,
-									[ size.slug ]:
-										defaultUrl || mediaDetailsUrl,
-								};
-							},
-							{}
-						);
-						return {
-							...currentResizedImages,
-							[ parseInt( id, 10 ) ]: sizes,
-						};
-					},
-					{}
-				);
-			}
-			return {};
-		}, [ isSelected, ids, imageSizes ] );
-
-		return {
-			imageSizes,
-			mediaUpload,
-			resizedImages,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId }, { select } ) => {
-		return {
-			wasBlockJustInserted() {
-				const { clearLastBlockInserted } = dispatch( blockEditorStore );
-				const { wasBlockJustInserted } = select( blockEditorStore );
-
-				const result = wasBlockJustInserted( clientId );
-
-				if ( result ) {
-					clearLastBlockInserted();
-					return true;
-				}
-				return false;
-			},
-		};
-	} ),
 	withNotices,
 	withViewportMatch( { isNarrow: '< small' } ),
 ] )( GalleryEdit );

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, withDispatch } from '@wordpress/data';
+import { withSelect } from '@wordpress/data';
 import {
 	image as placeholderIcon,
 	textColor,
@@ -468,7 +468,7 @@ export class ImageEdit extends Component {
 						icon={ this.getPlaceholderIcon() }
 						onFocus={ this.props.onFocus }
 						autoOpenMediaUpload={
-							isSelected && ! url && wasBlockJustInserted()
+							isSelected && ! url && wasBlockJustInserted
 						}
 					/>
 				</View>
@@ -567,10 +567,13 @@ export class ImageEdit extends Component {
 export default compose( [
 	withSelect( ( select, props ) => {
 		const { getMedia } = select( coreStore );
-		const { getSettings } = select( blockEditorStore );
+		const { getSettings, wasBlockJustInserted } = select(
+			blockEditorStore
+		);
 		const {
 			attributes: { id, url },
 			isSelected,
+			clientId,
 		} = props;
 		const { imageSizes } = getSettings();
 		const isNotFileUrl = id && getProtocol( url ) !== 'file:';
@@ -583,25 +586,14 @@ export default compose( [
 				isNotFileUrl &&
 				url &&
 				! hasQueryArg( url, 'w' ) );
+
 		return {
 			image: shouldGetMedia ? getMedia( id ) : null,
 			imageSizes,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId }, { select } ) => {
-		return {
-			wasBlockJustInserted() {
-				const { clearLastBlockInserted } = dispatch( blockEditorStore );
-				const { wasBlockJustInserted } = select( blockEditorStore );
-
-				const result = wasBlockJustInserted( clientId );
-
-				if ( result ) {
-					clearLastBlockInserted();
-					return true;
-				}
-				return false;
-			},
+			wasBlockJustInserted: wasBlockJustInserted(
+				clientId,
+				'inserter_menu'
+			),
 		};
 	} ),
 	withPreferredColorScheme,

packages/block-library/src/video/edit.native.js

@@ -36,7 +36,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';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -229,7 +229,7 @@ class VideoEdit extends Component {
 						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
 						onFocus={ this.props.onFocus }
 						autoOpenMediaUpload={
-							isSelected && ! src && wasBlockJustInserted()
+							isSelected && ! src && wasBlockJustInserted
 						}
 					/>
 				</View>
@@ -372,21 +372,11 @@ class VideoEdit extends Component {
 }
 
 export default compose( [
-	withDispatch( ( dispatch, { clientId }, { select } ) => {
-		return {
-			wasBlockJustInserted() {
-				const { clearLastBlockInserted } = dispatch( blockEditorStore );
-				const { wasBlockJustInserted } = select( blockEditorStore );
-
-				const result = wasBlockJustInserted( clientId );
-
-				if ( result ) {
-					clearLastBlockInserted();
-					return true;
-				}
-				return false;
-			},
-		};
-	} ),
+	withSelect( ( select, { clientId } ) => ( {
+		wasBlockJustInserted: select( blockEditorStore ).wasBlockJustInserted(
+			clientId,
+			'inserter_menu'
+		),
+	} ) ),
 	withPreferredColorScheme,
 ] )( VideoEdit );