Add lightbox option in gallery block link control (WordPress#64014)

* Add link control as toolbar option in gallery

* Add link option constant for lightbox

* Add expand on lick option in link control

* Add class into menugroup component for info text style

* Add styles for info text in link control of popover of gallery block

* Add info text for lightbox option in link control for gallery block

* Add action for lightbox option in gallery block link control

* Show lightbox option only when lightbox UI is enabled

* Disable lightbox when other link option is selected in gallery block

* Remove unneccessory constant

* Conditionally apply the lightbox attribute based on defatult setting

* Fix lightbox default option issue for gallery block on page load

* Highlight link to option in gallery block when selected

* update condition to Highlight link to option

* Fix lightbox attribute issue for default state of linkTo option

* fix: Set empty default `block` settings value (WordPress#64448)

Currently, `__experimentalFeatures` is only partially implemented for
the native mobile editor. Recent changes to the shared Gallery block
component included a reference to this missing key via the `useSettings`
Hook. Setting a default, empty value ensure exceptions are not thrown.

Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org>
Co-authored-by: akasunil <sunil25393@git.wordpress.org>

* Change lightbox option lable and address other feedback

* Move lightbox logic to getHrefAndDestination function

* Remove highlight of LinkTo option in gallery block

* Remove css for info text of lightbox option

* Refactor getHrefAndDestination function to for lightbox additional attributes

---------

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>

Author: 6 people

packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js

@@ -414,6 +414,7 @@ describe( 'getGlobalStyles', () => {
 		expect( globalStyles ).toEqual(
 			expect.objectContaining( {
 				__experimentalFeatures: {
+					blocks: {},
 					color: {
 						palette: RAW_FEATURES.color.palette,
 						gradients,

packages/block-editor/src/components/global-styles/use-global-styles-context.native.js

@@ -410,6 +410,9 @@ export function getColorsAndGradients(
 	return {
 		__experimentalGlobalStylesBaseStyles: null,
 		__experimentalFeatures: {
+			// Set an empty object to avoid errors from shared web components relying
+			// upon block settings. E.g., the Gallery block.
+			blocks: {},
 			color: {
 				...( ! features?.color
 					? {
@@ -455,6 +458,9 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 
 	return {
 		__experimentalFeatures: {
+			// Set an empty object to avoid errors from shared web components relying
+			// upon block settings. E.g., the Gallery block.
+			blocks: {},
 			color: {
 				palette: colors?.palette,
 				gradients,

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

@@ -25,6 +25,7 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 	MediaReplaceFlow,
+	useSettings,
 } from '@wordpress/block-editor';
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -38,6 +39,7 @@ import {
 	customLink,
 	image as imageIcon,
 	linkOff,
+	fullscreen,
 } from '@wordpress/icons';
 
 /**
@@ -55,14 +57,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' ),
@@ -75,6 +78,13 @@ const linkOptions = [
 		value: LINK_DESTINATION_MEDIA,
 		noticeText: __( 'Media Files' ),
 	},
+	{
+		icon: fullscreen,
+		label: __( 'Expand on click' ),
+		value: LINK_DESTINATION_LIGHTBOX,
+		noticeText: __( 'Lightbox effect' ),
+		infoText: __( 'Scale images with a lightbox effect' ),
+	},
 	{
 		icon: linkOff,
 		label: _x( 'None', 'Media item link option' ),
@@ -107,6 +117,14 @@ export default function GalleryEdit( props ) {
 		onFocus,
 	} = props;
 
+	const lightboxSetting = useSettings( 'blocks.core/image.lightbox' )[ 0 ];
+
+	if ( ! lightboxSetting?.allowEditing ) {
+		linkOptions = linkOptions.filter(
+			( option ) => option.value !== LINK_DESTINATION_LIGHTBOX
+		);
+	}
+
 	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
 		attributes;
 
@@ -363,9 +381,13 @@ export default function GalleryEdit( props ) {
 			const image = block.attributes.id
 				? imageData.find( ( { id } ) => id === block.attributes.id )
 				: null;
+
 			changedAttributes[ block.clientId ] = getHrefAndDestination(
 				image,
-				value
+				value,
+				false,
+				block.attributes,
+				lightboxSetting
 			);
 		} );
 		updateBlockAttributes( blocks, changedAttributes, true );
@@ -646,6 +668,7 @@ export default function GalleryEdit( props ) {
 												onClose();
 											} }
 											role="menuitemradio"
+											info={ linkItem.infoText }
 										>
 											{ linkItem.label }
 										</MenuItem>

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,
@@ -20,13 +21,18 @@ import {
  *
  * @param {Object} image              Gallery image.
  * @param {string} galleryDestination Gallery's selected link destination.
- * @param {Object} imageDestination   Image blocks attributes.
+ * @param {Object} imageDestination   Image block link destination attribute.
+ * @param {Object} attributes         Block attributes.
+ * @param {Object} lightboxSetting    Lightbox setting.
+ *
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination(
 	image,
 	galleryDestination,
-	imageDestination
+	imageDestination,
+	attributes,
+	lightboxSetting
 ) {
 	// Gutenberg and WordPress use different constants so if image_default_link_type
 	// option is set we need to map from the WP Core values.
@@ -36,17 +42,32 @@ export function getHrefAndDestination(
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
+				lightbox: lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: false }
+					: undefined,
 			};
 		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,
 				linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT,
+				lightbox: lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: false }
+					: undefined,
+			};
+		case LINK_DESTINATION_LIGHTBOX:
+			return {
+				href: undefined,
+				lightbox: ! lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: true }
+					: undefined,
+				linkDestination: IMAGE_LINK_DESTINATION_NONE,
 			};
 		case LINK_DESTINATION_NONE:
 			return {
 				href: undefined,
 				linkDestination: IMAGE_LINK_DESTINATION_NONE,
+				lightbox: undefined,
 			};
 	}