Merge pull request #2004 from WordPress/feature/1511-incorporate-layout-constraints-from-ancestors

Accurate Sizes: Incorporate layout constraints in image sizes calculations

Author: mukeshpanchal27

.github/workflows/e2e-test.yml

@@ -0,0 +1,59 @@
+name: End-to-End Tests
+
+on:
+  push:
+    branches:
+      - trunk
+      - 'release/**'
+      - 'add/setup-e2e-tests'
+    paths:
+      - '.github/workflows/e2e-test.yml'
+      - 'plugins/auto-sizes/**'
+      - '**/package.json'
+      - 'package-lock.json'
+      - 'composer.json'
+      - 'composer.lock'
+  pull_request:
+    paths:
+      - '.github/workflows/e2e-test.yml'
+      - 'plugins/auto-sizes/**'
+      - '**/package.json'
+      - 'package-lock.json'
+      - 'composer.json'
+      - 'composer.lock'
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  e2e-test:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js (.nvmrc)
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build assets
+        run: npm run build
+
+      - name: Install Playwright dependencies
+        run: npx playwright install chromium --with-deps
+
+      - name: Install WordPress
+        run: npm run wp-env start
+
+      - name: Run tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: npm run test-e2e

.gitignore

@@ -3,6 +3,8 @@
 ############
 
 plugins/*/tests/**/actual.html
+artifacts
+test-results
 
 ############
 ## IDEs

package-lock.json

@@ -12,6 +12,8 @@
   },
   "devDependencies": {
     "@octokit/rest": "^21.1.1",
+    "@playwright/test": "^1.51.1",
+    "@wordpress/e2e-test-utils-playwright": "^1.21.0",
     "@wordpress/env": "^10.23.0",
     "@wordpress/prettier-config": "^4.23.0",
     "@wordpress/scripts": "^30.16.0",
@@ -52,6 +54,9 @@
     "tsc": "tsc",
     "format-php": "composer format:all",
     "phpstan": "composer phpstan",
+    "test-e2e": "wp-scripts test-playwright --config tools/e2e/playwright.config.ts",
+    "test-e2e:debug": "wp-scripts test-playwright --config tools/e2e/playwright.config.ts --ui",
+    "test-e2e:auto-sizes": "wp-scripts test-playwright --config tools/e2e/playwright.config.ts --project=auto-sizes",
     "lint-php": "composer lint:all",
     "test-php": "wp-env run tests-cli --env-cwd=/var/www/html/wp-content/plugins/performance composer test:plugins",
     "test-php-watch": "./bin/test-php-watch.sh",

package.json

@@ -3,7 +3,7 @@
  * Plugin Name: Enhanced Responsive Images
  * Plugin URI: https://github.com/WordPress/performance/tree/trunk/plugins/auto-sizes
  * Description: Improves responsive images with better sizes calculations and auto-sizes for lazy-loaded images.
- * Requires at least: 6.6
+ * Requires at least: 6.8
  * Requires PHP: 7.2
  * Version: 1.4.0
  * Author: WordPress Performance Team

plugins/auto-sizes/auto-sizes.php

@@ -41,4 +41,4 @@ function auto_sizes_render_generator(): void {
 add_filter( 'render_block_core/image', 'auto_sizes_filter_image_tag', 10, 3 );
 add_filter( 'render_block_core/cover', 'auto_sizes_filter_image_tag', 10, 3 );
 add_filter( 'get_block_type_uses_context', 'auto_sizes_filter_uses_context', 10, 2 );
-add_filter( 'render_block_context', 'auto_sizes_filter_render_block_context', 10, 2 );
+add_filter( 'render_block_context', 'auto_sizes_filter_render_block_context', 10, 3 );

plugins/auto-sizes/hooks.php

@@ -6,6 +6,19 @@
  * @since 1.4.0
  */
 
+/*
+ * Map alignment values to a weighting value so they can be compared.
+ * Note that 'left' and 'right' alignments are only constrained by max alignment.
+ */
+const AUTO_SIZES_CONSTRAINTS = array(
+	'full'    => 0,
+	'wide'    => 1,
+	'left'    => 2,
+	'right'   => 2,
+	'default' => 3,
+	'center'  => 3,
+);
+
 /**
  * Primes attachment into the cache with a single database query.
  *
@@ -82,10 +95,11 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 */
 		$filter = static function ( $sizes, $size ) use ( $block ) {
 
-			$id            = isset( $block->attributes['id'] ) ? (int) $block->attributes['id'] : 0;
-			$alignment     = $block->attributes['align'] ?? '';
-			$width         = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0;
-			$max_alignment = $block->context['max_alignment'] ?? '';
+			$id                       = isset( $block->attributes['id'] ) ? (int) $block->attributes['id'] : 0;
+			$alignment                = $block->attributes['align'] ?? '';
+			$width                    = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0;
+			$max_alignment            = $block->context['max_alignment'] ?? '';
+			$container_relative_width = $block->context['container_relative_width'] ?? 1.0;
 
 			/*
 			 * Update width for cover block.
@@ -95,7 +109,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 				$size = array( 420, 420 );
 			}
 
-			$better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment );
+			$better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment, $container_relative_width );
 
 			// If better sizes can't be calculated, use the default sizes.
 			return false !== $better_sizes ? $better_sizes : $sizes;
@@ -132,14 +146,15 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  *
  * @since 1.4.0
  *
- * @param int                    $id            The image attachment post ID.
- * @param string|array{int, int} $size          Image size name or array of width and height.
- * @param string                 $align         The image alignment.
- * @param int                    $resize_width  Resize image width.
- * @param string                 $max_alignment The maximum usable layout alignment.
+ * @param int                    $id                       The image attachment post ID.
+ * @param string|array{int, int} $size                     Image size name or array of width and height.
+ * @param string                 $align                    The image alignment.
+ * @param int                    $resize_width             Resize image width.
+ * @param string                 $max_alignment            The maximum usable layout alignment.
+ * @param float                  $container_relative_width Container relative width.
  * @return string|false An improved sizes attribute or false if a better size cannot be calculated.
  */
-function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $resize_width, string $max_alignment ) {
+function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $resize_width, string $max_alignment, float $container_relative_width ) {
 	// Bail early if not a block theme.
 	if ( ! wp_is_block_theme() ) {
 		return false;
@@ -172,18 +187,8 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $
 	// Normalize default alignment values.
 	$align = '' !== $align ? $align : 'default';
 
-	/*
-	 * Map alignment values to a weighting value so they can be compared.
-	 * Note that 'left' and 'right' alignments are only constrained by max alignment.
-	 */
-	$constraints = array(
-		'full'    => 0,
-		'wide'    => 1,
-		'left'    => 2,
-		'right'   => 2,
-		'default' => 3,
-		'center'  => 3,
-	);
+	// Use the defined constant for constraints.
+	$constraints = AUTO_SIZES_CONSTRAINTS;
 
 	$alignment = $constraints[ $align ] > $constraints[ $max_alignment ] ? $align : $max_alignment;
 
@@ -195,6 +200,18 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $
 
 		case 'wide':
 			$layout_width = auto_sizes_get_layout_width( 'wide' );
+			// TODO: Add support for em, rem, vh, and vw.
+			if (
+				str_ends_with( $layout_width, 'px' ) &&
+				( $container_relative_width > 0.0 ||
+				$container_relative_width < 1.0 )
+			) {
+				// First remove 'px' from width.
+				$layout_width = str_replace( 'px', '', $layout_width );
+				// Convert to float for better precision.
+				$layout_width = (float) $layout_width * $container_relative_width;
+				$layout_width = sprintf( '%dpx', (int) $layout_width );
+			}
 			break;
 
 		case 'left':
@@ -207,8 +224,18 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $
 			/*
 			 * If the layout width is in pixels, we can compare against the image width
 			 * on the server. Otherwise, we need to rely on CSS functions.
+			 *
+			 * TODO: Add support for em, rem, vh, and vw.
 			 */
-			if ( str_ends_with( $layout_width, 'px' ) ) {
+			if (
+				str_ends_with( $layout_width, 'px' ) &&
+				( $container_relative_width > 0.0 ||
+				$container_relative_width < 1.0 )
+			) {
+				// First remove 'px' from width.
+				$layout_width = str_replace( 'px', '', $layout_width );
+				// Convert to float for better precision.
+				$layout_width = (float) $layout_width * $container_relative_width;
 				$layout_width = sprintf( '%dpx', min( (int) $layout_width, $image_width ) );
 			} else {
 				$layout_width = sprintf( 'min(%1$s, %2$spx)', $layout_width, $image_width );
@@ -255,15 +282,18 @@ function auto_sizes_get_layout_width( string $alignment ): string {
  * @return string[] The filtered context keys used by the block type.
  */
 function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $block_type ): array {
-	// The list of blocks that can consume outer layout context.
-	$consumer_blocks = array(
-		'core/cover',
-		'core/image',
+	// Define block-specific context usage.
+	$block_specific_context = array(
+		'core/cover'   => array( 'max_alignment', 'container_relative_width' ),
+		'core/image'   => array( 'max_alignment', 'container_relative_width' ),
+		'core/group'   => array( 'max_alignment' ),
+		'core/columns' => array( 'max_alignment', 'container_relative_width' ),
+		'core/column'  => array( 'max_alignment', 'column_count' ),
 	);
 
-	if ( in_array( $block_type->name, $consumer_blocks, true ) ) {
-		// Use array_values to reset the array keys after merging.
-		return array_values( array_unique( array_merge( $uses_context, array( 'max_alignment' ) ) ) );
+	if ( isset( $block_specific_context[ $block_type->name ] ) ) {
+		// Use array_values to reset array keys after merging.
+		return array_values( array_unique( array_merge( $uses_context, $block_specific_context[ $block_type->name ] ) ) );
 	}
 	return $uses_context;
 }
@@ -273,11 +303,12 @@ function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $blo
  *
  * @since 1.4.0
  *
- * @param array<string, mixed> $context Current block context.
- * @param array<string, mixed> $block   The block being rendered.
+ * @param array<string, mixed> $context      Current block context.
+ * @param array<string, mixed> $block        The block being rendered.
+ * @param WP_Block|null        $parent_block If this is a nested block, a reference to the parent block.
  * @return array<string, mixed> Modified block context.
  */
-function auto_sizes_filter_render_block_context( array $context, array $block ): array {
+function auto_sizes_filter_render_block_context( array $context, array $block, ?WP_Block $parent_block ): array {
 	// When no max alignment is set, the maximum is assumed to be 'full'.
 	$context['max_alignment'] = $context['max_alignment'] ?? 'full';
 
@@ -288,15 +319,44 @@ function auto_sizes_filter_render_block_context( array $context, array $block ):
 	);
 
 	if ( in_array( $block['blockName'], $provider_blocks, true ) ) {
-		$alignment = $block['attrs']['align'] ?? '';
+		// Normalize default alignment values.
+		$alignment = isset( $block['attrs']['align'] ) && '' !== $block['attrs']['align'] ? $block['attrs']['align'] : 'default';
+		// Use the defined constant for constraints.
+		$constraints = AUTO_SIZES_CONSTRAINTS;
 
-		// If the container block doesn't have alignment, it's assumed to be 'default'.
-		if ( '' === $alignment ) {
-			$context['max_alignment'] = 'default';
-		} elseif ( 'wide' === $alignment ) {
-			$context['max_alignment'] = 'wide';
-		}
+		$context['max_alignment'] = $constraints[ $context['max_alignment'] ] > $constraints[ $alignment ] ? $context['max_alignment'] : $alignment;
+	}
+
+	if ( 'core/columns' === $block['blockName'] ) {
+		// This is a special context key just to pass to the child 'core/column' block.
+		$context['column_count'] = count( $block['innerBlocks'] );
 	}
 
+	if ( 'core/column' === $block['blockName'] ) {
+		$found_image_block = wp_get_first_block( $block['innerBlocks'], 'core/image' );
+		$found_cover_block = wp_get_first_block( $block['innerBlocks'], 'core/cover' );
+		if ( count( $found_image_block ) > 0 || count( $found_cover_block ) > 0 ) {
+			// Get column width, if explicitly set.
+			if ( isset( $block['attrs']['width'] ) && '' !== $block['attrs']['width'] ) {
+				$current_width = floatval( rtrim( $block['attrs']['width'], '%' ) ) / 100;
+			} elseif ( isset( $parent_block->context['column_count'] ) && $parent_block->context['column_count'] ) {
+				// Default to equally divided width if not explicitly set.
+				$current_width = 1.0 / $parent_block->context['column_count'];
+			} else {
+				// Full width fallback.
+				$current_width = 1.0;
+			}
+
+			// Multiply with parent's width if available.
+			if (
+				isset( $parent_block->context['container_relative_width'] ) &&
+				( $current_width > 0.0 || $current_width < 1.0 )
+			) {
+				$context['container_relative_width'] = $parent_block->context['container_relative_width'] * $current_width;
+			} else {
+				$context['container_relative_width'] = $current_width;
+			}
+		}
+	}
 	return $context;
 }