packages/block-library/src/embed/variations.js

@@ -251,6 +251,14 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ],
 		attributes: { providerNameSlug: 'reverbnation', responsive: true },
 	},
+	{
+		name: 'screencast',
+		title: getTitle( 'Screencast' ),
+		icon: embedVideoIcon,
+		description: __( 'Embed Screencast content.' ),
+		patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ],
+		attributes: { providerNameSlug: 'screencast', responsive: true },
+	},
 	{
 		name: 'scribd',
 		title: getTitle( 'Scribd' ),

packages/block-library/src/image/index.php

@@ -155,12 +155,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$img_styles        = $p->get_attribute( 'style' );
 	$img_width         = 'none';
 	$img_height        = 'none';
+	$img_sizes         = '100vw';
 	$aria_label        = __( 'Enlarge' );
 	$dialog_aria_label = __( 'Enlarged image' );
 
 	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';
 	}
@@ -179,6 +181,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			'metadata' => array(
 				$unique_image_id => array(
 					'uploadedSrc'      => $img_uploaded_src,
+					'lightboxSrcset'   => $img_srcset,
+					'lightboxSizes'    => $img_sizes,
 					'figureClassNames' => $figure_class_names,
 					'figureStyles'     => $figure_styles,
 					'imgClassNames'    => $img_class_names,
@@ -211,11 +215,11 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
 	$p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
 	$p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
-	// Set an event to prefetch the image on pointerenter and pointerdown(mobile).
-	// Pointerleave is used to cancel the prefetch if the user hovers away from the image
+	// 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.
-	$p->set_attribute( 'data-wp-on--pointerenter', 'actions.prefetchImageWithDelay' );
-	$p->set_attribute( 'data-wp-on--pointerdown', 'actions.prefetchImage' );
+	$p->set_attribute( 'data-wp-on--pointerenter', 'actions.preloadImageWithDelay' );
+	$p->set_attribute( 'data-wp-on--pointerdown', 'actions.preloadImage' );
 	$p->set_attribute( 'data-wp-on--pointerleave', 'actions.cancelPrefetch' );
 	// 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
@@ -308,7 +312,14 @@ class="wp-lightbox-overlay zoom"
 				</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"
+							data-wp-bind--sizes="state.enlargedSizes"
+						>
 					</figure>
 				</div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>

packages/block-library/src/image/view.js

@@ -51,8 +51,8 @@ const { state, actions, callbacks } = store(
 	{
 		state: {
 			currentImageId: null,
-			prefetchTimers: {},
-			prefetchedImageIds: new Set(),
+			preloadTimers: {},
+			preloadedImageIds: new Set(),
 			get currentImage() {
 				return state.metadata[ state.currentImageId ];
 			},
@@ -71,6 +71,12 @@ const { state, actions, callbacks } = store(
 					'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 				);
 			},
+			get enlargedSrcset() {
+				return state.currentImage.lightboxSrcset || '';
+			},
+			get enlargedSizes() {
+				return state.currentImage.lightboxSizes || '100vw';
+			},
 			get figureStyles() {
 				return (
 					state.overlayOpened &&
@@ -211,48 +217,58 @@ const { state, actions, callbacks } = store(
 					}
 				}
 			},
-			prefetchImage() {
+			preloadImage() {
 				const { imageId } = getContext();
-				const uploadedSrc = state.metadata[ imageId ].uploadedSrc;
+				const imageMetadata = state.metadata[ imageId ];
+				const uploadedSrc = imageMetadata.uploadedSrc;
 
-				// Bails if the image is not valid or if it has already been prefetched.
+				// Bails if the image is not valid or if it has already been preloaded.
 				if (
 					! isValidLink( uploadedSrc ) ||
-					state.prefetchedImageIds.has( imageId )
+					state.preloadedImageIds.has( imageId )
 				) {
 					return;
 				}
 
+				// Get the original img element's srcset
+				const srcset = imageMetadata.lightboxSrcset;
+
 				const imageLink = document.createElement( 'link' );
-				imageLink.rel = 'prefetch';
+				imageLink.rel = 'preload';
 				imageLink.as = 'image';
 				imageLink.href = uploadedSrc;
 
+				// Apply srcset if available for better responsive preloading
+				if ( srcset ) {
+					imageLink.setAttribute( 'imagesrcset', srcset );
+					imageLink.setAttribute( 'imagesizes', '100vw' );
+				}
+
 				document.head.appendChild( imageLink );
-				state.prefetchedImageIds.add( imageId );
+				state.preloadedImageIds.add( imageId );
 			},
-			prefetchImageWithDelay() {
+			preloadImageWithDelay() {
 				const { imageId } = getContext();
 
-				// Cancels any previous prefetch timer for the same image.
-				if ( state.prefetchTimers && state.prefetchTimers[ imageId ] ) {
-					clearTimeout( state.prefetchTimers[ imageId ] );
+				// Cancels any previous preload timer for the same image.
+				if ( state.preloadTimers && state.preloadTimers[ imageId ] ) {
+					clearTimeout( state.preloadTimers[ imageId ] );
 				}
 
-				// Set a new timer to prefetch the image after a short delay.
-				state.prefetchTimers[ imageId ] = setTimeout(
+				// Set a new timer to preload the image after a short delay.
+				state.preloadTimers[ imageId ] = setTimeout(
 					withScope( () => {
-						actions.prefetchImage();
-						delete state.prefetchTimers[ imageId ];
+						actions.preloadImage();
+						delete state.preloadTimers[ imageId ];
 					} ),
 					200
 				);
 			},
 			cancelPrefetch() {
 				const { imageId } = getContext();
-				if ( state.prefetchTimers && state.prefetchTimers[ imageId ] ) {
-					clearTimeout( state.prefetchTimers[ imageId ] );
-					delete state.prefetchTimers[ imageId ];
+				if ( state.preloadTimers && state.preloadTimers[ imageId ] ) {
+					clearTimeout( state.preloadTimers[ imageId ] );
+					delete state.preloadTimers[ imageId ];
 				}
 			},
 		},

packages/html-entities/src/index.ts → packages/html-entities/src/index.js

@@ -1,9 +1,10 @@
-let _decodeTextArea: HTMLTextAreaElement | undefined;
+/** @type {HTMLTextAreaElement} */
+let _decodeTextArea;
 
 /**
  * Decodes the HTML entities from a given string.
  *
- * @param html String that contain HTML entities.
+ * @param {string} html String that contain HTML entities.
  *
  * @example
  * ```js
@@ -13,9 +14,9 @@ let _decodeTextArea: HTMLTextAreaElement | undefined;
  * console.log( result ); // result will be "á"
  * ```
  *
- * @return The decoded string.
+ * @return {string} The decoded string.
  */
-export function decodeEntities( html: string ): string {
+export function decodeEntities( html ) {
 	// Not a string, or no entities to decode.
 	if ( 'string' !== typeof html || -1 === html.indexOf( '&' ) ) {
 		return html;
@@ -36,7 +37,7 @@ export function decodeEntities( html: string ): string {
 	}
 
 	_decodeTextArea.innerHTML = html;
-	const decoded = _decodeTextArea.textContent ?? '';
+	const decoded = _decodeTextArea.textContent;
 	_decodeTextArea.innerHTML = '';
 
 	/**
@@ -56,5 +57,5 @@ export function decodeEntities( html: string ): string {
 	 *
 	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
 	 */
-	return decoded;
+	return /** @type {string} */ ( decoded );
 }

packages/html-entities/src/test/entities.ts → packages/html-entities/src/test/entities.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { decodeEntities } from '..';
+import { decodeEntities } from '../';
 
 describe( 'decodeEntities', () => {
 	it( 'should not change html with no entities', () => {