From 56a3053973aa329b2870deca8d9544391ff30080 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Thu, 25 Jul 2024 12:27:47 -0400
Subject: [PATCH] fix: Avoid unsupported Gallery MenuGroup usage

The `MenuGroup` and `MenuItem` components are currently undefined for
the native mobile editor. Therefore, we cannot render them in code
shared between web and native without platform conditionals. Ideally, we
add proper support for the native platform to avoid these conditionals,
and their complexity and bundle size increase.
---
 packages/block-library/src/gallery/edit.js    | 88 +++++++++++--------
 .../src/gallery/test/index.native.js          |  7 +-
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index a69fcb040db4e1..e82d6d7a7df733 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -582,6 +582,17 @@ function GalleryEdit( props ) {
 							size="__unstable-large"
 						/>
 					) }
+					{ Platform.isNative ? (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link to' ) }
+							value={ linkTo }
+							onChange={ setLinkTo }
+							options={ linkOptions }
+							hideCancelButton
+							size="__unstable-large"
+						/>
+					) : null }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Crop images to fit' ) }
@@ -615,43 +626,46 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<BlockControls group="block">
-				<ToolbarDropdownMenu
-					icon={ linkIcon }
-					label={ __( 'Link To' ) }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup className="blocks-gallery__link-to-control">
-							{ linkOptions.map( ( linkItem ) => {
-								const isOptionSelected =
-									linkTo === linkItem.value;
-								return (
-									<MenuItem
-										key={ linkItem.value }
-										isSelected={ isOptionSelected }
-										className={ clsx(
-											'components-dropdown-menu__menu-item',
-											{
-												'is-active': isOptionSelected,
-											}
-										) }
-										iconPosition="left"
-										icon={ linkItem.icon }
-										onClick={ () => {
-											setLinkTo( linkItem.value );
-											onClose();
-										} }
-										role="menuitemradio"
-										info={ linkItem.infoText ?? false }
-									>
-										{ linkItem.label }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-					) }
-				</ToolbarDropdownMenu>
-			</BlockControls>
+			{ Platform.isWeb ? (
+				<BlockControls group="block">
+					<ToolbarDropdownMenu
+						icon={ linkIcon }
+						label={ __( 'Link To' ) }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup className="blocks-gallery__link-to-control">
+								{ linkOptions.map( ( linkItem ) => {
+									const isOptionSelected =
+										linkTo === linkItem.value;
+									return (
+										<MenuItem
+											key={ linkItem.value }
+											isSelected={ isOptionSelected }
+											className={ clsx(
+												'components-dropdown-menu__menu-item',
+												{
+													'is-active':
+														isOptionSelected,
+												}
+											) }
+											iconPosition="left"
+											icon={ linkItem.icon }
+											onClick={ () => {
+												setLinkTo( linkItem.value );
+												onClose();
+											} }
+											role="menuitemradio"
+											info={ linkItem.infoText ?? false }
+										>
+											{ linkItem.label }
+										</MenuItem>
+									);
+								} ) }
+							</MenuGroup>
+						) }
+					</ToolbarDropdownMenu>
+				</BlockControls>
+			) : null }
 			{ Platform.isWeb && (
 				<>
 					{ ! multiGallerySelection && (
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
index 48e6a3b1e8ccae..370bac000b373b 100644
--- a/packages/block-library/src/gallery/test/index.native.js
+++ b/packages/block-library/src/gallery/test/index.native.js
@@ -610,10 +610,11 @@ describe( 'Gallery block', () => {
 		<!-- /wp:gallery -->`,
 			numberOfItems: 2,
 		} );
-		const { getByLabelText, getByText } = screen;
+		const { getByText } = screen;
 
-		fireEvent.press( getBlock( screen, 'Gallery' ) );
-		fireEvent.press( getByLabelText( 'Link To' ) );
+		// Set "Link to" setting via Gallery block settings
+		await openBlockSettings( screen );
+		fireEvent.press( getByText( 'Link to' ) );
 		fireEvent.press( getByText( 'Link images to media files' ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();