Image: Reimplement lightbox trigger as a minimal button in corner of image

packages/block-library/src/image/index.php

@@ -200,6 +200,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
 	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
 	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+	// We need to set an event callback on the `img` specifically
+	// because the `figure` element can also contain a caption, and
+	// we don't want to trigger the lightbox when the caption is clicked.
+	$w->set_attribute( 'data-wp-on--click', 'actions.core.image.callShowLightboxFromImage' );
+	$w->set_attribute( 'data-wp-on--mouseover', 'actions.core.image.handleMouseOver' );
+	$w->set_attribute( 'data-wp-on--mouseout', 'actions.core.image.handleMouseOut' );
 	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
@@ -213,12 +219,18 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			type="button"
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
-			data-wp-on--click="actions.core.image.showLightbox"
-			data-wp-style--width="context.core.image.imageButtonWidth"
-			data-wp-style--height="context.core.image.imageButtonHeight"
-			data-wp-style--left="context.core.image.imageButtonLeft"
+			data-wp-on--click="actions.core.image.callShowLightboxFromButton"
+			data-wp-class--show="context.core.image.isHovering"
+			data-wp-style--right="context.core.image.imageButtonRight"
 			data-wp-style--top="context.core.image.imageButtonTop"
-		></button>';
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+				<path d="M9 5H5V9" stroke="#FFFFFF" stroke-width="1.5"/>
+				<path d="M15 19L19 19L19 15" stroke="#FFFFFF" stroke-width="1.5"/>
+				<path d="M15 5H19V9" stroke="#FFFFFF" stroke-width="1.5"/>
+				<path d="M9 19L5 19L5 15" stroke="#FFFFFF" stroke-width="1.5"/>
+			</svg>
+		</button>';
 
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 

packages/block-library/src/image/style.scss

@@ -157,25 +157,48 @@
 	display: flex;
 	flex-direction: column;
 
+	img {
+		cursor: zoom-in;
+	}
+
 	button {
+		opacity: 0;
 		border: none;
-		background: none;
+		background: #1e1e1e;
 		cursor: zoom-in;
-		width: 100%;
-		height: 100%;
+		width: 25px;
+		height: 25px;
 		position: absolute;
 		z-index: 100;
+		top: 5px;
+		right: 5px;
+		text-align: center;
+		padding: 0;
+		border-radius: 10%;
+
+		&.show {
+			opacity: 1;
+		}
 
 		&:focus-visible {
 			outline: 5px auto #212121;
 			outline: 5px auto -webkit-focus-ring-color;
 			outline-offset: 5px;
 		}
 
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		&:focus {
+			opacity: 1;
+		}
+
 		&:hover,
 		&:focus,
 		&:not(:hover):not(:active):not(.has-background) {
-			background: none;
+			background: #1e1e1e;
 			border: none;
 		}
 	}

packages/block-library/src/image/view.js

@@ -93,7 +93,7 @@ store(
 		actions: {
 			core: {
 				image: {
-					showLightbox: ( { context, event } ) => {
+					showLightbox: ( { context, event }, image ) => {
 						// We can't initialize the lightbox until the reference
 						// image is loaded, otherwise the UX is broken.
 						if ( ! context.core.image.imageLoaded ) {
@@ -103,12 +103,10 @@ store(
 						context.core.image.lastFocusedElement =
 							window.document.activeElement;
 						context.core.image.scrollDelta = 0;
+						context.core.image.pointerType = event.pointerType;
 
 						context.core.image.lightboxEnabled = true;
-						setStyles(
-							context,
-							event.target.previousElementSibling
-						);
+						setStyles( context, image );
 
 						context.core.image.scrollTopReset =
 							window.pageYOffset ||
@@ -137,7 +135,42 @@ store(
 							false
 						);
 					},
-					hideLightbox: async ( { context } ) => {
+					// When opening the lightbox via clicking an image,
+					// we can use the event target directly and pass it to the
+					// showLightbox action, which uses it to create the styles.
+					callShowLightboxFromImage: ( {
+						context,
+						event,
+						actions,
+					} ) => {
+						actions.core.image.showLightbox(
+							{
+								context,
+								event,
+							},
+							event.target
+						);
+					},
+					// When opening the lightbox via clicking the button,
+					// we need to reach into event target's parent element to
+					// get the image element needed to create the styles.
+					callShowLightboxFromButton: ( {
+						context,
+						event,
+						actions,
+					} ) => {
+						actions.core.image.showLightbox(
+							{
+								context,
+								event,
+							},
+							// The event target we receive when clicking the button
+							// is the SVG element inside of it, so we need to go to
+							// the parent element's sibling to get the image.
+							event.target.parentElement.previousElementSibling
+						);
+					},
+					hideLightbox: async ( { context, event } ) => {
 						context.core.image.hideAnimationEnabled = true;
 						if ( context.core.image.lightboxEnabled ) {
 							// We want to wait until the close animation is completed
@@ -154,11 +187,27 @@ store(
 							}, 450 );
 
 							context.core.image.lightboxEnabled = false;
-							context.core.image.lastFocusedElement.focus( {
-								preventScroll: true,
-							} );
+
+							// We want to avoid drawing attention to the button
+							// after the lightbox closes for mouse and touch users.
+							// Note that the `event.pointerType` property returns
+							// as an empty string if a keyboard fired the event.
+							if ( event.pointerType === '' ) {
+								context.core.image.lastFocusedElement.focus( {
+									preventScroll: true,
+								} );
+							}
 						}
 					},
+					// We need to use a handler to know whether the mouse is hovering
+					// so we know when to show the lightbox trigger button. We are unable
+					// to use just CSS for this because the button is not a child of the image.
+					handleMouseOver( { context } ) {
+						context.core.image.isHovering = true;
+					},
+					handleMouseOut( { context } ) {
+						context.core.image.isHovering = false;
+					},
 					handleKeydown: ( { context, actions, event } ) => {
 						if ( context.core.image.lightboxEnabled ) {
 							if ( event.key === 'Tab' || event.keyCode === 9 ) {
@@ -191,14 +240,9 @@ store(
 							}
 						}
 					},
-					handleLoad: ( { state, context, effects, ref } ) => {
+					handleLoad: ( { context, ref } ) => {
 						context.core.image.imageLoaded = true;
 						context.core.image.imageCurrentSrc = ref.currentSrc;
-						effects.core.image.setButtonStyles( {
-							state,
-							context,
-							ref,
-						} );
 					},
 					handleTouchStart: () => {
 						isTouching = true;
@@ -279,10 +323,17 @@ store(
 									focusableElements.length - 1
 								];
 
-							ref.querySelector( '.close-button' ).focus();
+							// We want to avoid drawing unnecessary attention to the close
+							// button for mouse and touch users. Note that even if opening
+							// the lightbox via keyboard, the event fired is of type
+							// `pointerEvent`, so we need to rely on the `event.pointerType`
+							// property, which returns an empty string for keyboard events.
+							if ( context.core.image.pointerType === '' ) {
+								ref.querySelector( '.close-button' ).focus();
+							}
 						}
 					},
-					setButtonStyles: ( { state, context, ref } ) => {
+					setButtonStyles: ( { context, ref } ) => {
 						const {
 							naturalWidth,
 							naturalHeight,
@@ -291,54 +342,77 @@ store(
 						} = ref;
 
 						// If the image isn't loaded yet, we can't
-						// calculate how big the button should be.
+						// calculate where the button should be.
 						if ( naturalWidth === 0 || naturalHeight === 0 ) {
 							return;
 						}
 
-						// Subscribe to the window dimensions so we can
-						// recalculate the styles if the window is resized.
-						if (
-							( state.core.image.windowWidth ||
-								state.core.image.windowHeight ) &&
-							context.core.image.scaleAttr === 'contain'
-						) {
-							// In the case of an image with object-fit: contain, the
-							// size of the img element can be larger than the image itself,
-							// so we need to calculate the size of the button to match.
+						const figure = ref.parentElement;
+						const figureComputedStyle =
+							window.getComputedStyle( figure );
+
+						const figureWidth =
+							ref.parentElement.offsetWidth -
+							parseFloat( figureComputedStyle.marginLeft ) -
+							parseFloat( figureComputedStyle.marginRight );
+
+						// We need special handling for the height because
+						// a caption will cause the figure to be taller than
+						// the image, which means we need to account for that
+						// when calculating the placement of the button in the
+						// top right corner of the image.
+						let figureHeight = ref.parentElement.offsetHeight;
+						const caption = figure.querySelector( 'figcaption' );
+						if ( caption ) {
+							figureHeight =
+								figureHeight -
+								parseFloat( figureComputedStyle.marginTop ) -
+								parseFloat( figureComputedStyle.marginBottom ) -
+								caption.offsetHeight;
+						}
+
+						const buttonOffsetTop = figureHeight - offsetHeight;
+						const buttonOffsetRight = figureWidth - offsetWidth;
 
+						// In the case of an image with object-fit: contain, the
+						// size of the <img> element can be larger than the image itself,
+						// so we need to calculate where to place the button.
+						if ( context.core.image.scaleAttr === 'contain' ) {
 							// Natural ratio of the image.
 							const naturalRatio = naturalWidth / naturalHeight;
 							// Offset ratio of the image.
 							const offsetRatio = offsetWidth / offsetHeight;
 
-							if ( naturalRatio > offsetRatio ) {
-								// If it reaches the width first, keep
-								// the width and recalculate the height.
-								context.core.image.imageButtonWidth =
-									offsetWidth;
-								const buttonHeight = offsetWidth / naturalRatio;
-								context.core.image.imageButtonHeight =
-									buttonHeight;
+							if ( naturalRatio >= offsetRatio ) {
+								// If it reaches the width first, use a fixed
+								// position for the X axis and calculate Y position.
+								context.core.image.imageButtonRight =
+									buttonOffsetRight + 25;
+								const imageHeight = offsetWidth / naturalRatio;
 								context.core.image.imageButtonTop =
-									( offsetHeight - buttonHeight ) / 2;
+									( offsetHeight - imageHeight ) / 2 +
+									buttonOffsetTop +
+									25;
 							} else {
-								// If it reaches the height first, keep
-								// the height and recalculate the width.
-								context.core.image.imageButtonHeight =
-									offsetHeight;
-								const buttonWidth = offsetHeight * naturalRatio;
-								context.core.image.imageButtonWidth =
-									buttonWidth;
-								context.core.image.imageButtonLeft =
-									( offsetWidth - buttonWidth ) / 2;
+								// If it reaches the height first, use a fixed
+								// position for the Y axis and calculate X position.
+								context.core.image.imageButtonTop =
+									buttonOffsetTop + 25;
+								const imageWidth = offsetHeight * naturalRatio;
+								context.core.image.imageButtonRight =
+									( offsetWidth - imageWidth ) / 2 +
+									buttonOffsetRight +
+									25;
 							}
 						} else {
-							// In all other cases, we can trust that the size of
-							// the image is the right size for the button as well.
-
-							context.core.image.imageButtonWidth = offsetWidth;
-							context.core.image.imageButtonHeight = offsetHeight;
+							// In other cases, we can just put the button in
+							// the top right corner of the containing element,
+							// accounting for the fact that users may have resized
+							// the image, which will require us to reposition
+							// the button on the X axis but not the Y axis.
+							context.core.image.imageButtonTop = 25;
+							context.core.image.imageButtonRight =
+								buttonOffsetRight + 25;
 						}
 					},
 					setStylesOnResize: ( { state, context, ref } ) => {