Disable behaviors dropdown if image has aspect ratio configured

WordPress · Jul 3, 2023 · c6bda4c · c6bda4c
1 parent afa9979
commit c6bda4c
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 10 deletions.
diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php
@@ -46,6 +46,7 @@ function gutenberg_register_behaviors_support( $block_type ) {
 function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 	$experiments      = get_option( 'gutenberg-experiments' );
 	$link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none';
+	$aspect_ratio     = isset( $block['attrs']['aspectRatio'] ) ? $block['attrs']['aspectRatio'] : 'none';
 	// Get the lightbox setting from the block attributes.
 	if ( isset( $block['attrs']['behaviors']['lightbox'] ) ) {
 		$lightbox_settings = $block['attrs']['behaviors']['lightbox'];
@@ -63,7 +64,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 		return $block_content;
 	}
 
-	if ( ! $lightbox_settings || 'none' !== $link_destination || empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) ) {
+	if ( ! $lightbox_settings || 'none' !== $link_destination || 'none' !== $aspect_ratio || empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) ) {
 		return $block_content;
 	}
 

diff --git a/packages/block-editor/src/hooks/behaviors.js b/packages/block-editor/src/hooks/behaviors.js
@@ -20,7 +20,7 @@ function BehaviorsControl( {
 	blockBehaviors,
 	onChangeBehavior,
 	onChangeAnimation,
-	disabled = false,
+	override = [],
 } ) {
 	const { settings, themeBehaviors } = useSelect(
 		( select ) => {
@@ -89,9 +89,18 @@ function BehaviorsControl( {
 		return null;
 	}
 
-	const helpText = disabled
-		? __( 'The lightbox behavior is disabled for linked images.' )
-		: '';
+	let helpText =
+		override.length > 0
+			? 'The lightbox is disabled for images with the following configured options: '
+			: '';
+	override.forEach( ( element, index ) => {
+		helpText += element;
+		if ( override.length > 1 && index < override.length - 1 ) {
+			helpText += ', ';
+		} else {
+			helpText += '.';
+		}
+	} );
 
 	return (
 		<InspectorControls group="advanced">
@@ -105,7 +114,7 @@ function BehaviorsControl( {
 					hideCancelButton={ true }
 					help={ helpText }
 					size="__unstable-large"
-					disabled={ disabled }
+					disabled={ override.length > 0 ? true : false }
 				/>
 				{ behaviorsValue === 'lightbox' && (
 					<SelectControl
@@ -129,7 +138,7 @@ function BehaviorsControl( {
 						onChange={ onChangeAnimation }
 						hideCancelButton={ false }
 						size="__unstable-large"
-						disabled={ disabled }
+						disabled={ override.length > 0 ? true : false }
 					/>
 				) }
 			</div>
@@ -154,9 +163,17 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 		if ( ! hasBlockSupport( props.name, 'behaviors' ) ) {
 			return blockEdit;
 		}
-		const blockHasLink =
+		const override = [];
+		if (
 			typeof props.attributes?.linkDestination !== 'undefined' &&
-			props.attributes?.linkDestination !== 'none';
+			props.attributes?.linkDestination !== 'none'
+		) {
+			override.push( 'link' );
+		}
+		if ( typeof props.attributes?.aspectRatio !== 'undefined' ) {
+			override.push( 'aspect ratio' );
+		}
+
 		return (
 			<>
 				{ blockEdit }
@@ -196,7 +213,7 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 							},
 						} );
 					} }
-					disabled={ blockHasLink }
+					override={ override }
 				/>
 			</>
 		);

diff --git a/test/e2e/specs/editor/various/behaviors.spec.js b/test/e2e/specs/editor/various/behaviors.spec.js
@@ -178,6 +178,43 @@ test.describe( 'Testing behaviors functionality', () => {
 		await expect( select ).toBeDisabled();
 	} );
 
+	test( 'Lightbox behavior is disabled if the Image has a custom aspect ratio', 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,
+				aspectRatio: '4/3',
+			},
+		} );
+
+		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();
+	} );
+
 	test( 'Lightbox behavior control has a default option that removes the markup', async ( {
 		admin,
 		editor,