@wordpress/block-library 8.19.7 → 8.19.9

package/src/image/index.php

@@ -218,28 +218,36 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		)
 	);
 	$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 =
 		$img[0]
 		. '<button
+			class="lightbox-trigger"
 			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--right="context.core.image.imageButtonRight"
 			data-wp-style--top="context.core.image.imageButtonTop"
-		></button>';
+			style="background: #000"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+				<Path stroke="#FFFFFF" d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
+			</svg>
+		</button>';
 
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
@@ -312,12 +320,13 @@ function block_core_image_render_lightbox( $block_content, $block ) {
             data-wp-on--touchmove="actions.core.image.handleTouchMove"
             data-wp-on--touchend="actions.core.image.handleTouchEnd"
             data-wp-on--click="actions.core.image.hideLightbox"
+            tabindex="-1"
             >
                 <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>
                 <div class="lightbox-image-container">$initial_image_content</div>
-				<div class="lightbox-image-container">$enlarged_image_content</div>
+                <div class="lightbox-image-container">$enlarged_image_content</div>
                 <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
         </div>
 HTML;

package/src/image/style.scss

@@ -157,14 +157,28 @@
 	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;
@@ -172,10 +186,19 @@
 			outline-offset: 5px;
 		}
 
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		&:focus {
+			opacity: 1;
+		}
+
 		&:hover,
 		&:focus,
 		&:not(:hover):not(:active):not(.has-background) {
-			background: none;
+			background: #000;
 			border: none;
 		}
 	}

package/src/image/view.js

@@ -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, context.core.image.imageRef );
 
 						context.core.image.scrollTopReset =
 							window.pageYOffset ||
@@ -151,12 +149,15 @@ store(
 									'scroll',
 									scrollCallback
 								);
+								// If we don't delay before changing the focus,
+								// the focus ring will appear on Firefox before
+								// the image has finished animating, which looks broken.
+								context.core.image.lightboxTriggerRef.focus( {
+									preventScroll: true,
+								} );
 							}, 450 );
 
 							context.core.image.lightboxEnabled = false;
-							context.core.image.lastFocusedElement.focus( {
-								preventScroll: true,
-							} );
 						}
 					},
 					handleKeydown: ( { context, actions, event } ) => {
@@ -191,11 +192,12 @@ store(
 							}
 						}
 					},
-					handleLoad: ( { state, context, effects, ref } ) => {
+					// This is fired just by lazily loaded
+					// images on the page, not all images.
+					handleLoad: ( { context, effects, ref } ) => {
 						context.core.image.imageLoaded = true;
 						context.core.image.imageCurrentSrc = ref.currentSrc;
 						effects.core.image.setButtonStyles( {
-							state,
 							context,
 							ref,
 						} );
@@ -258,17 +260,18 @@ store(
 		effects: {
 			core: {
 				image: {
-					setCurrentSrc: ( { context, ref } ) => {
+					initOriginImage: ( { context, ref } ) => {
+						context.core.image.imageRef = ref;
+						context.core.image.lightboxTriggerRef =
+							ref.parentElement.querySelector(
+								'.lightbox-trigger'
+							);
 						if ( ref.complete ) {
 							context.core.image.imageLoaded = true;
 							context.core.image.imageCurrentSrc = ref.currentSrc;
 						}
 					},
 					initLightbox: async ( { context, ref } ) => {
-						context.core.image.figureRef =
-							ref.querySelector( 'figure' );
-						context.core.image.imageRef =
-							ref.querySelector( 'img' );
 						if ( context.core.image.lightboxEnabled ) {
 							const focusableElements =
 								ref.querySelectorAll( focusableSelectors );
@@ -279,10 +282,11 @@ store(
 									focusableElements.length - 1
 								];
 
-							ref.querySelector( '.close-button' ).focus();
+							// Move focus to the dialog when opening it.
+							ref.focus();
 						}
 					},
-					setButtonStyles: ( { state, context, ref } ) => {
+					setButtonStyles: ( { context, ref } ) => {
 						const {
 							naturalWidth,
 							naturalHeight,
@@ -291,54 +295,71 @@ 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 figureWidth = ref.parentElement.clientWidth;
+
+						// 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.clientHeight;
+						const caption = figure.querySelector( 'figcaption' );
+						if ( caption ) {
+							const captionComputedStyle =
+								window.getComputedStyle( caption );
+							figureHeight =
+								figureHeight -
+								caption.offsetHeight -
+								parseFloat( captionComputedStyle.marginTop ) -
+								parseFloat( captionComputedStyle.marginBottom );
+						}
+
+						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 ( 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;
+								// the width and compute the height.
+								const referenceHeight =
+									offsetWidth / naturalRatio;
 								context.core.image.imageButtonTop =
-									( offsetHeight - buttonHeight ) / 2;
+									( offsetHeight - referenceHeight ) / 2 +
+									buttonOffsetTop +
+									10;
+								context.core.image.imageButtonRight =
+									buttonOffsetRight + 10;
 							} 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;
+								// the height and compute the width.
+								const referenceWidth =
+									offsetHeight * naturalRatio;
+								context.core.image.imageButtonTop =
+									buttonOffsetTop + 10;
+								context.core.image.imageButtonRight =
+									( offsetWidth - referenceWidth ) / 2 +
+									buttonOffsetRight +
+									10;
 							}
 						} 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;
+							context.core.image.imageButtonTop =
+								buttonOffsetTop + 10;
+							context.core.image.imageButtonRight =
+								buttonOffsetRight + 10;
 						}
 					},
 					setStylesOnResize: ( { state, context, ref } ) => {

package/src/navigation/index.php

@@ -90,6 +90,13 @@ function block_core_navigation_add_directives_to_submenu( $w, $block_attributes
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' );
+
+		// This is a fix for Safari. Without it, Safari doesn't change the active
+		// element when the user clicks on a button. It can be removed once we add
+		// an overlay to capture the clicks, instead of relying on the focusout
+		// event.
+		$w->set_attribute( 'tabindex', '-1' );
+
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
 			$w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' );
 			$w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' );

package/src/navigation/view.js

@@ -13,10 +13,14 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
+// This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
+// when the user taps in the body. It can be removed once we add an overlay to
+// capture the clicks, instead of relying on the focusout event.
+document.addEventListener( 'click', () => {} );
+
 const openMenu = ( store, menuOpenedOn ) => {
-	const { context, ref, selectors } = store;
+	const { context, selectors } = store;
 	selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true;
-	context.core.navigation.previousFocus = ref;
 	if ( context.core.navigation.type === 'overlay' ) {
 		// Add a `has-modal-open` class to the <html> root.
 		document.documentElement.classList.add( 'has-modal-open' );
@@ -33,7 +37,7 @@ const closeMenu = ( store, menuClosedOn ) => {
 				window.document.activeElement
 			)
 		) {
-			context.core.navigation.previousFocus.focus();
+			context.core.navigation.previousFocus?.focus();
 		}
 		context.core.navigation.modal = null;
 		context.core.navigation.previousFocus = null;
@@ -130,6 +134,8 @@ wpStore( {
 					closeMenu( store, 'hover' );
 				},
 				openMenuOnClick( store ) {
+					const { context, ref } = store;
+					context.core.navigation.previousFocus = ref;
 					openMenu( store, 'click' );
 				},
 				closeMenuOnClick( store ) {
@@ -140,13 +146,16 @@ wpStore( {
 					openMenu( store, 'focus' );
 				},
 				toggleMenuOnClick: ( store ) => {
-					const { selectors } = store;
+					const { selectors, context, ref } = store;
+					// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
+					if ( window.document.activeElement !== ref ) ref.focus();
 					const menuOpenedBy =
 						selectors.core.navigation.menuOpenedBy( store );
 					if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 						closeMenu( store, 'click' );
 						closeMenu( store, 'focus' );
 					} else {
+						context.core.navigation.previousFocus = ref;
 						openMenu( store, 'click' );
 					}
 				},
@@ -194,11 +203,14 @@ wpStore( {
 					// event.relatedTarget === The element receiving focus (if any)
 					// When focusout is outsite the document,
 					// `window.document.activeElement` doesn't change.
+
+					// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
 					if (
-						! context.core.navigation.modal?.contains(
+						event.relatedTarget === null ||
+						( ! context.core.navigation.modal?.contains(
 							event.relatedTarget
 						) &&
-						event.target !== window.document.activeElement
+							event.target !== window.document.activeElement )
 					) {
 						closeMenu( store, 'click' );
 						closeMenu( store, 'focus' );