Merge initial accurate sizes work into trunk

.github/CODEOWNERS

@@ -25,9 +25,9 @@
 /tests/includes/site-health/audit-enqueued-assets                           @manuelRod
 /tests/testdata/modules/site-health/audit-enqueued-assets                   @manuelRod
 
-# Plugin: Auto-sizes for Lazy-Loaded Images
-/plugins/auto-sizes                         @joemcgill
-/tests/plugins/auto-sizes                   @joemcgill
+# Plugin: Enhanced Responsive Images
+/plugins/auto-sizes                         @joemcgill @mukeshpanchal27
+/tests/plugins/auto-sizes                   @joemcgill @mukeshpanchal27
 
 # Plugin: Embed Optimizer
 /plugins/embed-optimizer                    @adamsilverstein @westonruter

phpstan.neon.dist

@@ -19,6 +19,7 @@ parameters:
 		# See <https://github.com/php-stubs/wordpress-stubs/issues/100>.
 		- vendor/phpstan/php-8-stubs/stubs/ext/standard/str_contains.php
 		- vendor/phpstan/php-8-stubs/stubs/ext/standard/str_starts_with.php
+		- vendor/phpstan/php-8-stubs/stubs/ext/standard/str_ends_with.php
 	stubFiles:
 		- tools/phpstan/filtered-functions.stub
 	dynamicConstantNames:

plugins/auto-sizes/auto-sizes.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Plugin Name: Auto-sizes for Lazy-loaded Images
+ * Plugin Name: Enhanced Responsive Images
  * Plugin URI: https://github.com/WordPress/performance/tree/trunk/plugins/auto-sizes
  * Description: Instructs browsers to automatically choose the right image size for lazy-loaded images.
  * Requires at least: 6.5

plugins/auto-sizes/hooks.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Hook callbacks used for Auto-sizes for Lazy-loaded Images.
+ * Hook callbacks used for Enhanced Responsive Images.
  *
  * @package auto-sizes
  * @since 1.0.0
@@ -90,3 +90,129 @@ function auto_sizes_render_generator(): void {
 	echo '<meta name="generator" content="auto-sizes ' . esc_attr( IMAGE_AUTO_SIZES_VERSION ) . '">' . "\n";
 }
 add_action( 'wp_head', 'auto_sizes_render_generator' );
+
+/**
+ * Gets the smaller image size if the layout width is bigger.
+ *
+ * It will return the smaller image size and return "px" if the layout width
+ * is something else, e.g. min(640px, 90vw) or 90vw.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $layout_width The layout width.
+ * @param int    $image_width  The image width.
+ * @return string The proper width after some calculations.
+ */
+function auto_sizes_get_width( string $layout_width, int $image_width ): string {
+	if ( str_ends_with( $layout_width, 'px' ) ) {
+		return $image_width > (int) $layout_width ? $layout_width : $image_width . 'px';
+	}
+	return $image_width . 'px';
+}
+
+/**
+ * Filter the sizes attribute for images to improve the default calculation.
+ *
+ * @since n.e.x.t
+ *
+ * @param string               $content      The block content about to be rendered.
+ * @param array<string, mixed> $parsed_block The parsed block.
+ * @return string The updated block content.
+ */
+function auto_sizes_filter_image_tag( string $content, array $parsed_block ): string {
+	$processor = new WP_HTML_Tag_Processor( $content );
+	$has_image = $processor->next_tag( array( 'tag_name' => 'img' ) );
+
+	// Only update the markup if an image is found.
+	if ( $has_image ) {
+		$processor->set_attribute( 'data-needs-sizes-update', true );
+		$align = $parsed_block['attrs']['align'] ?? '';
+		if ( $align ) {
+			$processor->set_attribute( 'data-align', $align );
+		}
+
+		// Resize image width.
+		$resize_image_width = $parsed_block['attrs']['width'] ?? '';
+		if ( $resize_image_width ) {
+			$processor->set_attribute( 'data-resize-width', $resize_image_width );
+		}
+
+		$content = $processor->get_updated_html();
+	}
+	return $content;
+}
+add_filter( 'render_block_core/image', 'auto_sizes_filter_image_tag', 10, 2 );
+add_filter( 'render_block_core/cover', 'auto_sizes_filter_image_tag', 10, 2 );
+
+/**
+ * Filter the sizes attribute for images to improve the default calculation.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $content The block content about to be rendered.
+ * @return string The updated block content.
+ */
+function auto_sizes_improve_image_sizes_attributes( string $content ): string {
+	$processor = new WP_HTML_Tag_Processor( $content );
+	if ( ! $processor->next_tag( array( 'tag_name' => 'img' ) ) ) {
+		return $content;
+	}
+
+	// Skips second time parsing if already processed.
+	if ( null === $processor->get_attribute( 'data-needs-sizes-update' ) ) {
+		return $content;
+	}
+
+	$align = $processor->get_attribute( 'data-align' );
+
+	// Retrieve width from the image tag itself.
+	$image_width = $processor->get_attribute( 'width' );
+	if ( ! $image_width && ! in_array( $align, array( 'full', 'wide' ), true ) ) {
+		return $content;
+	}
+
+	$layout = wp_get_global_settings( array( 'layout' ) );
+
+	$sizes = null;
+	// Handle different alignment use cases.
+	switch ( $align ) {
+		case 'full':
+			$sizes = '100vw';
+			break;
+
+		case 'wide':
+			if ( array_key_exists( 'wideSize', $layout ) ) {
+				$sizes = sprintf( '(max-width: %1$s) 100vw, %1$s', $layout['wideSize'] );
+			}
+			break;
+
+		case 'left':
+		case 'right':
+		case 'center':
+			// Resize image width.
+			$image_width = $processor->get_attribute( 'data-resize-width' ) ?? $image_width;
+			$sizes       = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $image_width );
+			break;
+
+		default:
+			if ( array_key_exists( 'contentSize', $layout ) ) {
+				// Resize image width.
+				$image_width = $processor->get_attribute( 'data-resize-width' ) ?? $image_width;
+				$width       = auto_sizes_get_width( $layout['contentSize'], (int) $image_width );
+				$sizes       = sprintf( '(max-width: %1$s) 100vw, %1$s', $width );
+			}
+			break;
+	}
+
+	if ( $sizes ) {
+		$processor->set_attribute( 'sizes', $sizes );
+	}
+
+	$processor->remove_attribute( 'data-needs-sizes-update' );
+	$processor->remove_attribute( 'data-align' );
+	$processor->remove_attribute( 'data-resize-width' );
+
+	return $processor->get_updated_html();
+}
+// Run filter prior to auto sizes "auto_sizes_update_content_img_tag" filter.
+add_filter( 'wp_content_img_tag', 'auto_sizes_improve_image_sizes_attributes', 9 );

plugins/auto-sizes/phpcs.xml.dist

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <ruleset name="WPP-AutoSizes">
-	<description>WordPress Coding Standards for Auto-sizes for Lazy-loaded Images Plugin</description>
+	<description>WordPress Coding Standards for Enhanced Responsive Images Plugin</description>
 
 	<rule ref="../../tools/phpcs/phpcs.ruleset.xml"/>
 

plugins/auto-sizes/readme.txt

@@ -1,4 +1,4 @@
-=== Auto-sizes for Lazy-loaded Images ===
+=== Enhanced Responsive Images ===
 
 Contributors: wordpressdotorg
 Tested up to: 6.6
@@ -7,26 +7,30 @@ License:      GPLv2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         performance, images, auto-sizes
 
-Instructs browsers to automatically choose the right image size for lazy-loaded images.
+Improvements for responsive images in WordPress.
 
 == Description ==
 
-This plugin implements the HTML spec for adding `sizes="auto"` to lazy-loaded images.
-For background, see: https://github.com/whatwg/html/issues/4654.
+This plugin implements experimental enhancements for the responsive images functionality in WordPress. Currently, this includes:
+
+1. Improvements to the accuracy of the `sizes` attribute by using available layout information in the theme.
+2. Implementation of the new HTML spec for adding `sizes="auto"` to lazy-loaded images. See the HTML spec issue [Add "auto sizes" for lazy-loaded images](https://github.com/whatwg/html/issues/4654).
+
+There are currently **no settings** and no user interface for this plugin since it is designed to work without any configuration.
 
 == Installation ==
 
 = Installation from within WordPress =
 
 1. Visit **Plugins > Add New**.
-2. Search for **Auto-sizes for Lazy-loaded Images**.
-3. Install and activate the **Auto-sizes for Lazy-loaded Images** plugin.
+2. Search for **Enhanced Responsive Images**.
+3. Install and activate the **Enhanced Responsive Images** plugin.
 
 = Manual installation =
 
-1. Upload the entire `auto-sizes` folder to the `/wp-content/plugins/` directory.
+1. Upload the entire plugin folder to the `/wp-content/plugins/` directory.
 2. Visit **Plugins**.
-3. Activate the **Auto-sizes for Lazy-loaded Images** plugin.
+3. Activate the **Enhanced Responsive Images** plugin.
 
 == Frequently Asked Questions ==
 

plugins/auto-sizes/tests/test-auto-sizes.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Tests for the Auto-sizes for Lazy-loaded Images plugin.
+ * Tests for the Enhanced Responsive Images plugin.
  *
  * @package auto-sizes
  * @group   auto-sizes