@wordpress/block-library 9.33.4 → 9.34.1-next.2f1c7c01b.0

package/src/breadcrumbs/index.php

@@ -17,42 +17,95 @@
  * @return string Returns the post breadcrumb for hierarchical post types.
  */
 function render_block_core_breadcrumbs( $attributes, $content, $block ) {
-	// Exclude breadcrumbs from special contexts like archives, search, 404, etc.
-	// until they are explicitly supported.
-	if ( is_archive() || is_search() || is_404() || is_home() || is_front_page() ) {
-		return '';
-	}
-	if ( ! isset( $block->context['postId'] ) || ! isset( $block->context['postType'] ) ) {
+	$is_home_or_front_page = is_home() || is_front_page();
+	if ( ! $attributes['showOnHomePage'] && $is_home_or_front_page ) {
 		return '';
 	}
 
-	$post_id   = $block->context['postId'];
-	$post_type = $block->context['postType'];
+	$breadcrumb_items = array();
 
-	$post = get_post( $post_id );
-	if ( ! $post ) {
-		return '';
+	if ( $attributes['showHomeLink'] ) {
+		if ( ! $is_home_or_front_page ) {
+			$breadcrumb_items[] = block_core_breadcrumbs_create_link(
+				home_url( '/' ),
+				__( 'Home' )
+			);
+		} else {
+			$breadcrumb_items[] = block_core_breadcrumbs_create_item( __( 'Home' ), block_core_breadcrumbs_is_paged() );
+		}
 	}
 
-	$type             = $attributes['type'];
-	$breadcrumb_items = array();
-	if ( $attributes['showHomeLink'] ) {
-		$breadcrumb_items[] = sprintf(
-			'<a href="%s">%s</a>',
-			esc_url( home_url() ),
-			esc_html__( 'Home' )
+	// Handle home and front page.
+	if ( $is_home_or_front_page ) {
+		// This check is explicitly nested in order not to execute the `else` branch.
+		if ( block_core_breadcrumbs_is_paged() ) {
+			$breadcrumb_items[] = block_core_breadcrumbs_create_page_number_item();
+		}
+	} elseif ( is_search() ) {
+		// Handle search results.
+		$is_paged = block_core_breadcrumbs_is_paged();
+		/* translators: %s: search query */
+		$text               = sprintf( __( 'Search results for: "%s"' ), wp_trim_words( get_search_query(), 10 ) );
+		$breadcrumb_items[] = block_core_breadcrumbs_create_item( $text, $is_paged );
+		// Add the "Page X" as the current page if paginated.
+		if ( $is_paged ) {
+			$breadcrumb_items[] = block_core_breadcrumbs_create_page_number_item();
+		}
+	} elseif ( is_404() ) {
+		// Handle 404 pages.
+		$breadcrumb_items[] = block_core_breadcrumbs_create_current_item(
+			__( 'Page not found' )
 		);
-	}
-	$supported_types = array( 'postWithAncestors', 'postWithTerms' );
-	// If `type` is not set to a specific breadcrumb type, determine it based on the block's default heuristics.
-	$breadcrumbs_type = in_array( $type, $supported_types, true ) ? $type : block_core_breadcrumbs_get_breadcrumbs_type( $post_type );
-	if ( 'postWithAncestors' === $breadcrumbs_type ) {
-		$breadcrumb_items = array_merge( $breadcrumb_items, block_core_breadcrumbs_get_hierarchical_post_type_breadcrumbs( $post_id ) );
+	} elseif ( is_archive() ) {
+		// Handle archive pages (taxonomy, post type, date, author archives).
+		$archive_breadcrumbs = block_core_breadcrumbs_get_archive_breadcrumbs();
+		if ( ! empty( $archive_breadcrumbs ) ) {
+			$breadcrumb_items = array_merge( $breadcrumb_items, $archive_breadcrumbs );
+		}
 	} else {
-		$breadcrumb_items = array_merge( $breadcrumb_items, block_core_breadcrumbs_get_terms_breadcrumbs( $post_id, $post_type ) );
+		// Handle single post/page breadcrumbs.
+		if ( ! isset( $block->context['postId'] ) || ! isset( $block->context['postType'] ) ) {
+			return '';
+		}
+
+		$post_id   = $block->context['postId'];
+		$post_type = $block->context['postType'];
+
+		$post = get_post( $post_id );
+		if ( ! $post ) {
+			return '';
+		}
+
+		// Determine breadcrumb type for accurate rendering (matching JavaScript logic).
+		$show_terms = false;
+		if ( ! is_post_type_hierarchical( $post_type ) ) {
+			$show_terms = true;
+		} elseif ( empty( get_object_taxonomies( $post_type, 'objects' ) ) ) {
+			// Hierarchical post type without taxonomies can only use ancestors.
+			$show_terms = false;
+		} else {
+			// For hierarchical post types with taxonomies, use the attribute.
+			$show_terms = $attributes['prefersTaxonomy'];
+		}
+
+		if ( ! $show_terms ) {
+			$breadcrumb_items = array_merge( $breadcrumb_items, block_core_breadcrumbs_get_hierarchical_post_type_breadcrumbs( $post_id ) );
+		} else {
+			$breadcrumb_items = array_merge( $breadcrumb_items, block_core_breadcrumbs_get_terms_breadcrumbs( $post_id, $post_type ) );
+		}
+		// Add current post title (not linked).
+		$breadcrumb_items[] = block_core_breadcrumbs_create_current_item( block_core_breadcrumbs_get_post_title( $post ), true );
+	}
+
+	// Remove last item if disabled.
+	if ( ! $attributes['showLastItem'] && ! empty( $breadcrumb_items ) ) {
+		array_pop( $breadcrumb_items );
 	}
-	// Add current post title (not linked).
-	$breadcrumb_items[] = sprintf( '<span aria-current="page">%s</span>', get_the_title( $post ) );
+
+	if ( empty( $breadcrumb_items ) ) {
+		return '';
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'style'      => '--separator: "' . addcslashes( $attributes['separator'], '\\"' ) . '";',
@@ -78,16 +131,104 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 }
 
 /**
- * Determines the breadcrumb type based on the block's default heuristics.
+ * Checks if we're on a paginated view (page 2 or higher).
  *
  * @since 6.9.0
  *
- * @param string $post_type The post type name.
+ * @return bool True if paged > 1, false otherwise.
+ */
+function block_core_breadcrumbs_is_paged() {
+	$paged = (int) get_query_var( 'paged' );
+	return $paged > 1;
+}
+
+/**
+ * Creates a "Page X" breadcrumb item for paginated views.
+ *
+ * @since 6.9.0
+ *
+ * @return string The "Page X" breadcrumb HTML.
+ */
+function block_core_breadcrumbs_create_page_number_item() {
+	$paged = (int) get_query_var( 'paged' );
+	return block_core_breadcrumbs_create_current_item(
+		/* translators: %s: page number */
+		sprintf( __( 'Page %s' ), number_format_i18n( $paged ) )
+	);
+}
+
+/**
+ * Creates a breadcrumb link item.
+ *
+ * @since 6.9.0
+ *
+ * @param string $url        The URL for the link (will be escaped).
+ * @param string $text       The link text (will be escaped).
+ * @param bool   $allow_html Whether to allow HTML in the text. If true, uses wp_kses_post(), otherwise uses esc_html(). Default false.
+ *
+ * @return string The breadcrumb link HTML.
+ */
+function block_core_breadcrumbs_create_link( $url, $text, $allow_html = false ) {
+	return sprintf(
+		'<a href="%s">%s</a>',
+		esc_url( $url ),
+		$allow_html ? wp_kses_post( $text ) : esc_html( $text )
+	);
+}
+
+/**
+ * Creates a breadcrumb current page item.
+ *
+ * @since 6.9.0
+ *
+ * @param string $text       The text content (will be escaped).
+ * @param bool   $allow_html Whether to allow HTML in the text. If true, uses wp_kses_post(), otherwise uses esc_html(). Default false.
+ *
+ * @return string The breadcrumb current page HTML.
+ */
+function block_core_breadcrumbs_create_current_item( $text, $allow_html = false ) {
+	return sprintf(
+		'<span aria-current="page">%s</span>',
+		$allow_html ? wp_kses_post( $text ) : esc_html( $text )
+	);
+}
+
+/**
+ * Creates a breadcrumb item that's either a link or current page item.
+ *
+ * When paginated (is_paged is true), creates a link to page 1.
+ * Otherwise, creates a span marked as the current page.
+ *
+ * @since 6.9.0
+ *
+ * @param string $text       The text content (will be escaped).
+ * @param bool   $is_paged   Whether we're on a paginated view.
+ * @param bool   $allow_html Whether to allow HTML in the text. If true, uses wp_kses_post(), otherwise uses esc_html(). Default false.
+ *
+ * @return string The breadcrumb HTML.
+ */
+function block_core_breadcrumbs_create_item( $text, $is_paged = false, $allow_html = false ) {
+	if ( $is_paged ) {
+		return block_core_breadcrumbs_create_link( get_pagenum_link( 1 ), $text, $allow_html );
+	}
+	return block_core_breadcrumbs_create_current_item( $text, $allow_html );
+}
+
+/**
+ * Gets a post title with fallback for empty titles.
+ *
+ * @since 6.9.0
+ *
+ * @param int|WP_Post $post_id_or_object The post ID or post object.
  *
- * @return string The breadcrumb type.
+ * @return string The post title or fallback text.
  */
-function block_core_breadcrumbs_get_breadcrumbs_type( $post_type ) {
-	return is_post_type_hierarchical( $post_type ) ? 'postWithAncestors' : 'postWithTerms';
+function block_core_breadcrumbs_get_post_title( $post_id_or_object ) {
+	$title = get_the_title( $post_id_or_object );
+	if ( strlen( $title ) === 0 ) {
+		$title = __( '(no title)' );
+	}
+	return $title;
 }
 
 /**
@@ -105,15 +246,179 @@ function block_core_breadcrumbs_get_hierarchical_post_type_breadcrumbs( $post_id
 	$ancestors        = array_reverse( $ancestors );
 
 	foreach ( $ancestors as $ancestor_id ) {
-		$breadcrumb_items[] = sprintf(
-			'<a href="%s">%s</a>',
-			esc_url( get_permalink( $ancestor_id ) ),
-			get_the_title( $ancestor_id )
+		$breadcrumb_items[] = block_core_breadcrumbs_create_link(
+			get_permalink( $ancestor_id ),
+			block_core_breadcrumbs_get_post_title( $ancestor_id ),
+			true
 		);
 	}
 	return $breadcrumb_items;
 }
 
+/**
+ * Generates breadcrumb items for hierarchical term ancestors.
+ *
+ * For hierarchical taxonomies, retrieves and formats ancestor terms as breadcrumb links.
+ *
+ * @since 6.9.0
+ *
+ * @param int    $term_id  The term ID.
+ * @param string $taxonomy The taxonomy name.
+ *
+ * @return array Array of breadcrumb HTML items for ancestors.
+ */
+function block_core_breadcrumbs_get_term_ancestors_items( $term_id, $taxonomy ) {
+	$breadcrumb_items = array();
+
+	// Check if taxonomy is hierarchical and add ancestor term links.
+	if ( is_taxonomy_hierarchical( $taxonomy ) ) {
+		$term_ancestors = get_ancestors( $term_id, $taxonomy, 'taxonomy' );
+		$term_ancestors = array_reverse( $term_ancestors );
+		foreach ( $term_ancestors as $ancestor_id ) {
+			$ancestor_term = get_term( $ancestor_id, $taxonomy );
+			if ( $ancestor_term && ! is_wp_error( $ancestor_term ) ) {
+				$breadcrumb_items[] = block_core_breadcrumbs_create_link(
+					get_term_link( $ancestor_term ),
+					$ancestor_term->name
+				);
+			}
+		}
+	}
+
+	return $breadcrumb_items;
+}
+
+/**
+ * Generates breadcrumb items for archive pages.
+ *
+ * Handles taxonomy archives, post type archives, date archives, and author archives.
+ * For hierarchical taxonomies, includes ancestor terms in the breadcrumb trail.
+ *
+ * @since 6.9.0
+ *
+ * @return array Array of breadcrumb HTML items.
+ */
+function block_core_breadcrumbs_get_archive_breadcrumbs() {
+	$breadcrumb_items = array();
+
+	// Date archive (check first since it doesn't have a queried object).
+	if ( is_date() ) {
+		$year  = get_query_var( 'year' );
+		$month = get_query_var( 'monthnum' );
+		$day   = get_query_var( 'day' );
+
+		// Fallback to 'm' query var for plain permalinks.
+		// Plain permalinks use ?m=YYYYMMDD format instead of separate query vars.
+		if ( ! $year ) {
+			$m = get_query_var( 'm' );
+			if ( $m ) {
+				$year  = substr( $m, 0, 4 );
+				$month = substr( $m, 4, 2 );
+				$day   = (int) substr( $m, 6, 2 );
+			}
+		}
+
+		$is_paged = block_core_breadcrumbs_is_paged();
+
+		if ( $year ) {
+			if ( $month ) {
+				// Year is linked if we have month.
+				$breadcrumb_items[] = block_core_breadcrumbs_create_link(
+					get_year_link( $year ),
+					$year
+				);
+
+				if ( $day ) {
+					// Month is linked if we have day.
+					$breadcrumb_items[] = block_core_breadcrumbs_create_link(
+						get_month_link( $year, $month ),
+						date_i18n( 'F', mktime( 0, 0, 0, $month, 1, $year ) )
+					);
+					// Add day (current if not paginated, link if paginated).
+					$breadcrumb_items[] = block_core_breadcrumbs_create_item(
+						$day,
+						$is_paged
+					);
+				} else {
+					// Add month (current if not paginated, link if paginated).
+					$breadcrumb_items[] = block_core_breadcrumbs_create_item(
+						date_i18n( 'F', mktime( 0, 0, 0, $month, 1, $year ) ),
+						$is_paged
+					);
+				}
+			} else {
+				// Add year (current if not paginated, link if paginated).
+				$breadcrumb_items[] = block_core_breadcrumbs_create_item(
+					$year,
+					$is_paged
+				);
+			}
+		}
+
+		// Add pagination breadcrumb if on a paged date archive.
+		if ( $is_paged ) {
+			$breadcrumb_items[] = block_core_breadcrumbs_create_page_number_item();
+		}
+
+		return $breadcrumb_items;
+	}
+
+	// For other archive types, we need a queried object.
+	$queried_object = get_queried_object();
+
+	if ( ! $queried_object ) {
+		return array();
+	}
+
+	$is_paged = block_core_breadcrumbs_is_paged();
+
+	// Taxonomy archive (category, tag, custom taxonomy).
+	if ( $queried_object instanceof WP_Term ) {
+		$term     = $queried_object;
+		$taxonomy = $term->taxonomy;
+
+		// Add hierarchical term ancestors if applicable.
+		$breadcrumb_items = array_merge(
+			$breadcrumb_items,
+			block_core_breadcrumbs_get_term_ancestors_items( $term->term_id, $taxonomy )
+		);
+
+		// Add current term (current if not paginated, link if paginated).
+		$breadcrumb_items[] = block_core_breadcrumbs_create_item(
+			$term->name,
+			$is_paged
+		);
+	} elseif ( is_post_type_archive() ) {
+		// Post type archive.
+		$post_type = get_query_var( 'post_type' );
+		if ( is_array( $post_type ) ) {
+			$post_type = reset( $post_type );
+		}
+		$post_type_object = get_post_type_object( $post_type );
+		if ( $post_type_object ) {
+			// Add post type (current if not paginated, link if paginated).
+			$breadcrumb_items[] = block_core_breadcrumbs_create_item(
+				$post_type_object->labels->name,
+				$is_paged
+			);
+		}
+	} elseif ( is_author() ) {
+		// Author archive.
+		$author = $queried_object;
+		// Add author (current if not paginated, link if paginated).
+		$breadcrumb_items[] = block_core_breadcrumbs_create_item(
+			$author->display_name,
+			$is_paged
+		);
+	}
+
+	// Add pagination breadcrumb if on a paged archive.
+	if ( $is_paged ) {
+		$breadcrumb_items[] = block_core_breadcrumbs_create_page_number_item();
+	}
+
+	return $breadcrumb_items;
+}
 
 /**
  * Generates breadcrumb items from taxonomy terms.
@@ -158,25 +463,14 @@ function block_core_breadcrumbs_get_terms_breadcrumbs( $post_id, $post_type ) {
 	if ( ! empty( $terms ) ) {
 		// Use the first term (if multiple are assigned).
 		$term = reset( $terms );
-		// Check if taxonomy is hierarchical also add ancestor term links
-		if ( is_taxonomy_hierarchical( $taxonomy_name ) ) {
-			$term_ancestors = get_ancestors( $term->term_id, $taxonomy_name, 'taxonomy' );
-			$term_ancestors = array_reverse( $term_ancestors );
-			foreach ( $term_ancestors as $ancestor_id ) {
-				$ancestor_term = get_term( $ancestor_id, $taxonomy_name );
-				if ( $ancestor_term && ! is_wp_error( $ancestor_term ) ) {
-					$breadcrumb_items[] = sprintf(
-						'<a href="%s">%s</a>',
-						esc_url( get_term_link( $ancestor_term ) ),
-						esc_html( $ancestor_term->name )
-					);
-				}
-			}
-		}
-		$breadcrumb_items[] = sprintf(
-			'<a href="%s">%s</a>',
-			esc_url( get_term_link( $term ) ),
-			esc_html( $term->name )
+		// Add hierarchical term ancestors if applicable.
+		$breadcrumb_items   = array_merge(
+			$breadcrumb_items,
+			block_core_breadcrumbs_get_term_ancestors_items( $term->term_id, $taxonomy_name )
+		);
+		$breadcrumb_items[] = block_core_breadcrumbs_create_link(
+			get_term_link( $term ),
+			$term->name
 		);
 	}
 	return $breadcrumb_items;

package/src/categories/edit.js

@@ -189,12 +189,16 @@ export default function CategoriesEdit( {
 			? 'ul'
 			: 'div';
 
-	const classes = clsx( className, {
-		'wp-block-categories-list':
-			!! categories?.length && ! displayAsDropdown && ! isResolving,
-		'wp-block-categories-dropdown':
-			!! categories?.length && displayAsDropdown && ! isResolving,
-	} );
+	const classes = clsx(
+		className,
+		`wp-block-categories-taxonomy-${ taxonomySlug }`,
+		{
+			'wp-block-categories-list':
+				!! categories?.length && ! displayAsDropdown && ! isResolving,
+			'wp-block-categories-dropdown':
+				!! categories?.length && displayAsDropdown && ! isResolving,
+		}
+	);
 
 	const blockProps = useBlockProps( {
 		className: classes,

package/src/categories/index.php

@@ -79,7 +79,7 @@ function render_block_core_categories( $attributes, $content, $block ) {
 		}
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => "wp-block-categories-{$type}" ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => "wp-block-categories-{$type} wp-block-categories-taxonomy-{$attributes['taxonomy']}" ) );
 
 	return sprintf(
 		$wrapper_markup,

package/src/comment-author-name/edit.js

@@ -56,7 +56,7 @@ export default function Edit( {
 			const { getEntityRecord } = select( coreStore );
 
 			const comment = getEntityRecord( 'root', 'comment', commentId );
-			const authorName = comment?.author_name; // eslint-disable-line camelcase
+			const authorName = comment?.author_name;
 
 			if ( comment && ! authorName ) {
 				const user = getEntityRecord( 'root', 'user', comment.author );

package/src/comment-template/edit.js

@@ -182,7 +182,6 @@ const CommentTemplatePreview = ( {
 			tabIndex={ 0 }
 			role="button"
 			style={ style }
-			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 			onClick={ handleOnClick }
 			onKeyPress={ handleOnClick }
 		/>

package/src/editor.scss

@@ -46,6 +46,7 @@
 @use "./social-links/editor.scss" as *;
 @use "./spacer/editor.scss" as *;
 @use "./table/editor.scss" as *;
+@use "./tabs/editor.scss" as *;
 @use "./tag-cloud/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;

package/src/form/view.js

@@ -7,8 +7,6 @@ try {
 	);
 } catch {}
 
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable no-undef */
 document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
 	// Bail If the form settings not provided or the form is not using the mailto: action.
 	if (

package/src/gallery/deprecated.js

@@ -56,7 +56,7 @@ export function getHrefAndDestination( image, destination ) {
 	switch ( destination ) {
 		case DEPRECATED_LINK_DESTINATION_MEDIA:
 			return {
-				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				href: image?.source_url || image?.url,
 				linkDestination: LINK_DESTINATION_MEDIA,
 			};
 		case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
@@ -66,7 +66,7 @@ export function getHrefAndDestination( image, destination ) {
 			};
 		case LINK_DESTINATION_MEDIA:
 			return {
-				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				href: image?.source_url || image?.url,
 				linkDestination: LINK_DESTINATION_MEDIA,
 			};
 		case LINK_DESTINATION_ATTACHMENT:

package/src/gallery/utils.js

@@ -40,7 +40,7 @@ export function getHrefAndDestination(
 		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {
-				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				href: image?.source_url || image?.url,
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
 				lightbox: lightboxSetting?.enabled
 					? { ...attributes?.lightbox, enabled: false }

package/src/image/constants.js

@@ -8,3 +8,9 @@ export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
 export const SIZED_LAYOUTS = [ 'flex', 'grid' ];
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+
+/**
+ * Delay in milliseconds before preloading an image after hovering.
+ * This prevents unnecessary preloading during quick scrolling or mouse movements.
+ */
+export const IMAGE_PRELOAD_DELAY = 200;

package/src/image/image.js

@@ -911,9 +911,6 @@ export default function Image( {
 				<Spinner />
 			</Placeholder>
 		) : (
-			// Disable reason: Image itself is not meant to be interactive, but
-			// should direct focus to block.
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<>
 				<img
 					src={ temporaryURL || url }
@@ -940,7 +937,6 @@ export default function Image( {
 				/>
 				{ temporaryURL && <Spinner /> }
 			</>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 		);
 
 	if ( canEditImage && isEditingImage ) {

package/src/image/index.php

@@ -202,6 +202,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	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_srcset       = wp_get_attachment_image_srcset( $block['attrs']['id'] );
 		$img_width        = $img_metadata['width'] ?? 'none';
 		$img_height       = $img_metadata['height'] ?? 'none';
 	}
@@ -220,6 +221,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			'metadata' => array(
 				$unique_image_id => array(
 					'uploadedSrc'      => $img_uploaded_src,
+					'lightboxSrcset'   => $img_srcset,
 					'figureClassNames' => $figure_class_names,
 					'figureStyles'     => $figure_styles,
 					'imgClassNames'    => $img_class_names,
@@ -252,6 +254,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$processor->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
 	$processor->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
 	$processor->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+
+	// Set an event to preload the image on pointerenter and pointerdown(mobile).
+	// Pointerleave is used to cancel the preload if the user hovers away from the image
+	// before the predefined delay.
+	$processor->set_attribute( 'data-wp-on--pointerenter', 'actions.preloadImageWithDelay' );
+	$processor->set_attribute( 'data-wp-on--pointerdown', 'actions.preloadImage' );
+	$processor->set_attribute( 'data-wp-on--pointerleave', 'actions.cancelPreload' );
+
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
@@ -343,7 +353,14 @@ function block_core_image_print_lightbox_overlay() {
 				</div>
 				<div class="lightbox-image-container">
 					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
-						<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
+						<img
+							data-wp-bind--alt="state.currentImage.alt"
+							data-wp-bind--class="state.currentImage.imgClassNames"
+							data-wp-bind--style="state.imgStyles"
+							data-wp-bind--src="state.enlargedSrc"
+							data-wp-bind--srcset="state.enlargedSrcset"
+							sizes="100vw"
+						>
 					</figure>
 				</div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>