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 (
+
+ );
+ } ) }
+
+ ) }
+
+
+ ) : 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`] = `
"