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`] = ` "