Image: Fix design of close button for the lightbox (correct PR) (#51206)

* Revise CSS to contain images within overlay properly

* Set horizontal images to occupy space of container

* Make square images fit by height rather than expand to full width

* Revise so lightbox loads original image; remove padding and hide caption

The lightbox will now load the original image when opened;
the src attribute is set dynamically so it will not be
unnecessarily loaded by the browser.

In addition, removed the padding and hid the caption.

* Fix PHP spacing for linter

* Fix test; image src is now only set after lightbox opens

* Improve styles for lightbox close button

* Fix PHP spacing for linter

* Darken the scrim

* Remove obsolte code

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

@@ -75,8 +75,17 @@ function render_block_core_image( $attributes, $content ) {
 								'</div>';
 		$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
-		$background_color  = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
-		$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+		// Add directive to expand modal image if appropriate.
+		$m = new WP_HTML_Tag_Processor( $content );
+		$m->next_tag( 'img' );
+		$m->set_attribute( 'data-wp-context', '{ "core": { "image": { "imageSrc": "' . wp_get_attachment_url( $attributes['id'] ) . '"} } }' );
+		$m->set_attribute( 'data-wp-bind--src', 'selectors.core.image.imageSrc' );
+		$modal_content = $m->get_updated_html();
+
+		$background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
+
+		$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+		$close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) );
 
 		$dialog_label       = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
 		$close_button_label = esc_attr__( 'Close' );
@@ -94,10 +103,10 @@ function render_block_core_image( $attributes, $content ) {
 				data-wp-on--mousewheel="actions.core.image.hideLightbox"
 				data-wp-on--click="actions.core.image.hideLightbox"
 				>
-					<button type="button" aria-label="$close_button_label" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
+					<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
 						$close_button_icon
 					</button>
-					$content
+					$modal_content
 					<div class="scrim" style="background-color: $background_color"></div>
 			</div>
 HTML;

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

@@ -89,6 +89,11 @@ store( {
 				roleAttribute: ( { context } ) => {
 					return context.core.image.lightboxEnabled ? 'dialog' : '';
 				},
+				imageSrc: ( { context } ) => {
+					return context.core.image.initialized
+						? context.core.image.imageSrc
+						: '';
+				},
 			},
 		},
 	},

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

@@ -186,23 +186,35 @@
 	visibility: hidden;
 
 	.close-button {
-		font-size: 40px;
 		position: absolute;
-		top: 20px;
-		right: 20px;
+		top: 12.5px;
+		right: 12.5px;
+		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
 	}
 
 	.wp-block-image {
-		display: flex;
-		justify-content: center;
-		align-items: center;
 		width: 100%;
 		height: 100%;
-		z-index: 3000000;
 		position: absolute;
+		z-index: 3000000;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		flex-direction: column;
+		padding: 30px;
+
+		figcaption {
+			display: none;
+		}
+
+		img {
+			max-width: 100%;
+			max-height: 100%;
+			width: auto;
+		}
 	}
 
 	button {

test/e2e/specs/editor/blocks/image.spec.js

@@ -840,11 +840,11 @@ test.describe( 'Image - interactivity', () => {
 		const lightbox = page.locator( '.wp-lightbox-overlay' );
 		await expect( lightbox ).toBeHidden();
 
+		await page.getByRole( 'button', { name: 'Enlarge image' } ).click();
+
 		const image = lightbox.locator( 'img' );
 		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
 
-		await page.getByRole( 'button', { name: 'Enlarge image' } ).click();
-
 		await expect( lightbox ).toBeVisible();
 
 		const closeButton = lightbox.getByRole( 'button', {