From e744018a96cc3ecd96772c1d951ffed93b801a3c Mon Sep 17 00:00:00 2001 From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com> Date: Tue, 30 Jul 2024 10:08:30 +0530 Subject: [PATCH] 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 0c7a78b8569b436a73f1c8e43f2150a78f68601e. * 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 Co-authored-by: dcalhoun Co-authored-by: t-hamano Co-authored-by: madhusudhand Co-authored-by: artemiomorales Co-authored-by: paaljoachim Co-authored-by: luisherranz Co-authored-by: richtabor --- packages/block-library/src/gallery/edit.js | 88 ++++++++++++++++--- .../test/__snapshots__/index.native.js.snap | 2 +- .../src/gallery/test/index.native.js | 10 +-- 3 files changed, 81 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e853e20f23319c..f2faa40110dd13 100644 --- 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" /> ) } - + { Platform.isNative ? ( + + ) : null } + { Platform.isWeb ? ( + + + { ( { onClose } ) => ( + + { linkOptions.map( ( linkItem ) => { + const isOptionSelected = + linkTo === linkItem.value; + return ( + { + setLinkTo( linkItem.value ); + onClose(); + } } + role="menuitemradio" + > + { linkItem.label } + + ); + } ) } + + ) } + + + ) : 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 index b79bd7c3877c7e..088a7d25282451 100644 --- 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`] = ` " `; -exports[`Gallery block overrides "Link to" setting of gallery items 1`] = ` +exports[`Gallery block overrides "Link" setting of gallery items 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index fd95053bea62c0..f294555e41f2c1 100644 --- 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: ` @@ -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(); } );