fix: Avoid unsupported Gallery MenuGroup usage (#63953)

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.
WordPress · Jul 26, 2024 · 0bf1cac · 0bf1cac
1 parent 31dcc28
commit 0bf1cac
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 40 deletions.
diff --git 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
@@ -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();