From 302a4207a27239cddeedb1cac07912e078bbb3e3 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com>
Date: Sat, 24 Jun 2023 16:44:41 +0200
Subject: [PATCH] Block Image: Lightbox - Hide animation selector if behavior
 is Default or None (#51748)

* Hide animation selector if default or none

* Small refactor, fix on translation

* Add zoom out icon

* Fix selector, but still dont like the solution

* Moved to own function

* Add useMemo
---
 lib/block-supports/behaviors.php             |  5 ++-
 packages/block-editor/src/hooks/behaviors.js | 41 +++++++++++-------
 packages/block-library/src/image/style.scss  |  1 +
 test/e2e/specs/editor/blocks/image.spec.js   | 45 ++++++++++++++++++++
 4 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php
index 58c8ca72001027..d577bb6aff7d93 100644
--- a/lib/block-supports/behaviors.php
+++ b/lib/block-supports/behaviors.php
@@ -79,8 +79,9 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 	}
 	$content = $processor->get_updated_html();
 
-	$lightbox_animation = '';
-	if ( isset( $lightbox_settings['animation'] ) ) {
+	// If we don't set a default, it won't work if Lightbox is set to enabled by default.
+	$lightbox_animation = 'zoom';
+	if ( isset( $lightbox_settings['animation'] ) && '' !== $lightbox_settings['animation'] ) {
 		$lightbox_animation = $lightbox_settings['animation'];
 	}
 
diff --git a/packages/block-editor/src/hooks/behaviors.js b/packages/block-editor/src/hooks/behaviors.js
index cfb2d1ffda2acb..42cb42e8023684 100644
--- a/packages/block-editor/src/hooks/behaviors.js
+++ b/packages/block-editor/src/hooks/behaviors.js
@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -65,35 +66,40 @@ function BehaviorsControl( {
 		...behaviorsOptions,
 	];
 
+	const { behaviors, behaviorsValue } = useMemo( () => {
+		const mergedBehaviors = {
+			...themeBehaviors,
+			...( blockBehaviors || {} ),
+		};
+
+		let value = '';
+		if ( blockBehaviors === undefined ) {
+			value = 'default';
+		}
+		if ( blockBehaviors?.lightbox.enabled ) {
+			value = 'lightbox';
+		}
+		return {
+			behaviors: mergedBehaviors,
+			behaviorsValue: value,
+		};
+	}, [ blockBehaviors, themeBehaviors ] );
 	// If every behavior is disabled, do not show the behaviors inspector control.
 	if ( behaviorsOptions.length === 0 ) {
 		return null;
 	}
-	// Block behaviors take precedence over theme behaviors.
-	const behaviors = { ...themeBehaviors, ...( blockBehaviors || {} ) };
 
 	const helpText = disabled
 		? __( 'The lightbox behavior is disabled for linked images.' )
 		: '';
 
-	const value = () => {
-		if ( blockBehaviors === undefined ) {
-			return 'default';
-		}
-		if ( behaviors?.lightbox.enabled ) {
-			return 'lightbox';
-		}
-		return '';
-	};
-
 	return (
 		<InspectorControls group="advanced">
-			{ /* This div is needed to prevent a margin bottom between the dropdown and the button. */ }
 			<div>
 				<SelectControl
 					label={ __( 'Behaviors' ) }
 					// At the moment we are only supporting one behavior (Lightbox)
-					value={ value() }
+					value={ behaviorsValue }
 					options={ options }
 					onChange={ onChangeBehavior }
 					hideCancelButton={ true }
@@ -101,7 +107,7 @@ function BehaviorsControl( {
 					size="__unstable-large"
 					disabled={ disabled }
 				/>
-				{ behaviors?.lightbox.enabled && (
+				{ behaviorsValue === 'lightbox' && (
 					<SelectControl
 						label={ __( 'Animation' ) }
 						// At the moment we are only supporting one behavior (Lightbox)
@@ -115,7 +121,10 @@ function BehaviorsControl( {
 								value: 'zoom',
 								label: __( 'Zoom' ),
 							},
-							{ value: 'fade', label: 'Fade' },
+							{
+								value: 'fade',
+								label: __( 'Fade' ),
+							},
 						] }
 						onChange={ onChangeAnimation }
 						hideCancelButton={ false }
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 563a91ad340b31..d56e56933c6b55 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -256,6 +256,7 @@
 			transform-origin: top left;
 			width: var(--lightbox-image-max-width);
 			height: var(--lightbox-image-max-height);
+			cursor: zoom-out;
 		}
 
 		&.active {
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 240fda1068f29b..685b12b3202e65 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -917,6 +917,51 @@ test.describe( 'Image - interactivity', () => {
 			).not.toBeInViewport();
 		} );
 
+		test.describe( 'Animation Select visibility', () => {
+			test( 'Animation selector should appear if Behavior is Lightbox', async ( {
+				page,
+			} ) => {
+				await page.getByRole( 'button', { name: 'Advanced' } ).click();
+				const behaviorSelect = page.getByRole( 'combobox', {
+					name: 'Behaviors',
+				} );
+				await behaviorSelect.selectOption( 'lightbox' );
+				await expect(
+					page.getByRole( 'combobox', {
+						name: 'Animation',
+					} )
+				).toBeVisible();
+			} );
+			test( 'Animation selector should NOT appear if Behavior is None', async ( {
+				page,
+			} ) => {
+				await page.getByRole( 'button', { name: 'Advanced' } ).click();
+				const behaviorSelect = page.getByRole( 'combobox', {
+					name: 'Behaviors',
+				} );
+				await behaviorSelect.selectOption( '' );
+				await expect(
+					page.getByRole( 'combobox', {
+						name: 'Animation',
+					} )
+				).not.toBeVisible();
+			} );
+			test( 'Animation selector should NOT appear if Behavior is Default', async ( {
+				page,
+			} ) => {
+				await page.getByRole( 'button', { name: 'Advanced' } ).click();
+				const behaviorSelect = page.getByRole( 'combobox', {
+					name: 'Behaviors',
+				} );
+				await behaviorSelect.selectOption( 'default' );
+				await expect(
+					page.getByRole( 'combobox', {
+						name: 'Animation',
+					} )
+				).not.toBeVisible();
+			} );
+		} );
+
 		test.describe( 'keyboard navigation', () => {
 			let openLightboxButton;
 			let lightbox;