@wordpress/block-library 8.19.3 → 8.19.5

package/build-style/style-rtl.css

@@ -1614,6 +1614,8 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .wp-lightbox-container button {
   border: none;
@@ -1629,6 +1631,10 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1644,11 +1650,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 20px);
-  left: calc(env(safe-area-inset-left) + 20px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  left: calc(env(safe-area-inset-left) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -2806,6 +2821,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-post-featured-image:where(.alignleft, .alignright) {
+  width: 100%;
+}
 
 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
   display: inline-block;
@@ -2952,6 +2970,32 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     grid-template-columns: 1fr;
   }
 }
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+  float: left;
+  -webkit-margin-start: 2em;
+          margin-inline-start: 2em;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+  float: right;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-margin-end: 2em;
+          margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
+}
+
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {

package/build-style/style.css

@@ -1628,6 +1628,8 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .wp-lightbox-container button {
   border: none;
@@ -1643,6 +1645,10 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1658,11 +1664,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 20px);
-  right: calc(env(safe-area-inset-right) + 20px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  right: calc(env(safe-area-inset-right) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -2836,6 +2851,9 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-post-featured-image:where(.alignleft, .alignright) {
+  width: 100%;
+}
 
 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
   display: inline-block;
@@ -2982,6 +3000,32 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
     grid-template-columns: 1fr;
   }
 }
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+  float: right;
+  -webkit-margin-start: 2em;
+          margin-inline-start: 2em;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+  float: left;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-margin-end: 2em;
+          margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
+}
+
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.19.3",
+	"version": "8.19.5",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.42.3",
-		"@wordpress/api-fetch": "^6.39.3",
-		"@wordpress/autop": "^3.42.3",
-		"@wordpress/blob": "^3.42.3",
-		"@wordpress/block-editor": "^12.10.3",
-		"@wordpress/blocks": "^12.19.3",
-		"@wordpress/components": "^25.8.3",
-		"@wordpress/compose": "^6.19.3",
-		"@wordpress/core-data": "^6.19.3",
-		"@wordpress/data": "^9.12.3",
-		"@wordpress/date": "^4.42.3",
-		"@wordpress/deprecated": "^3.42.3",
-		"@wordpress/dom": "^3.42.3",
-		"@wordpress/element": "^5.19.3",
-		"@wordpress/escape-html": "^2.42.3",
-		"@wordpress/hooks": "^3.42.3",
-		"@wordpress/html-entities": "^3.42.3",
-		"@wordpress/i18n": "^4.42.3",
-		"@wordpress/icons": "^9.33.3",
-		"@wordpress/interactivity": "^2.3.3",
-		"@wordpress/keycodes": "^3.42.3",
-		"@wordpress/notices": "^4.10.3",
-		"@wordpress/primitives": "^3.40.3",
-		"@wordpress/private-apis": "^0.24.3",
-		"@wordpress/reusable-blocks": "^4.19.3",
-		"@wordpress/rich-text": "^6.19.3",
-		"@wordpress/server-side-render": "^4.19.3",
-		"@wordpress/url": "^3.43.3",
-		"@wordpress/viewport": "^5.19.3",
-		"@wordpress/wordcount": "^3.42.3",
+		"@wordpress/a11y": "^3.42.5",
+		"@wordpress/api-fetch": "^6.39.5",
+		"@wordpress/autop": "^3.42.5",
+		"@wordpress/blob": "^3.42.5",
+		"@wordpress/block-editor": "^12.10.5",
+		"@wordpress/blocks": "^12.19.5",
+		"@wordpress/components": "^25.8.5",
+		"@wordpress/compose": "^6.19.5",
+		"@wordpress/core-data": "^6.19.5",
+		"@wordpress/data": "^9.12.5",
+		"@wordpress/date": "^4.42.5",
+		"@wordpress/deprecated": "^3.42.5",
+		"@wordpress/dom": "^3.42.5",
+		"@wordpress/element": "^5.19.5",
+		"@wordpress/escape-html": "^2.42.5",
+		"@wordpress/hooks": "^3.42.5",
+		"@wordpress/html-entities": "^3.42.5",
+		"@wordpress/i18n": "^4.42.5",
+		"@wordpress/icons": "^9.33.5",
+		"@wordpress/interactivity": "^2.3.5",
+		"@wordpress/keycodes": "^3.42.5",
+		"@wordpress/notices": "^4.10.5",
+		"@wordpress/primitives": "^3.40.5",
+		"@wordpress/private-apis": "^0.24.5",
+		"@wordpress/reusable-blocks": "^4.19.5",
+		"@wordpress/rich-text": "^6.19.5",
+		"@wordpress/server-side-render": "^4.19.5",
+		"@wordpress/url": "^3.43.5",
+		"@wordpress/viewport": "^5.19.5",
+		"@wordpress/wordcount": "^3.42.5",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6256f93c37705d142f75a99f1fc808540ca7dca8"
+	"gitHead": "edc87d3e33740b82b30f5e21c5953ecded84f08f"
 }

package/src/cover/edit/inspector-controls.js

@@ -149,7 +149,7 @@ export default function CoverInspectorControls( {
 			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
 		),
 		main: __(
-			'The <main> element should be used for the primary content of your document only. '
+			'The <main> element should be used for the primary content of your document only.'
 		),
 		section: __(
 			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."

package/src/embed/edit.js

@@ -29,6 +29,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
 
 const EmbedEdit = ( props ) => {
 	const {
@@ -137,6 +138,20 @@ const EmbedEdit = ( props ) => {
 		setAttributes( { url: newURL } );
 	}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
 
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			return;
+		}
+
+		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+		if ( getAuthority( url ) === 'x.com' ) {
+			const newURL = new URL( url );
+			newURL.host = 'twitter.com';
+			setAttributes( { url: newURL.toString() } );
+		}
+	}, [ url, cannotEmbed, fetching, setAttributes ] );
+
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {

package/src/embed/edit.native.js

@@ -33,6 +33,7 @@ import {
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
 
 // The inline preview feature will be released progressible, for this reason
 // the embed will only be considered previewable for the following providers list.
@@ -160,6 +161,20 @@ const EmbedEdit = ( props ) => {
 		setAttributes( { url: newURL } );
 	}, [ preview?.html, url, cannotEmbed, fetching ] );
 
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			return;
+		}
+
+		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+		if ( getAuthority( url ) === 'x.com' ) {
+			const newURL = new URL( url );
+			newURL.host = 'twitter.com';
+			setAttributes( { url: newURL.toString() } );
+		}
+	}, [ url, cannotEmbed, fetching, setAttributes ] );
+
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {

package/src/image/image.js

@@ -375,7 +375,7 @@ export default function Image( {
 		!! lightbox || lightboxSetting?.allowEditing === true;
 
 	const lightboxChecked =
-		lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );
+		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
 	const dimensionsControl = (
 		<DimensionsTool

package/src/image/index.php

@@ -9,10 +9,11 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @param  array    $attributes The block attributes.
- * @param  string   $content    The block content.
- * @param  WP_Block $block      The block object.
- * @return string Returns the block content with the data-id attribute added.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block object.
+ *
+ * @return string The block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content, $block ) {
 
@@ -76,12 +77,13 @@ function render_block_core_image( $attributes, $content, $block ) {
 }
 
 /**
- * Add the lightboxEnabled flag to the block data.
+ * Adds the lightboxEnabled flag to the block data.
  *
  * This is used to determine whether the lightbox should be rendered or not.
  *
- * @param  array $block Block data.
- * @return array        Filtered block data.
+ * @param array $block Block data.
+ *
+ * @return array Filtered block data.
  */
 function block_core_image_get_lightbox_settings( $block ) {
 	// Get the lightbox setting from the block attributes.
@@ -113,43 +115,44 @@ function block_core_image_get_lightbox_settings( $block ) {
 }
 
 /**
- * Add the directives and layout needed for the lightbox behavior.
+ * Adds the directives and layout needed for the lightbox behavior.
+ *
+ * @param string $block_content Rendered block content.
+ * @param array  $block         Block object.
  *
- * @param  string $block_content        Rendered block content.
- * @param  array  $block                Block object.
- * @return string                Filtered block content.
+ * @return string Filtered block content.
  */
 function block_core_image_render_lightbox( $block_content, $block ) {
 	$processor = new WP_HTML_Tag_Processor( $block_content );
 
 	$aria_label = __( 'Enlarge image' );
 
+	$processor->next_tag( 'img' );
 	$alt_attribute = $processor->get_attribute( 'alt' );
 
-	if ( null !== $alt_attribute ) {
+	// An empty alt attribute `alt=""` is valid for decorative images.
+	if ( is_string( $alt_attribute ) ) {
 		$alt_attribute = trim( $alt_attribute );
 	}
 
+	// It only makes sense to append the alt text to the button aria-label when the alt text is non-empty.
 	if ( $alt_attribute ) {
 		/* translators: %s: Image alt text. */
 		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
 	}
-	$content = $processor->get_updated_html();
 
 	// Currently, we are only enabling the zoom animation.
 	$lightbox_animation = 'zoom';
 
-	// We want to store the src in the context so we can set it dynamically when the lightbox is opened.
-	$z = new WP_HTML_Tag_Processor( $content );
-	$z->next_tag( 'img' );
-
+	// Note: We want to store the `src` in the context so we
+	// can set it dynamically when the lightbox is opened.
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
 		$img_width        = $img_metadata['width'];
 		$img_height       = $img_metadata['height'];
 	} else {
-		$img_uploaded_src = $z->get_attribute( 'src' );
+		$img_uploaded_src = $processor->get_attribute( 'src' );
 		$img_width        = 'none';
 		$img_height       = 'none';
 	}
@@ -160,7 +163,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		$scale_attr = false;
 	}
 
-	$w = new WP_HTML_Tag_Processor( $content );
+	$w = new WP_HTML_Tag_Processor( $block_content );
 	$w->next_tag( 'figure' );
 	$w->add_class( 'wp-lightbox-container' );
 	$w->set_attribute( 'data-wp-interactive', true );
@@ -180,7 +183,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 						"imageCurrentSrc": "",
 						"targetWidth": "%s",
 						"targetHeight": "%s",
-						"scaleAttr": "%s"
+						"scaleAttr": "%s",
+						"dialogLabel": "%s"
 					}
 				}
 			}',
@@ -188,31 +192,34 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			$img_uploaded_src,
 			$img_width,
 			$img_height,
-			$scale_attr
+			$scale_attr,
+			__( 'Enlarged image' )
 		)
 	);
 	$w->next_tag( 'img' );
 	$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' );
+	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
 	// Wrap the image in the body content with a button.
 	$img = null;
 	preg_match( '/<img[^>]+>/', $body_content, $img );
-	$button       =
-				'<button
-					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-style--top="context.core.image.imageButtonTop"
-				>
-				</button>'
-				. $img[0];
+
+	$button =
+		$img[0]
+		. '<button
+			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-style--top="context.core.image.imageButtonTop"
+		></button>';
+
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
 	// We need both a responsive image and an enlarged image to animate
@@ -220,7 +227,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// image is a copy of the one in the body, which animates immediately
 	// as the lightbox is opened, while the enlarged one is a full-sized
 	// version that will likely still be loading as the animation begins.
-	$m = new WP_HTML_Tag_Processor( $content );
+	$m = new WP_HTML_Tag_Processor( $block_content );
 	$m->next_tag( 'figure' );
 	$m->add_class( 'responsive-image' );
 	$m->next_tag( 'img' );
@@ -236,7 +243,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$initial_image_content = $m->get_updated_html();
 
-	$q = new WP_HTML_Tag_Processor( $content );
+	$q = new WP_HTML_Tag_Processor( $block_content );
 	$q->next_tag( 'figure' );
 	$q->add_class( 'enlarged-image' );
 	$q->next_tag( 'img' );
@@ -252,24 +259,32 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$enlarged_image_content = $q->get_updated_html();
 
-	$background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
+	// If the current theme does NOT have a `theme.json`, or the colors are not defined,
+	// we need to set the background color & close button color to some default values
+	// because we can't get them from the Global Styles.
+	$background_color   = '#fff';
+	$close_button_color = '#000';
+	if ( wp_theme_has_theme_json() ) {
+		$global_styles_color = wp_get_global_styles( array( 'color' ) );
+		if ( ! empty( $global_styles_color['background'] ) ) {
+			$background_color = esc_attr( $global_styles_color['background'] );
+		}
+		if ( ! empty( $global_styles_color['text'] ) ) {
+			$close_button_color = esc_attr( $global_styles_color['text'] );
+		}
+	}
 
 	$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' );
 
 	$lightbox_html = <<<HTML
         <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
             data-wp-bind--role="selectors.core.image.roleAttribute"
-            aria-label="$dialog_label"
+            data-wp-bind--aria-label="selectors.core.image.dialogLabel"
             data-wp-class--initialized="context.core.image.initialized"
             data-wp-class--active="context.core.image.lightboxEnabled"
             data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
-            data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
-            aria-hidden="true"
-            data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
-            aria-modal="false"
+            data-wp-bind--aria-modal="selectors.core.image.ariaModal"
             data-wp-effect="effects.core.image.initLightbox"
             data-wp-on--keydown="actions.core.image.handleKeydown"
             data-wp-on--touchstart="actions.core.image.handleTouchStart"
@@ -282,7 +297,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
                 </button>
                 <div class="lightbox-image-container">$initial_image_content</div>
 				<div class="lightbox-image-container">$enlarged_image_content</div>
-                <div class="scrim" style="background-color: $background_color"></div>
+                <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
         </div>
 HTML;
 
@@ -290,11 +305,13 @@ HTML;
 }
 
 /**
- * Ensure that the view script has the `wp-interactivity` dependency.
+ * Ensures that the view script has the `wp-interactivity` dependency.
  *
  * @since 6.4.0
  *
  * @global WP_Scripts $wp_scripts
+ *
+ * @return void
  */
 function block_core_image_ensure_interactivity_dependency() {
 	global $wp_scripts;
@@ -310,6 +327,8 @@ add_action( 'wp_print_scripts', 'block_core_image_ensure_interactivity_dependenc
 
 /**
  * Registers the `core/image` block on server.
+ *
+ * @return void
  */
 function register_block_core_image() {
 	register_block_type_from_metadata(

package/src/image/style.scss

@@ -154,6 +154,8 @@
 
 .wp-lightbox-container {
 	position: relative;
+	display: flex;
+	flex-direction: column;
 
 	button {
 		border: none;
@@ -169,6 +171,13 @@
 			outline: 5px auto -webkit-focus-ring-color;
 			outline-offset: 5px;
 		}
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background: none;
+			border: none;
+		}
 	}
 }
 
@@ -186,11 +195,23 @@
 
 	.close-button {
 		position: absolute;
-		top: calc(env(safe-area-inset-top) + 20px);
-		right: calc(env(safe-area-inset-right) + 20px);
+		top: calc(env(safe-area-inset-top) + 16px); // equivalent to $grid-unit-20
+		right: calc(env(safe-area-inset-right) + 16px); // equivalent to $grid-unit-20
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
+		min-width: 40px; // equivalent to $button-size-next-default-40px
+		min-height: 40px; // equivalent to $button-size-next-default-40px
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background: none;
+			border: none;
+		}
 	}
 
 	.lightbox-image-container {