@wordpress/block-library 8.19.1 → 8.19.3

package/build-style/style.css

@@ -1658,8 +1658,8 @@ 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) + 12.5px);
-  right: calc(env(safe-area-inset-right) + 12.5px);
+  top: calc(env(safe-area-inset-top) + 20px);
+  right: calc(env(safe-area-inset-right) + 20px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
@@ -1750,10 +1750,6 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
 }
 
-html.wp-has-lightbox-open {
-  overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;
@@ -2418,10 +2414,10 @@ button.wp-block-navigation-item__content {
   background-color: inherit;
   animation: overlay-menu__fade-in-animation 0.1s ease-out;
   animation-fill-mode: forwards;
-  padding-top: var(--wp--style--root--padding-top, 2rem);
-  padding-right: var(--wp--style--root--padding-right, 2rem);
-  padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
-  padding-left: var(--wp--style--root--padding-left, 2rem);
+  padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+  padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+  padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+  padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
   overflow: auto;
   z-index: 100000;
 }
@@ -2598,7 +2594,6 @@ html.has-modal-open {
 }
 
 .wp-block-navigation .wp-block-navigation-item__label {
-  word-break: normal;
   overflow-wrap: break-word;
 }
 .wp-block-navigation .wp-block-navigation-item__description {
@@ -3501,6 +3496,10 @@ ul.wp-block-rss.is-grid li {
   background-color: #25d366;
   color: #fff;
 }
+.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-x {
+  background-color: #000;
+  color: #fff;
+}
 .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-yelp {
   background-color: #d32422;
   color: #fff;
@@ -3638,6 +3637,9 @@ ul.wp-block-rss.is-grid li {
 .wp-block-social-links.is-style-logos-only .wp-social-link-wordpress {
   color: #3499cd;
 }
+.wp-block-social-links.is-style-logos-only .wp-social-link-x {
+  color: #000;
+}
 .wp-block-social-links.is-style-logos-only .wp-social-link-yelp {
   color: #d32422;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.19.1",
+	"version": "8.19.3",
 	"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.1",
-		"@wordpress/api-fetch": "^6.39.1",
-		"@wordpress/autop": "^3.42.1",
-		"@wordpress/blob": "^3.42.1",
-		"@wordpress/block-editor": "^12.10.1",
-		"@wordpress/blocks": "^12.19.1",
-		"@wordpress/components": "^25.8.1",
-		"@wordpress/compose": "^6.19.1",
-		"@wordpress/core-data": "^6.19.1",
-		"@wordpress/data": "^9.12.1",
-		"@wordpress/date": "^4.42.1",
-		"@wordpress/deprecated": "^3.42.1",
-		"@wordpress/dom": "^3.42.1",
-		"@wordpress/element": "^5.19.1",
-		"@wordpress/escape-html": "^2.42.1",
-		"@wordpress/hooks": "^3.42.1",
-		"@wordpress/html-entities": "^3.42.1",
-		"@wordpress/i18n": "^4.42.1",
-		"@wordpress/icons": "^9.33.1",
-		"@wordpress/interactivity": "^2.3.1",
-		"@wordpress/keycodes": "^3.42.1",
-		"@wordpress/notices": "^4.10.1",
-		"@wordpress/primitives": "^3.40.1",
-		"@wordpress/private-apis": "^0.24.1",
-		"@wordpress/reusable-blocks": "^4.19.1",
-		"@wordpress/rich-text": "^6.19.1",
-		"@wordpress/server-side-render": "^4.19.1",
-		"@wordpress/url": "^3.43.1",
-		"@wordpress/viewport": "^5.19.1",
-		"@wordpress/wordcount": "^3.42.1",
+		"@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",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4987d16acb5c41b62704dc4f88225acb97ddd698"
+	"gitHead": "6256f93c37705d142f75a99f1fc808540ca7dca8"
 }

package/src/footnotes/index.php

@@ -39,15 +39,20 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$footnote_index     = 1;
 
 	$block_content = '';
 
 	foreach ( $footnotes as $footnote ) {
+		// Translators: %d: Integer representing the number of return links on the page.
+		$aria_label     = sprintf( __( 'Jump to footnote reference %1$d' ), $footnote_index );
 		$block_content .= sprintf(
-			'<li id="%1$s">%2$s <a href="#%1$s-link">↩︎</a></li>',
+			'<li id="%1$s">%2$s <a href="#%1$s-link" aria-label="%3$s">↩︎</a></li>',
 			$footnote['id'],
-			$footnote['content']
+			$footnote['content'],
+			$aria_label
 		);
+		++$footnote_index;
 	}
 
 	return sprintf(
@@ -68,9 +73,10 @@ function register_block_core_footnotes() {
 			$post_type,
 			'footnotes',
 			array(
-				'show_in_rest' => true,
-				'single'       => true,
-				'type'         => 'string',
+				'show_in_rest'      => true,
+				'single'            => true,
+				'type'              => 'string',
+				'revisions_enabled' => true,
 			)
 		);
 	}
@@ -84,106 +90,7 @@ function register_block_core_footnotes() {
 add_action( 'init', 'register_block_core_footnotes' );
 
 /**
- * Saves the footnotes meta value to the revision.
- *
- * @since 6.3.0
- *
- * @param int $revision_id The revision ID.
- */
-function wp_save_footnotes_meta( $revision_id ) {
-	$post_id = wp_is_post_revision( $revision_id );
-
-	if ( $post_id ) {
-		$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-		if ( $footnotes ) {
-			// Can't use update_post_meta() because it doesn't allow revisions.
-			update_metadata( 'post', $revision_id, 'footnotes', wp_slash( $footnotes ) );
-		}
-	}
-}
-add_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
-
-/**
- * Keeps track of the revision ID for "rest_after_insert_{$post_type}".
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param int $revision_id The revision ID.
- */
-function wp_keep_footnotes_revision_id( $revision_id ) {
-	global $wp_temporary_footnote_revision_id;
-	$wp_temporary_footnote_revision_id = $revision_id;
-}
-add_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
-
-/**
- * This is a specific fix for the REST API. The REST API doesn't update
- * the post and post meta in one go (through `meta_input`). While it
- * does fix the `wp_after_insert_post` hook to be called correctly after
- * updating meta, it does NOT fix hooks such as post_updated and
- * save_post, which are normally also fired after post meta is updated
- * in `wp_insert_post()`. Unfortunately, `wp_save_post_revision` is
- * added to the `post_updated` action, which means the meta is not
- * available at the time, so we have to add it afterwards through the
- * `"rest_after_insert_{$post_type}"` action.
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param WP_Post $post The post object.
- */
-function wp_add_footnotes_revisions_to_post_meta( $post ) {
-	global $wp_temporary_footnote_revision_id;
-
-	if ( $wp_temporary_footnote_revision_id ) {
-		$revision = get_post( $wp_temporary_footnote_revision_id );
-
-		if ( ! $revision ) {
-			return;
-		}
-
-		$post_id = $revision->post_parent;
-
-		// Just making sure we're updating the right revision.
-		if ( $post->ID === $post_id ) {
-			$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-			if ( $footnotes ) {
-				// Can't use update_post_meta() because it doesn't allow revisions.
-				update_metadata( 'post', $wp_temporary_footnote_revision_id, 'footnotes', wp_slash( $footnotes ) );
-			}
-		}
-	}
-}
-
-add_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
-add_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
-
-/**
- * Restores the footnotes meta value from the revision.
- *
- * @since 6.3.0
- *
- * @param int $post_id     The post ID.
- * @param int $revision_id The revision ID.
- */
-function wp_restore_footnotes_from_revision( $post_id, $revision_id ) {
-	$footnotes = get_post_meta( $revision_id, 'footnotes', true );
-
-	if ( $footnotes ) {
-		update_post_meta( $post_id, 'footnotes', wp_slash( $footnotes ) );
-	} else {
-		delete_post_meta( $post_id, 'footnotes' );
-	}
-}
-add_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision', 10, 2 );
-
-/**
- * Adds the footnotes field to the revision.
+ * Adds the footnotes field to the revisions display.
  *
  * @since 6.3.0
  *
@@ -197,7 +104,7 @@ function wp_add_footnotes_to_revision( $fields ) {
 add_filter( '_wp_post_revision_fields', 'wp_add_footnotes_to_revision' );
 
 /**
- * Gets the footnotes field from the revision.
+ * Gets the footnotes field from the revision for the revisions screen.
  *
  * @since 6.3.0
  *
@@ -211,76 +118,3 @@ function wp_get_footnotes_from_revision( $revision_field, $field, $revision ) {
 	return get_metadata( 'post', $revision->ID, $field, true );
 }
 add_filter( '_wp_post_revision_field_footnotes', 'wp_get_footnotes_from_revision', 10, 3 );
-
-/**
- * The REST API autosave endpoint doesn't save meta, so we can use the
- * `wp_creating_autosave` when it updates an exiting autosave, and
- * `_wp_put_post_revision` when it creates a new autosave.
- *
- * @since 6.3.0
- *
- * @param int|array $autosave The autosave ID or array.
- */
-function _wp_rest_api_autosave_meta( $autosave ) {
-	// Ensure it's a REST API request.
-	if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
-		return;
-	}
-
-	$body = rest_get_server()->get_raw_data();
-	$body = json_decode( $body, true );
-
-	if ( ! isset( $body['meta']['footnotes'] ) ) {
-		return;
-	}
-
-	// `wp_creating_autosave` passes the array,
-	// `_wp_put_post_revision` passes the ID.
-	$id = is_int( $autosave ) ? $autosave : $autosave['ID'];
-
-	if ( ! $id ) {
-		return;
-	}
-
-	update_post_meta( $id, 'footnotes', wp_slash( $body['meta']['footnotes'] ) );
-}
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L391C1-L391C1.
-add_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L398.
-// Then https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/revision.php#L367.
-add_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
-
-/**
- * This is a workaround for the autosave endpoint returning early if the
- * revision field are equal. The problem is that "footnotes" is not real
- * revision post field, so there's nothing to compare against.
- *
- * This trick sets the "footnotes" field (value doesn't matter), which will
- * cause the autosave endpoint to always update the latest revision. That should
- * be fine, it should be ok to update the revision even if nothing changed. Of
- * course, this is temporary fix.
- *
- * @since 6.3.0
- *
- * @param WP_Post         $prepared_post The prepared post object.
- * @param WP_REST_Request $request       The request object.
- *
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L365-L384.
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L219.
- */
-function _wp_rest_api_force_autosave_difference( $prepared_post, $request ) {
-	// We only want to be altering POST requests.
-	if ( $request->get_method() !== 'POST' ) {
-		return $prepared_post;
-	}
-
-	// Only alter requests for the '/autosaves' route.
-	if ( substr( $request->get_route(), -strlen( '/autosaves' ) ) !== '/autosaves' ) {
-		return $prepared_post;
-	}
-
-	$prepared_post->footnotes = '[]';
-	return $prepared_post;
-}
-
-add_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference', 10, 2 );

package/src/image/image.js

@@ -372,7 +372,7 @@ export default function Image( {
 	const lightboxSetting = useSetting( 'lightbox' );
 
 	const showLightboxToggle =
-		lightboxSetting === true || lightboxSetting?.allowEditing === true;
+		!! lightbox || lightboxSetting?.allowEditing === true;
 
 	const lightboxChecked =
 		lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );

package/src/image/index.php

@@ -64,7 +64,12 @@ function render_block_core_image( $attributes, $content, $block ) {
 	}
 
 	if ( $lightbox_enabled ) {
-		return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block );
+		// 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 );
 	}
 
 	return $processor->get_updated_html();
@@ -267,7 +272,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
             aria-modal="false"
             data-wp-effect="effects.core.image.initLightbox"
             data-wp-on--keydown="actions.core.image.handleKeydown"
-            data-wp-on--mousewheel="actions.core.image.hideLightbox"
+            data-wp-on--touchstart="actions.core.image.handleTouchStart"
+            data-wp-on--touchmove="actions.core.image.handleTouchMove"
+            data-wp-on--touchend="actions.core.image.handleTouchEnd"
             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">

package/src/image/style.scss

@@ -186,8 +186,8 @@
 
 	.close-button {
 		position: absolute;
-		top: calc(env(safe-area-inset-top) + 12.5px);
-		right: calc(env(safe-area-inset-right) + 12.5px);
+		top: calc(env(safe-area-inset-top) + 20px);
+		right: calc(env(safe-area-inset-right) + 20px);
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
@@ -297,10 +297,6 @@
 	}
 }
 
-html.wp-has-lightbox-open {
-	overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
 	0% {
 		opacity: 0;

package/src/image/view.js

@@ -17,6 +17,69 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
+/*
+ * Stores a context-bound scroll handler.
+ *
+ * This callback could be defined inline inside of the store
+ * object but it's created externally to avoid confusion about
+ * how its logic is called. This logic is not referenced directly
+ * by the directives in the markup because the scroll event we
+ * need to listen to is triggered on the window; so by defining it
+ * outside of the store, we signal that the behavior here is different.
+ * If we find a compelling reason to move it to the store, feel free.
+ *
+ * @type {Function}
+ */
+let scrollCallback;
+
+/*
+ * Tracks whether user is touching screen; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {boolean}
+ */
+let isTouching = false;
+
+/*
+ * Tracks the last time the screen was touched; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {number}
+ */
+let lastTouchTime = 0;
+
+/*
+ * Lightbox page-scroll handler: prevents scrolling.
+ *
+ * This handler is added to prevent scrolling behaviors that
+ * trigger content shift while the lightbox is open.
+ *
+ * It would be better to accomplish this through CSS alone, but
+ * using overflow: hidden is currently the only way to do so, and
+ * that causes the layout to shift and prevents the zoom animation
+ * from working in some cases because we're unable to account for
+ * the layout shift when doing the animation calculations. Instead,
+ * here we use JavaScript to prevent and reset the scrolling
+ * behavior. In the future, we may be able to use CSS or overflow: hidden
+ * instead to not rely on JavaScript, but this seems to be the best approach
+ * for now that provides the best visual experience.
+ *
+ * @param {Object} context Interactivity page context?
+ */
+function handleScroll( context ) {
+	// We can't override the scroll behavior on mobile devices
+	// because doing so breaks the pinch to zoom functionality, and we
+	// want to allow users to zoom in further on the high-res image.
+	if ( ! isTouching && Date.now() - lastTouchTime > 450 ) {
+		// We are unable to use event.preventDefault() to prevent scrolling
+		// because the scroll event can't be canceled, so we reset the position instead.
+		window.scrollTo(
+			context.core.image.scrollLeftReset,
+			context.core.image.scrollTopReset
+		);
+	}
+}
+
 store(
 	{
 		state: {
@@ -43,54 +106,49 @@ store(
 
 						context.core.image.lightboxEnabled = true;
 						setStyles( context, event );
-						// Hide overflow only when the animation is in progress,
-						// otherwise the removal of the scrollbars will draw attention
-						// to itself and look like an error
-						document.documentElement.classList.add(
-							'wp-has-lightbox-open'
+
+						context.core.image.scrollTopReset =
+							window.pageYOffset ||
+							document.documentElement.scrollTop;
+
+						// In most cases, this value will be 0, but this is included
+						// in case a user has created a page with horizontal scrolling.
+						context.core.image.scrollLeftReset =
+							window.pageXOffset ||
+							document.documentElement.scrollLeft;
+
+						// We define and bind the scroll callback here so
+						// that we can pass the context and as an argument.
+						// We may be able to change this in the future if we
+						// define the scroll callback in the store instead, but
+						// this approach seems to tbe clearest for now.
+						scrollCallback = handleScroll.bind( null, context );
+
+						// We need to add a scroll event listener to the window
+						// here because we are unable to otherwise access it via
+						// the Interactivity API directives. If we add a native way
+						// to access the window, we can remove this.
+						window.addEventListener(
+							'scroll',
+							scrollCallback,
+							false
 						);
 					},
-					hideLightbox: async ( { context, event } ) => {
+					hideLightbox: async ( { context } ) => {
 						context.core.image.hideAnimationEnabled = true;
 						if ( context.core.image.lightboxEnabled ) {
-							// If scrolling, wait a moment before closing the lightbox.
-							if (
-								context.core.image.lightboxAnimation === 'fade'
-							) {
-								context.core.image.scrollDelta += event.deltaY;
-								if (
-									event.type === 'mousewheel' &&
-									Math.abs(
-										window.scrollY -
-											context.core.image.scrollDelta
-									) < 10
-								) {
-									return;
-								}
-							} else if (
-								context.core.image.lightboxAnimation === 'zoom'
-							) {
-								// Disable scroll until the zoom animation ends.
-								// Get the current page scroll position
-								const scrollTop =
-									window.pageYOffset ||
-									document.documentElement.scrollTop;
-								const scrollLeft =
-									window.pageXOffset ||
-									document.documentElement.scrollLeft;
-								// if any scroll is attempted, set this to the previous value.
-								window.onscroll = function () {
-									window.scrollTo( scrollLeft, scrollTop );
-								};
-								// Enable scrolling after the animation finishes
-								setTimeout( function () {
-									window.onscroll = function () {};
-								}, 400 );
-							}
-
-							document.documentElement.classList.remove(
-								'wp-has-lightbox-open'
-							);
+							// We want to wait until the close animation is completed
+							// before allowing a user to scroll again. The duration of this
+							// animation is defined in the styles.scss and depends on if the
+							// animation is 'zoom' or 'fade', but in any case we should wait
+							// a few milliseconds longer than the duration, otherwise a user
+							// may scroll too soon and cause the animation to look sloppy.
+							setTimeout( function () {
+								window.removeEventListener(
+									'scroll',
+									scrollCallback
+								);
+							}, 450 );
 
 							context.core.image.lightboxEnabled = false;
 							context.core.image.lastFocusedElement.focus( {
@@ -139,6 +197,27 @@ store(
 							ref,
 						} );
 					},
+					handleTouchStart: () => {
+						isTouching = true;
+					},
+					handleTouchMove: ( { context, event } ) => {
+						// On mobile devices, we want to prevent triggering the
+						// scroll event because otherwise the page jumps around as
+						// we reset the scroll position. This also means that closing
+						// the lightbox requires that a user perform a simple tap. This
+						// may be changed in the future if we find a better alternative
+						// to override or reset the scroll position during swipe actions.
+						if ( context.core.image.lightboxEnabled ) {
+							event.preventDefault();
+						}
+					},
+					handleTouchEnd: () => {
+						// We need to wait a few milliseconds before resetting
+						// to ensure that pinch to zoom works consistently
+						// on mobile devices when the lightbox is open.
+						lastTouchTime = Date.now();
+						isTouching = false;
+					},
 				},
 			},
 		},
@@ -266,6 +345,13 @@ store(
 	}
 );
 
+/*
+ * Computes styles for the lightbox and adds them to the document.
+ *
+ * @function
+ * @param {Object} context - An Interactivity API context
+ * @param {Object} event - A triggering event
+ */
 function setStyles( context, event ) {
 	// The reference img element lies adjacent
 	// to the event target button in the DOM.
@@ -434,6 +520,13 @@ function setStyles( context, event ) {
 	`;
 }
 
+/*
+ * Debounces a function call.
+ *
+ * @function
+ * @param {Function} func - A function to be called
+ * @param {number} wait - The time to wait before calling the function
+ */
 function debounce( func, wait = 50 ) {
 	let timeout;
 	return () => {

package/src/navigation/style.scss

@@ -506,10 +506,10 @@ button.wp-block-navigation-item__content {
 		@include reduce-motion("animation");
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
-		padding-top: var(--wp--style--root--padding-top, 2rem);
-		padding-right: var(--wp--style--root--padding-right, 2rem);
-		padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
-		padding-left: var(--wp--style--root--padding-left, 2rem);
+		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
 
 		// Allow modal to scroll.
 		overflow: auto;

package/src/navigation-link/style.scss

@@ -5,7 +5,6 @@
 .wp-block-navigation {
 	// This wraps just the innermost text for custom menu items.
 	.wp-block-navigation-item__label {
-		word-break: normal;
 		overflow-wrap: break-word;
 	}