[RNMobile] Refactor: Simplify media flow redux migration

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

@@ -43,6 +43,15 @@ import { Platform } from '@wordpress/element';
  *                                 text value. See `wp.richText.create`.
  */
 
+/**
+ * Last block selected object.
+ *
+ * @typedef {Object} WPLastBlockInserted
+ *
+ * @property {string}   clientId	Block client ID.
+ * @property {string}   source      The source from where it was inserted.
+ */
+
 // Module constants
 const MILLISECONDS_PER_HOUR = 3600 * 1000;
 const MILLISECONDS_PER_DAY = 24 * 3600 * 1000;
@@ -2095,3 +2104,13 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 export function wasBlockJustInserted( state, clientId ) {
 	return state.lastBlockInserted.clientId === clientId;
 }
+
+/**
+ * Returns the last block inserted. If multiple blocks were inserted it returns the first item.
+ *
+ * @param {Object} state Global application state.
+ * @return {?WPLastBlockInserted} Last inserted block.
+ */
+export function getLastBlockInserted( state ) {
+	return state.lastBlockInserted;
+}

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,68 @@ function GalleryEdit( props ) {
 		blockEditorStore
 	);
 
+	const {
+		imageSizes,
+		mediaUpload,
+		getMedia,
+		wasBlockJustInserted,
+	} = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		const lastBlockInserted = select(
+			blockEditorStore
+		).getLastBlockInserted();
+
+		return {
+			imageSizes: settings.imageSizes,
+			mediaUpload: settings.mediaUpload,
+			getMedia: select( coreStore ).getMedia,
+			wasBlockJustInserted:
+				lastBlockInserted.clientId === clientId &&
+				lastBlockInserted.source === '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 +404,7 @@ function GalleryEdit( props ) {
 			notices={ hasImages ? undefined : noticeUI }
 			onFocus={ onFocus }
 			autoOpenMediaUpload={
-				! hasImages && isSelected && wasBlockJustInserted()
+				! hasImages && isSelected && wasBlockJustInserted
 			}
 		/>
 	);
@@ -417,75 +476,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, getLastBlockInserted } = select(
+			blockEditorStore
+		);
 		const {
 			attributes: { id, url },
 			isSelected,
+			clientId,
 		} = props;
 		const { imageSizes } = getSettings();
 		const isNotFileUrl = id && getProtocol( url ) !== 'file:';
@@ -583,25 +586,16 @@ export default compose( [
 				isNotFileUrl &&
 				url &&
 				! hasQueryArg( url, 'w' ) );
+
+		const lastBlockInserted = getLastBlockInserted();
+		const wasBlockJustInserted =
+			lastBlockInserted.clientId === clientId &&
+			lastBlockInserted.source === 'inserter_menu';
+
 		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,
 		};
 	} ),
 	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,20 +372,16 @@ class VideoEdit extends Component {
 }
 
 export default compose( [
-	withDispatch( ( dispatch, { clientId }, { select } ) => {
+	withSelect( ( select, { clientId } ) => {
+		const { getLastBlockInserted } = select( blockEditorStore );
+
+		const lastBlockInserted = getLastBlockInserted();
+		const wasBlockJustInserted =
+			lastBlockInserted.clientId === clientId &&
+			lastBlockInserted.source === 'inserter_menu';
+
 		return {
-			wasBlockJustInserted() {
-				const { clearLastBlockInserted } = dispatch( blockEditorStore );
-				const { wasBlockJustInserted } = select( blockEditorStore );
-
-				const result = wasBlockJustInserted( clientId );
-
-				if ( result ) {
-					clearLastBlockInserted();
-					return true;
-				}
-				return false;
-			},
+			wasBlockJustInserted,
 		};
 	} ),
 	withPreferredColorScheme,