[RNMobile] Image block: Support lightbox option in the link setting

packages/block-editor/src/components/image-link-destinations/index.native.js

@@ -27,6 +27,7 @@ function LinkDestination( {
 	children,
 	isSelected,
 	label,
+	subLabel,
 	onPress,
 	value,
 	valueStyle,
@@ -44,6 +45,7 @@ function LinkDestination( {
 				! isSelected && styles.unselectedOptionIcon,
 			] ) }
 			label={ label }
+			subLabel={ subLabel }
 			leftAlign
 			onPress={ onPress }
 			value={ value }
@@ -64,6 +66,8 @@ function ImageLinkDestinationsScreen( props ) {
 		imageUrl,
 		attachmentPageUrl,
 		linkDestination,
+		showLightboxSetting,
+		lightboxEnabled,
 	} = route.params || {};
 
 	function goToLinkPicker() {
@@ -97,6 +101,14 @@ function ImageLinkDestinationsScreen( props ) {
 		} );
 	};
 
+	const onEnableLightbox = () => {
+		navigation.navigate( blockSettingsScreens.settings, {
+			inputValue: '',
+			text: '',
+			lightboxEnabled: true,
+		} );
+	};
+
 	return (
 		<>
 			<BottomSheet.NavBar>
@@ -107,7 +119,10 @@ function ImageLinkDestinationsScreen( props ) {
 			</BottomSheet.NavBar>
 			<PanelBody>
 				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					isSelected={
+						linkDestination === LINK_DESTINATION_NONE &&
+						( ! showLightboxSetting || ! lightboxEnabled )
+					}
 					label={ __( 'None' ) }
 					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
 				/>
@@ -127,6 +142,16 @@ function ImageLinkDestinationsScreen( props ) {
 						) }
 					/>
 				) }
+				{ showLightboxSetting && (
+					<LinkDestination
+						isSelected={ lightboxEnabled }
+						label={ __( 'Expand on click' ) }
+						subLabel={ __(
+							'Scale the image with a lightbox effect'
+						) }
+						onPress={ onEnableLightbox }
+					/>
+				) }
 				<LinkDestination
 					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
 					label={ __( 'Custom URL' ) }

packages/block-library/src/image/edit.native.js

@@ -7,12 +7,12 @@ import {
 	TouchableWithoutFeedback,
 	View,
 } from 'react-native';
-import { useRoute } from '@react-navigation/native';
+import { useFocusEffect, useRoute } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { Component, useEffect } from '@wordpress/element';
+import { Component, useCallback } from '@wordpress/element';
 import {
 	requestMediaImport,
 	mediaUploadSync,
@@ -70,6 +70,7 @@ import { store as editPostStore } from '@wordpress/edit-post';
  */
 import styles from './styles.scss';
 import { getUpdatedLinkTargetSettings } from './utils';
+import { unlock } from '../lock-unlock';
 
 import {
 	LINK_DESTINATION_NONE,
@@ -91,35 +92,76 @@ function LinkSettings( {
 	image,
 	isLinkSheetVisible,
 	setMappedAttributes,
+	lightboxSetting,
 } ) {
 	const route = useRoute();
-	const { href: url, label, linkDestination, linkTarget, rel } = attributes;
+	const {
+		href: url,
+		label,
+		linkDestination,
+		linkTarget,
+		rel,
+		lightbox,
+	} = attributes;
+
+	const onSetLightbox = useCallback(
+		( enable ) => {
+			if ( enable && ! lightboxSetting?.enabled ) {
+				setMappedAttributes( {
+					lightbox: { enabled: true },
+				} );
+			} else if ( ! enable && lightboxSetting?.enabled ) {
+				setMappedAttributes( {
+					lightbox: { enabled: false },
+				} );
+			} else {
+				setMappedAttributes( {
+					lightbox: undefined,
+				} );
+			}
+		},
+		[ lightboxSetting?.enabled, setMappedAttributes ]
+	);
 
 	// Persist attributes passed from child screen.
-	useEffect( () => {
-		const { inputValue: newUrl } = route.params || {};
+	useFocusEffect(
+		useCallback( () => {
+			if ( ! route.params ) {
+				return;
+			}
 
-		let newLinkDestination;
-		switch ( newUrl ) {
-			case attributes.url:
-				newLinkDestination = LINK_DESTINATION_MEDIA;
-				break;
-			case image?.link:
-				newLinkDestination = LINK_DESTINATION_ATTACHMENT;
-				break;
-			case '':
-				newLinkDestination = LINK_DESTINATION_NONE;
-				break;
-			default:
-				newLinkDestination = LINK_DESTINATION_CUSTOM;
-				break;
-		}
+			const { inputValue: newUrl, lightboxEnabled } = route.params;
+
+			let newLinkDestination;
+			switch ( newUrl ) {
+				case attributes.url:
+					newLinkDestination = LINK_DESTINATION_MEDIA;
+					break;
+				case image?.link:
+					newLinkDestination = LINK_DESTINATION_ATTACHMENT;
+					break;
+				case '':
+					newLinkDestination = LINK_DESTINATION_NONE;
+					break;
+				default:
+					newLinkDestination = LINK_DESTINATION_CUSTOM;
+					break;
+			}
 
-		setMappedAttributes( {
-			url: newUrl,
-			linkDestination: newLinkDestination,
-		} );
-	}, [ route.params?.inputValue ] );
+			onSetLightbox( lightboxEnabled );
+
+			setMappedAttributes( {
+				url: newUrl,
+				linkDestination: newLinkDestination,
+			} );
+		}, [
+			attributes.url,
+			image?.link,
+			onSetLightbox,
+			route.params,
+			setMappedAttributes,
+		] )
+	);
 
 	let valueMask;
 	switch ( linkDestination ) {
@@ -137,6 +179,14 @@ function LinkSettings( {
 			break;
 	}
 
+	const showLightboxSetting =
+		!! lightbox || lightboxSetting?.allowEditing === true;
+	const lightboxEnabled =
+		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
+	if ( showLightboxSetting && lightboxEnabled ) {
+		valueMask = __( 'Expand on click' );
+	}
+
 	const linkSettingsOptions = {
 		url: {
 			valueMask,
@@ -173,6 +223,8 @@ function LinkSettings( {
 							linkDestination: attributes.linkDestination,
 							imageUrl: attributes.url,
 							attachmentPageUrl: image?.link,
+							showLightboxSetting,
+							lightboxEnabled,
 						}
 					);
 				} }
@@ -670,6 +722,7 @@ export class ImageEdit extends Component {
 			featuredImageId,
 			wasBlockJustInserted,
 			shouldUseFastImage,
+			lightboxSetting,
 		} = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
 		const hasImageContext = context
@@ -736,6 +789,7 @@ export class ImageEdit extends Component {
 					image={ this.props.image }
 					isLinkSheetVisible={ this.state.isLinkSheetVisible }
 					setMappedAttributes={ this.setMappedAttributes }
+					lightboxSetting={ lightboxSetting }
 				/>
 				<PanelBody
 					title={ __( 'Featured Image' ) }
@@ -924,6 +978,9 @@ export default compose( [
 				url &&
 				! hasQueryArg( url, 'w' ) );
 		const image = shouldGetMedia ? getMedia( id ) : null;
+		const [ lightboxSetting ] = unlock(
+			select( blockEditorStore )
+		).getBlockSettings( clientId, [ 'lightbox' ] );
 
 		return {
 			image,
@@ -935,6 +992,7 @@ export default compose( [
 				clientId,
 				'inserter_menu'
 			),
+			lightboxSetting,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

packages/block-library/src/image/test/edit.native.js

@@ -144,6 +144,61 @@ describe( 'Image Block', () => {
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
 
+	it( 'enables expand on click when lightbox setting is enabled', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( {
+			initialHtml,
+			withGlobalStyles: true,
+		} );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
+
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://github.com/react-navigation/react-navigation/issues/9701
+		await act( () =>
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
+		);
+		fireEvent.press( screen.getByText( 'None' ) );
+		fireEvent.press( screen.getByText( 'Expand on click' ) );
+
+		const expectedHtml = `<!-- wp:image {"lightbox":{"enabled":true},"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
+
+	it( 'does not show the expand on click option when lightbox setting is disabled', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( {
+			initialHtml,
+			withGlobalStyles: false,
+		} );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
+
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://github.com/react-navigation/react-navigation/issues/9701
+		await act( () =>
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
+		);
+		fireEvent.press( screen.getByText( 'None' ) );
+		expect( screen.queryByText( 'Expand on click' ) ).toBeNull();
+	} );
+
 	it( 'sets link to Custom URL', async () => {
 		const initialHtml = `
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->

packages/components/src/index.native.js

@@ -138,8 +138,8 @@ export {
 	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
 export {
+	getDefaultGlobalStyles,
 	getGlobalStyles,
-	getColorsAndGradients,
 	useMobileGlobalStylesColors,
 	useEditorColorScheme,
 } from './mobile/global-styles-context/utils';

packages/components/src/mobile/global-styles-context/utils.native.js

@@ -399,7 +399,7 @@ export function useMobileGlobalStylesColors( type = 'colors' ) {
 		: defaultPalette;
 }
 
-export function getColorsAndGradients(
+export function getDefaultGlobalStyles(
 	defaultEditorColors = [],
 	defaultEditorGradients = [],
 	rawFeatures
@@ -425,6 +425,7 @@ export function getColorsAndGradients(
 				defaultPalette: defaultEditorColors?.length > 0,
 				defaultGradients: defaultEditorGradients?.length > 0,
 			},
+			blocks: features?.blocks,
 		},
 	};
 }
@@ -467,6 +468,7 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 				customLineHeight: features?.custom?.[ 'line-height' ],
 			},
 			spacing: features?.spacing,
+			blocks: features?.blocks,
 		},
 		__experimentalGlobalStylesBaseStyles: globalStyles,
 	};

packages/editor/src/components/provider/index.native.js

@@ -35,7 +35,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components';
+import { getDefaultGlobalStyles, getGlobalStyles } from '@wordpress/components';
 import { NEW_BLOCK_TYPES } from '@wordpress/block-library';
 import { __ } from '@wordpress/i18n';
 
@@ -106,7 +106,7 @@ class NativeEditorProvider extends Component {
 
 		updateEditorSettings( {
 			capabilities,
-			...this.getThemeColors( this.props ),
+			...this.getThemeSettings( this.props ),
 			locale,
 			hostAppNamespace,
 		} );
@@ -171,7 +171,7 @@ class NativeEditorProvider extends Component {
 							galleryWithImageBlocks;
 					}
 					updateEditorSettings(
-						this.getThemeColors( editorSettings )
+						this.getThemeSettings( editorSettings )
 					);
 				}
 			);
@@ -262,14 +262,14 @@ class NativeEditorProvider extends Component {
 		}
 	}
 
-	getThemeColors( { rawStyles, rawFeatures } ) {
+	getThemeSettings( { rawStyles, rawFeatures } ) {
 		const { defaultEditorColors, defaultEditorGradients } = this.props;
 
 		if ( rawStyles && rawFeatures ) {
 			return getGlobalStyles( rawStyles, rawFeatures );
 		}
 
-		return getColorsAndGradients(
+		return getDefaultGlobalStyles(
 			defaultEditorColors,
 			defaultEditorGradients,
 			rawFeatures