@wordpress/block-library 8.20.0 → 8.21.0

package/src/image/index.php

@@ -9,17 +9,20 @@
  * 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 ) {
+	if ( false === stripos( $content, '<img' ) ) {
+		return '';
+	}
 
 	$processor = new WP_HTML_Tag_Processor( $content );
-	$processor->next_tag( 'img' );
 
-	if ( $processor->get_attribute( 'src' ) === null ) {
+	if ( ! $processor->next_tag( 'img' ) || null === $processor->get_attribute( 'src' ) ) {
 		return '';
 	}
 
@@ -31,57 +34,60 @@ function render_block_core_image( $attributes, $content, $block ) {
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 	}
 
-	$lightbox_enabled  = false;
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
 	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
 
-	// If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered.
-	if ( isset( $lightbox_settings ) && 'none' === $link_destination ) {
+	$view_js_file_handle = 'wp-block-image-view';
+	$script_handles      = $block->block_type->view_script_handles;
 
-		if ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) {
-			$lightbox_enabled = true;
-		}
-	}
-
-	// If at least one block in the page has the lightbox, mark the block type as interactive.
-	if ( $lightbox_enabled ) {
+	/*
+	 * If the lightbox is enabled and the image is not linked, add the filter
+	 * and the JavaScript view file.
+	 */
+	if (
+		isset( $lightbox_settings ) &&
+		'none' === $link_destination &&
+		isset( $lightbox_settings['enabled'] ) &&
+		true === $lightbox_settings['enabled']
+	) {
 		$block->block_type->supports['interactivity'] = true;
-	}
 
-	// Determine whether the view script should be enqueued or not.
-	$view_js_file = 'wp-block-image-view';
-	if ( ! wp_script_is( $view_js_file ) ) {
-		$script_handles = $block->block_type->view_script_handles;
-
-		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if ( ! $lightbox_enabled && in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		if ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
 		}
-		// If the script is needed, but it was previously removed, add it again.
-		if ( $lightbox_enabled && ! in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
-		}
-	}
 
-	if ( $lightbox_enabled ) {
-		// This render needs to happen in a filter with priority 15 to ensure that it
-		// runs after the duotone filter and that duotone styles are applied to the image
-		// in the lightbox. We also need to ensure that the lightbox works with any plugins
-		// that might use filters as well. We can consider removing this in the future if the
-		// way the blocks are rendered changes, or if a new kind of filter is introduced.
+		/*
+		 * This render needs to happen in a filter with priority 15 to ensure
+		 * that it runs after the duotone filter and that duotone styles are
+		 * applied to the image in the lightbox. We also need to ensure that the
+		 * lightbox works with any plugins that might use filters as well. We
+		 * can consider removing this in the future if the way the blocks are
+		 * rendered changes, or if a new kind of filter is introduced.
+		 */
 		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
+	} else {
+		/*
+		 * Remove the filter and the JavaScript view file if previously added by
+		 * other Image blocks.
+		 */
+		remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( in_array( $view_js_file_handle, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
+		}
 	}
 
 	return $processor->get_updated_html();
 }
 
 /**
- * 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 +119,61 @@ 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 ) {
+	/*
+	 * If it's not possible that an IMG element exists then return the given
+	 * block content as-is. It may be that there's no actual image in the block
+	 * or it could be that another plugin already modified this HTML.
+	 */
+	if ( false === stripos( $block_content, '<img' ) ) {
+		return $block_content;
+	}
+
 	$processor = new WP_HTML_Tag_Processor( $block_content );
 
 	$aria_label = __( 'Enlarge image' );
 
+	/*
+	 * If there's definitely no IMG element in the block then return the given
+	 * block content as-is. There's nothing that this code can knowingly modify
+	 * to add the lightbox behavior.
+	 */
+	if ( ! $processor->next_tag( 'img' ) ) {
+		return $block_content;
+	}
+
 	$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'];
+		$img_width        = $img_metadata['width'] ?? 'none';
+		$img_height       = $img_metadata['height'] ?? 'none';
 	} else {
-		$img_uploaded_src = $z->get_attribute( 'src' );
+		$img_uploaded_src = $processor->get_attribute( 'src' );
 		$img_width        = 'none';
 		$img_height       = 'none';
 	}
@@ -160,7 +184,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 +204,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 						"imageCurrentSrc": "",
 						"targetWidth": "%s",
 						"targetHeight": "%s",
-						"scaleAttr": "%s"
+						"scaleAttr": "%s",
+						"dialogLabel": "%s"
 					}
 				}
 			}',
@@ -188,31 +213,44 @@ 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-init', 'effects.core.image.initOriginImage' );
 	$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.showLightbox' );
+	$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.
+	// Add a button alongside image in the body content.
 	$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--right="context.core.image.imageButtonRight"
+			data-wp-style--top="context.core.image.imageButtonTop"
+			style="background: #000"
+		>
+			<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 );
 
 	// We need both a responsive image and an enlarged image to animate
@@ -220,7 +258,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 +274,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 +290,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 +328,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,7 +336,7 @@ 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
  *

package/src/image/style.scss

@@ -154,21 +154,53 @@
 
 .wp-lightbox-container {
 	position: relative;
+	display: flex;
+	flex-direction: column;
+
+	img {
+		cursor: zoom-in;
+	}
+
+	img:hover + button {
+		opacity: 1;
+	}
 
 	button {
+		opacity: 0;
 		border: none;
-		background: none;
+		background: #000;
 		cursor: zoom-in;
-		width: 100%;
-		height: 100%;
+		width: 24px;
+		height: 24px;
 		position: absolute;
 		z-index: 100;
+		top: 10px;
+		right: 10px;
+		text-align: center;
+		padding: 0;
+		border-radius: 10%;
 
 		&: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: #000;
+			border: none;
+		}
 	}
 }
 
@@ -186,11 +218,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 {