[RNMobile] Do not include MediaReplaceFlow component in native Galler…

…y toolbar (#52966) * Do not display MediaReplaceFlow component in native Gallery block * Add integration test to hide MediaReplaceFlow component in Gallery block * Update CHANGELOG * Update test selector syntax Co-authored-by: David Calhoun <github@davidcalhoun.me> --------- Co-authored-by: David Calhoun <github@davidcalhoun.me>
WordPress · Jul 26, 2023 · 4404be9 · 4404be9
1 parent 1ca7922
commit 4404be9
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.native.js b/packages/block-editor/src/components/media-replace-flow/index.native.js
@@ -1,3 +1,12 @@
-// MediaReplaceFlow component is not yet implemented in the native version,
-// so we return an empty component instead.
-export default () => null;
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+// MediaReplaceFlow component is not yet implemented in the native version.
+// For testing purposes, we are using an empty View component with a testID prop.
+const MediaReplaceFlow = () => {
+	return <View testID="media-replace-flow" />;
+};
+
+export default MediaReplaceFlow;
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -635,25 +635,27 @@ function GalleryEdit( props ) {
 					/>
 				) }
 			</BlockControls>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*"
-					handleUpload={ false }
-					onSelect={ updateImages }
-					name={ __( 'Add' ) }
-					multiple={ true }
-					mediaIds={ images
-						.filter( ( image ) => image.id )
-						.map( ( image ) => image.id ) }
-					addToGallery={ hasImageIds }
-				/>
-			</BlockControls>
 			{ Platform.isWeb && (
-				<GapStyles
-					blockGap={ attributes.style?.spacing?.blockGap }
-					clientId={ clientId }
-				/>
+				<>
+					<BlockControls group="other">
+						<MediaReplaceFlow
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							accept="image/*"
+							handleUpload={ false }
+							onSelect={ updateImages }
+							name={ __( 'Add' ) }
+							multiple={ true }
+							mediaIds={ images
+								.filter( ( image ) => image.id )
+								.map( ( image ) => image.id ) }
+							addToGallery={ hasImageIds }
+						/>
+					</BlockControls>
+					<GapStyles
+						blockGap={ attributes.style?.spacing?.blockGap }
+						clientId={ clientId }
+					/>
+				</>
 			) }
 			<Gallery
 				{ ...props }

diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
@@ -622,6 +622,20 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'does not display MediaReplaceFlow component within the block toolbar', async () => {
+		const screen = await initializeWithGalleryBlock( {
+			numberOfItems: 3,
+			media,
+		} );
+		const { queryByTestId } = screen;
+
+		fireEvent.press( getBlock( screen, 'Gallery' ) );
+
+		// Expect the native MediaReplaceFlow component to not be present in the block toolbar
+		const mediaReplaceFlow = queryByTestId( 'media-replace-flow' );
+		expect( mediaReplaceFlow ).toBeNull();
+	} );
+
 	// Test cases related to TC013 - Settings - Columns
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc013
 	describe( 'Columns setting', () => {

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Remove visual gap in mobile toolbar when a Gallery block is selected [#52966]
 
 ## 1.100.1
 -   [**] Add WP hook for registering non-core blocks [#52791]