Add lightbox option in gallery block link control

packages/block-library/src/gallery/constants.js

@@ -1,5 +1,6 @@
 export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_LIGHTBOX = 'lightbox';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
 export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';

packages/block-library/src/gallery/edit.js

@@ -27,6 +27,7 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 	MediaReplaceFlow,
+	useSettings,
 } from '@wordpress/block-editor';
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -41,6 +42,7 @@ import {
 	customLink,
 	image as imageIcon,
 	linkOff,
+	fullscreen,
 } from '@wordpress/icons';
 
 /**
@@ -58,14 +60,15 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_LIGHTBOX,
 } from './constants';
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
 import GapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
-const linkOptions = [
+let linkOptions = [
 	{
 		icon: customLink,
 		label: __( 'Link images to attachment pages' ),
@@ -78,6 +81,13 @@ const linkOptions = [
 		value: LINK_DESTINATION_MEDIA,
 		noticeText: __( 'Media Files' ),
 	},
+	{
+		icon: fullscreen,
+		label: __( 'Expand on click' ),
+		value: LINK_DESTINATION_LIGHTBOX,
+		noticeText: __( 'Lightbox effect' ),
+		infoText: __( 'Scales the image with a lightbox effect' ),
+	},
 	{
 		icon: linkOff,
 		label: _x( 'None', 'Media item link option' ),
@@ -110,6 +120,20 @@ function GalleryEdit( props ) {
 		onFocus,
 	} = props;
 
+	const [ blockSetting ] = useSettings( 'blocks' );
+
+	const lightboxSetting = blockSetting.hasOwnProperty( 'core/image' )
+		? blockSetting[ 'core/image' ]?.lightbox
+		: false;
+
+	useEffect( () => {
+		if ( ! lightboxSetting?.allowEditing ) {
+			linkOptions = linkOptions.filter(
+				( option ) => option.value !== LINK_DESTINATION_LIGHTBOX
+			);
+		}
+	}, [ lightboxSetting?.allowEditing ] );
+
 	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
 		attributes;
 
@@ -366,10 +390,34 @@ function GalleryEdit( props ) {
 			const image = block.attributes.id
 				? imageData.find( ( { id } ) => id === block.attributes.id )
 				: null;
-			changedAttributes[ block.clientId ] = getHrefAndDestination(
-				image,
-				value
-			);
+
+			let hrefAndDestination = getHrefAndDestination( image, value );
+
+			if (
+				value === LINK_DESTINATION_LIGHTBOX &&
+				! lightboxSetting?.enabled
+			) {
+				hrefAndDestination = {
+					...hrefAndDestination,
+					lightbox: { enabled: true },
+				};
+			} else if (
+				value !== LINK_DESTINATION_NONE &&
+				value !== LINK_DESTINATION_LIGHTBOX &&
+				lightboxSetting?.enabled
+			) {
+				hrefAndDestination = {
+					...hrefAndDestination,
+					lightbox: { enabled: false },
+				};
+			} else {
+				hrefAndDestination = {
+					...hrefAndDestination,
+					lightbox: undefined,
+				};
+			}
+
+			changedAttributes[ block.clientId ] = hrefAndDestination;
 		} );
 		updateBlockAttributes( blocks, changedAttributes, true );
 		const linkToText = [ ...linkOptions ].find(
@@ -622,9 +670,12 @@ function GalleryEdit( props ) {
 					<ToolbarDropdownMenu
 						icon={ linkIcon }
 						label={ __( 'Link' ) }
+						toggleProps={ {
+							isPressed: hasLinkTo,
+						} }
 					>
 						{ ( { onClose } ) => (
-							<MenuGroup>
+							<MenuGroup className="blocks-gallery__link-to-control">
 								{ linkOptions.map( ( linkItem ) => {
 									const isOptionSelected =
 										linkTo === linkItem.value;
@@ -646,6 +697,7 @@ function GalleryEdit( props ) {
 												onClose();
 											} }
 											role="menuitemradio"
+											info={ linkItem.infoText ?? false }
 										>
 											{ linkItem.label }
 										</MenuItem>

packages/block-library/src/gallery/editor.scss

@@ -198,3 +198,11 @@
 	justify-content: flex-end;
 	gap: $grid-unit-15;
 }
+
+.blocks-gallery__link-to-control {
+	.components-menu-item__item {
+		.components-menu-item__info {
+			white-space: nowrap;
+		}
+	}
+}

packages/block-library/src/gallery/utils.js

@@ -7,6 +7,7 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA_WP_CORE,
 	LINK_DESTINATION_ATTACHMENT_WP_CORE,
+	LINK_DESTINATION_LIGHTBOX,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -43,6 +44,12 @@ export function getHrefAndDestination(
 				href: image?.link,
 				linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT,
 			};
+		case LINK_DESTINATION_LIGHTBOX:
+			return {
+				href: undefined,
+				lightbox: { enabled: true },
+				linkDestination: IMAGE_LINK_DESTINATION_NONE,
+			};
 		case LINK_DESTINATION_NONE:
 			return {
 				href: undefined,