Move gallery link controls to the block toolbar (#62762)

* Move link dropdown to toolbar in gallery block * Update e2e test for gallery block's setting * Fix e2e test for gallery block images link setting * Fix unit test * Synced with trunk * Added ToolbarDropdownMenu component instead of DropdownMenu * remove remove extra padding around link icon * Remove unused components * Revert "Synced with trunk" This reverts commit 0c7a78b. * Improve snackbar notices for gallery block link control select * Add constant for lightbox option in link control for gallery block * Update getHrefAndDestination function to handle Link control value change for lightbox option * Add lightbox option in link control of gallery block * Add info text for lightbox option in link control for gallery block * Set info text for lightbox option in single line * reverting expand of click option changes * add change to resolve conflict * 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. * removing lightbox changes from edit component of gallery block * Removing unneccessory class * Update link control lable in gallery block * Update label in unit test * Update text in snapshot --------- Unlinked contributors: randomburner, RCNeil. Co-authored-by: akasunil <[email protected]> Co-authored-by: dcalhoun <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: madhusudhand <[email protected]> Co-authored-by: artemiomorales <[email protected]> Co-authored-by: paaljoachim <[email protected]> Co-authored-by: luisherranz <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Jul 30, 2024 · e744018 · e744018
1 parent dba69d0
commit e744018
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 19 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -14,6 +14,9 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
+	MenuGroup,
+	MenuItem,
+	ToolbarDropdownMenu,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -33,6 +36,12 @@ import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
+import {
+	link as linkIcon,
+	customLink,
+	image as imageIcon,
+	linkOff,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -57,11 +66,23 @@ import GapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
-	{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
-	{ value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) },
 	{
-		value: LINK_DESTINATION_NONE,
+		icon: customLink,
+		label: __( 'Link images to attachment pages' ),
+		value: LINK_DESTINATION_ATTACHMENT,
+		noticeText: __( 'Attachment Pages' ),
+	},
+	{
+		icon: imageIcon,
+		label: __( 'Link images to media files' ),
+		value: LINK_DESTINATION_MEDIA,
+		noticeText: __( 'Media Files' ),
+	},
+	{
+		icon: linkOff,
 		label: _x( 'None', 'Media item link option' ),
+		value: LINK_DESTINATION_NONE,
+		noticeText: __( 'None' ),
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -359,7 +380,7 @@ function GalleryEdit( props ) {
 			sprintf(
 				/* translators: %s: image size settings */
 				__( 'All gallery image links updated to: %s' ),
-				linkToText.label
+				linkToText.noticeText
 			),
 			{
 				id: 'gallery-attributes-linkTo',
@@ -552,15 +573,17 @@ function GalleryEdit( props ) {
 							size="__unstable-large"
 						/>
 					) }
-					<SelectControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ setLinkTo }
-						options={ linkOptions }
-						hideCancelButton
-						size="__unstable-large"
-					/>
+					{ Platform.isNative ? (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link' ) }
+							value={ linkTo }
+							onChange={ setLinkTo }
+							options={ linkOptions }
+							hideCancelButton
+							size="__unstable-large"
+						/>
+					) : null }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Crop images to fit' ) }
@@ -594,6 +617,45 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			{ Platform.isWeb ? (
+				<BlockControls group="block">
+					<ToolbarDropdownMenu
+						icon={ linkIcon }
+						label={ __( 'Link' ) }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								{ 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"
+										>
+											{ linkItem.label }
+										</MenuItem>
+									);
+								} ) }
+							</MenuGroup>
+						) }
+					</ToolbarDropdownMenu>
+				</BlockControls>
+			) : null }
 			{ Platform.isWeb && (
 				<>
 					{ ! multiGallerySelection && (

diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
@@ -82,7 +82,7 @@ exports[`Gallery block inserts block 1`] = `
 <!-- /wp:gallery -->"
 `;
 
-exports[`Gallery block overrides "Link to" setting of gallery items 1`] = `
+exports[`Gallery block overrides "Link" setting of gallery items 1`] = `
 "<!-- wp:gallery {"linkTo":"media"} -->
 <figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1,"linkDestination":"media"} -->
 <figure class="wp-block-image"><img src="file:///local-image-1.jpeg" alt="" class="wp-image-1"/></figure>

diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
@@ -594,9 +594,9 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	// Test case related to TC012 - Settings - Link to
+	// Test case related to TC012 - Settings - Link
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc012
-	it( 'overrides "Link to" setting of gallery items', async () => {
+	it( 'overrides "Link" setting of gallery items', async () => {
 		// Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute
 		const screen = await initializeWithGalleryBlock( {
 			html: `<!-- wp:gallery {"linkTo":"none"} -->
@@ -612,10 +612,10 @@ describe( 'Gallery block', () => {
 		} );
 		const { getByText } = screen;
 
-		// Set "Link to" setting via Gallery block settings
+		// Set "Link" setting via Gallery block settings
 		await openBlockSettings( screen );
-		fireEvent.press( getByText( 'Link to' ) );
-		fireEvent.press( getByText( 'Media File' ) );
+		fireEvent.press( getByText( 'Link' ) );
+		fireEvent.press( getByText( 'Link images to media files' ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );