Disable Lightbox UI if link has an image (WordPress#51180)

artemiomorales · Jun 2, 2023 · c4681a2 · c4681a2
1 parent ddc8dd6
commit c4681a2
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/packages/block-editor/src/hooks/behaviors.js b/packages/block-editor/src/hooks/behaviors.js
@@ -18,7 +18,12 @@ import { store as blockEditorStore } from '../store';
  */
 import merge from 'deepmerge';
 
-function BehaviorsControl( { blockName, blockBehaviors, onChange } ) {
+function BehaviorsControl( {
+	blockName,
+	blockBehaviors,
+	onChange,
+	disabled = false,
+} ) {
 	const { settings, themeBehaviors } = useSelect(
 		( select ) => {
 			const { getBehaviors, getSettings } = select( blockEditorStore );
@@ -61,6 +66,10 @@ function BehaviorsControl( { blockName, blockBehaviors, onChange } ) {
 
 	const options = [ noBehaviorsOption, ...behaviorsOptions ];
 
+	const helpText = disabled
+		? __( 'The lightbox behavior is disabled for linked images.' )
+		: __( 'Add behaviors.' );
+
 	return (
 		<InspectorControls group="advanced">
 			<SelectControl
@@ -71,8 +80,9 @@ function BehaviorsControl( { blockName, blockBehaviors, onChange } ) {
 				options={ options }
 				onChange={ onChange }
 				hideCancelButton={ true }
-				help={ __( 'Add behaviors.' ) }
+				help={ helpText }
 				size="__unstable-large"
+				disabled={ disabled }
 			/>
 		</InspectorControls>
 	);
@@ -95,7 +105,9 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 		if ( props.name !== 'core/image' ) {
 			return blockEdit;
 		}
-
+		const blockHasLink =
+			typeof props.attributes?.linkDestination !== 'undefined' &&
+			props.attributes?.linkDestination !== 'none';
 		return (
 			<>
 				{ blockEdit }
@@ -111,6 +123,7 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 							},
 						} );
 					} }
+					disabled={ blockHasLink }
 				/>
 			</>
 		);

diff --git a/test/e2e/specs/editor/various/behaviors.spec.js b/test/e2e/specs/editor/various/behaviors.spec.js
@@ -216,6 +216,43 @@ test.describe( 'Testing behaviors functionality', () => {
 		await select.selectOption( { label: 'No behaviors' } );
 		await expect( select ).toHaveValue( '' );
 	} );
+
+	test( 'Lightbox behavior is disabled if the Image has a link', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+		behaviorUtils,
+	} ) => {
+		// In this theme, the default value for settings.behaviors.blocks.core/image.lightbox is `true`.
+		await requestUtils.activateTheme( 'behaviors-enabled' );
+		await admin.createNewPost();
+		const media = await behaviorUtils.createMedia();
+
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				alt: filename,
+				id: media.id,
+				url: media.source_url,
+				linkDestination: 'custom',
+			},
+		} );
+
+		await editor.openDocumentSettingsSidebar();
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		await editorSettings
+			.getByRole( 'button', { name: 'Advanced' } )
+			.click();
+		const select = editorSettings.getByRole( 'combobox', {
+			name: 'Behavior',
+		} );
+
+		// The behaviors dropdown should be present but disabled.
+		await expect( select ).toBeDisabled();
+	} );
 } );
 
 class BehaviorUtils {