From 042232f6314c7fac66cfe556d3725105d99787a0 Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Mon, 25 Nov 2024 17:12:20 -0600
Subject: [PATCH 01/23] Add tests for passing parent alignment context to
 images

---
 .../tests/test-improve-calculate-sizes.php    | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index 1e8bd819ce..ca19201626 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -385,4 +385,69 @@ public function test_no_image(): void {
 
 		$this->assertStringContainsString( '<p>No image here</p>', $result );
 	}
+
+	/**
+	 * Test that the layout property of a group block is passed by context to the image block.
+	 *
+	 * @group test
+	 */
+	public function test_ancestor_layout_is_passed_by_context(): void {
+		$block_content = $this->get_group_block_markup(
+			$this->get_image_block_markup( self::$image_id, 'large', 'full' )
+		);
+
+		$result = apply_filters( 'the_content', $block_content );
+
+		$this->assertStringContainsString( 'sizes="(max-width: 620px) 100vw, 620px" ', $result );
+	}
+
+
+	/**
+	 * Helper to generate image block markup.
+	 *
+	 * @param int    $attachment_id Attachment ID.
+	 * @param string $size          Optional. Image size. Default 'full'.
+	 * @param string $align         Optional.  Image alignment. Default null.
+	 * @return string Image block markup.
+	 */
+	public function get_image_block_markup( int $attachment_id, string $size = 'full', string $align = null ): string {
+		$image_url = wp_get_attachment_image_url( $attachment_id, $size );
+
+		$atts = wp_parse_args(
+			array(
+				'id'       => $attachment_id,
+				'sizeSlug' => $size,
+				'align'    => $align,
+			),
+			array(
+				'id'              => $attachment_id,
+				'sizeSlug'        => 'large',
+				'linkDestination' => 'none',
+			)
+		);
+
+		return '<!-- wp:image ' . wp_json_encode( $atts ) . ' --><figure class="wp-block-image size-' . $size . '"><img src="' . $image_url . '" alt="" class="wp-image-' . $attachment_id . '"/></figure><!-- /wp:image -->';
+	}
+
+	/**
+	 * Helper to generate group block markup.
+	 *
+	 * @param string       $content Block content.
+	 * @param array<mixed> $atts    Optional. Block attributes. Default empty array.
+	 * @return string Group block markup.
+	 */
+	public function get_group_block_markup( string $content, array $atts = array() ): string {
+		$atts = wp_parse_args(
+			$atts,
+			array(
+				'layout' => array(
+					'type' => 'constrained',
+				),
+			)
+		);
+
+		return '<!-- wp:group ' . wp_json_encode( $atts ) . ' -->
+		<div class="wp-block-group">' . $content . '</div>
+		<!-- /wp:group -->';
+	}
 }

From 47c677912c46cf17da934f288cbe07c7dfc33943 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Tue, 26 Nov 2024 15:27:18 +0530
Subject: [PATCH 02/23] POC - Pass group block alignment context to image block

---
 .../includes/improve-calculate-sizes.php      | 109 +++++++++++++---
 .../tests/test-improve-calculate-sizes.php    | 119 +++++++++++++++++-
 2 files changed, 209 insertions(+), 19 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 61df526a23..072effdfff 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -84,6 +84,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 	if ( ! is_string( $content ) ) {
 		return '';
 	}
+
 	$processor = new WP_HTML_Tag_Processor( $content );
 	$has_image = $processor->next_tag( array( 'tag_name' => 'IMG' ) );
 
@@ -99,11 +100,13 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 * @param string $size  The image size data.
 		 */
 		$filter = static function ( $sizes, $size ) use ( $block ) {
-			$id        = $block->attributes['id'] ?? 0;
-			$alignment = $block->attributes['align'] ?? '';
-			$width     = $block->attributes['width'] ?? '';
+			$id                   = $block->attributes['id'] ?? 0;
+			$alignment            = $block->attributes['align'] ?? '';
+			$width                = $block->attributes['width'] ?? '';
+			$is_parent_block      = $block->context['is_parent_block'] ?? false;
+			$ancestor_block_align = $block->context['ancestor_block_align'] ?? '';
 
-			return auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width );
+			return auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, (bool) $is_parent_block, (string) $ancestor_block_align );
 		};
 
 		// Hook this filter early, before default filters are run.
@@ -135,50 +138,124 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 /**
  * Modifies the sizes attribute of an image based on layout context.
  *
- * @param int    $id           The image id.
- * @param string $size         The image size data.
- * @param string $align        The image alignment.
- * @param string $resize_width Resize image width.
+ * @since n.e.x.t
+ *
+ * @param int    $id                   The image id.
+ * @param string $size                 The image size data.
+ * @param string $align                The image alignment.
+ * @param string $resize_width         Resize image width.
+ * @param bool   $is_parent_block      Check if image block has parent block.
+ * @param string $ancestor_block_align The ancestor block alignment.
  * @return string The sizes attribute value.
  */
-function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width ): string {
-	$sizes = '';
+function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, bool $is_parent_block, string $ancestor_block_align ): string {
 	$image = wp_get_attachment_image_src( $id, $size );
 
 	if ( false === $image ) {
-		return $sizes;
+		return '';
 	}
 
 	// Retrieve width from the image tag itself.
 	$image_width = '' !== $resize_width ? (int) $resize_width : $image[1];
 
+	if ( $is_parent_block ) {
+		if ( 'full' === $ancestor_block_align && 'full' === $align ) {
+			return auto_sizes_get_sizes_by_block_alignments( $align, $image_width, true );
+		} elseif ( 'full' !== $ancestor_block_align && 'full' === $align ) {
+			return auto_sizes_get_sizes_by_block_alignments( $ancestor_block_align, $image_width, true );
+		} elseif ( 'full' !== $ancestor_block_align ) {
+			$parent_block_alignment_width = auto_sizes_get_sizes_by_block_alignments( $ancestor_block_align, $image_width );
+			$block_alignment_width        = auto_sizes_get_sizes_by_block_alignments( $align, $image_width );
+			if ( (int) $parent_block_alignment_width < (int) $block_alignment_width ) {
+				return sprintf( '(max-width: %1$s) 100vw, %1$s', $parent_block_alignment_width );
+			} else {
+				return sprintf( '(max-width: %1$s) 100vw, %1$s', $block_alignment_width );
+			}
+		}
+	}
+
+	return auto_sizes_get_sizes_by_block_alignments( $align, $image_width, true );
+}
+
+/**
+ * Generates the `sizes` attribute value based on block information.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $alignment   The alignment.
+ * @param int    $image_width The image width.
+ * @param bool   $print_sizes Print the sizes attribute. Default is false.
+ * @return string The sizes attribute value.
+ */
+function auto_sizes_get_sizes_by_block_alignments( string $alignment, int $image_width, bool $print_sizes = false ): string {
+	$sizes = '';
+
 	$layout = wp_get_global_settings( array( 'layout' ) );
 
 	// Handle different alignment use cases.
-	switch ( $align ) {
+	switch ( $alignment ) {
 		case 'full':
 			$sizes = '100vw';
 			break;
 
 		case 'wide':
 			if ( array_key_exists( 'wideSize', $layout ) ) {
-				$sizes = sprintf( '(max-width: %1$s) 100vw, %1$s', $layout['wideSize'] );
+				$sizes = $layout['wideSize'];
 			}
 			break;
 
 		case 'left':
 		case 'right':
 		case 'center':
-			$sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $image_width );
+			$sizes = auto_sizes_get_width( '', $image_width );
 			break;
 
 		default:
 			if ( array_key_exists( 'contentSize', $layout ) ) {
-				$width = auto_sizes_get_width( $layout['contentSize'], $image_width );
-				$sizes = sprintf( '(max-width: %1$s) 100vw, %1$s', $width );
+				$sizes = auto_sizes_get_width( $layout['contentSize'], $image_width );
 			}
 			break;
 	}
 
+	if ( $print_sizes ) {
+		$sizes = 'full' === $alignment ? $sizes : sprintf( '(max-width: %1$s) 100vw, %1$s', $sizes );
+	}
+
 	return $sizes;
 }
+
+/**
+ * Filters the context keys that a block type uses.
+ *
+ * @since n.e.x.t
+ *
+ * @param array<string> $uses_context Array of registered uses context for a block type.
+ * @param WP_Block_Type $block_type   The full block type object.
+ * @return array<string> The filtered context keys used by the block type.
+ */
+function auto_sizes_allowed_uses_context_for_image_blocks( array $uses_context, WP_Block_Type $block_type ): array {
+	if ( 'core/image' === $block_type->name ) {
+		// Use array_values to reset the array keys after merging.
+		return array_values( array_unique( array_merge( $uses_context, array( 'is_parent_block', 'ancestor_block_align' ) ) ) );
+	}
+	return $uses_context;
+}
+add_filter( 'get_block_type_uses_context', 'auto_sizes_allowed_uses_context_for_image_blocks', 10, 2 );
+
+/**
+ * Modifies the block context during rendering to blocks.
+ *
+ * @since n.e.x.t
+ *
+ * @param array<string, mixed> $context Current block context.
+ * @param array<string, mixed> $block   The block being rendered.
+ * @return array<string, mixed> Modified block context.
+ */
+function auto_sizes_modify_render_block_context( array $context, array $block ): array {
+	if ( 'core/group' === $block['blockName'] || 'core/columns' === $block['blockName'] ) {
+		$context['is_parent_block']      = true;
+		$context['ancestor_block_align'] = $block['attrs']['align'] ?? '';
+	}
+	return $context;
+}
+add_filter( 'render_block_context', 'auto_sizes_modify_render_block_context', 10, 2 );
diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index ca19201626..d3e378b463 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -390,17 +390,130 @@ public function test_no_image(): void {
 	 * Test that the layout property of a group block is passed by context to the image block.
 	 *
 	 * @group test
+	 *
+	 * @dataProvider data_ancestor_and_image_block_alignment
+	 *
+	 * @param string $ancestor_block_alignment Ancestor block alignment.
+	 * @param string $image_block_alignment    Image block alignment.
+	 * @param string $expected                 Expected output.
 	 */
-	public function test_ancestor_layout_is_passed_by_context(): void {
+	public function test_ancestor_layout_is_passed_by_context( string $ancestor_block_alignment, string $image_block_alignment, string $expected ): void {
 		$block_content = $this->get_group_block_markup(
-			$this->get_image_block_markup( self::$image_id, 'large', 'full' )
+			$this->get_image_block_markup( self::$image_id, 'large', $image_block_alignment ),
+			array(
+				'align' => $ancestor_block_alignment,
+			)
 		);
 
 		$result = apply_filters( 'the_content', $block_content );
 
-		$this->assertStringContainsString( 'sizes="(max-width: 620px) 100vw, 620px" ', $result );
+		$this->assertStringContainsString( $expected, $result );
 	}
 
+	/**
+	 * Data provider.
+	 *
+	 * @return array<string, array<int, bool|string>> The ancestor and image alignments.
+	 */
+	public function data_ancestor_and_image_block_alignment(): array {
+		return array(
+			// Parent defaule alignment.
+			'Return contentSize 620px, parent block default alignment, image block default alignment' => array(
+				'',
+				'',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+			'Return contentSize 620px, parent block default alignment, image block wide alignment'    => array(
+				'',
+				'wide',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+			'Return contentSize 620px, parent block default alignment, image block full alignment'    => array(
+				'',
+				'full',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+			'Return contentSize 620px, parent block default alignment, image block left alignment'    => array(
+				'',
+				'left',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+			'Return contentSize 620px, parent block default alignment, image block center alignment'  => array(
+				'',
+				'center',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+			'Return contentSize 620px, parent block default alignment, image block right alignment'   => array(
+				'',
+				'right',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+
+			// Parent wide alignment.
+			'Return contentSize 620px, parent block wide alignment, image block default alignment'    => array(
+				'wide',
+				'',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+			'Return wideSize 1280px, parent block wide alignment, image block wide alignment'         => array(
+				'wide',
+				'wide',
+				'sizes="(max-width: 1280px) 100vw, 1280px" ',
+			),
+			'Return wideSize 1280px, parent block wide alignment, image block full alignment'         => array(
+				'wide',
+				'full',
+				'sizes="(max-width: 1280px) 100vw, 1280px" ',
+			),
+			'Return image size 1024px, parent block wide alignment, image block left alignment'       => array(
+				'wide',
+				'left',
+				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+			),
+			'Return image size 1024px, parent block wide alignment, image block center alignment'     => array(
+				'wide',
+				'center',
+				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+			),
+			'Return image size 1024px, parent block wide alignment, image block right alignment'      => array(
+				'wide',
+				'right',
+				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+			),
+
+			// Parent full alignment.
+			'Return contentSize 620px, parent block full alignment, image block default alignment'    => array(
+				'full',
+				'',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
+			),
+			'Return wideSize 1280px, parent block full alignment, image block wide alignment'         => array(
+				'full',
+				'wide',
+				'sizes="(max-width: 1280px) 100vw, 1280px" ',
+			),
+			'Return full size, parent block full alignment, image block full alignment'               => array(
+				'full',
+				'full',
+				'sizes="100vw" ',
+			),
+			'Return image size 1024px, parent block full alignment, image block left alignment'       => array(
+				'full',
+				'left',
+				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+			),
+			'Return image size 1024px, parent block full alignment, image block center alignment'     => array(
+				'full',
+				'center',
+				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+			),
+			'Return image size 1024px, parent block full alignment, image block right alignment'      => array(
+				'full',
+				'right',
+				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+			),
+		);
+	}
 
 	/**
 	 * Helper to generate image block markup.

From 894ed572c4da6b7730fde4331c5920478bbb817f Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Tue, 26 Nov 2024 15:43:46 +0530
Subject: [PATCH 03/23] Fix spell

---
 plugins/auto-sizes/tests/test-improve-calculate-sizes.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index d3e378b463..4fa3079757 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -417,7 +417,7 @@ public function test_ancestor_layout_is_passed_by_context( string $ancestor_bloc
 	 */
 	public function data_ancestor_and_image_block_alignment(): array {
 		return array(
-			// Parent defaule alignment.
+			// Parent default alignment.
 			'Return contentSize 620px, parent block default alignment, image block default alignment' => array(
 				'',
 				'',

From cf8691a0ed189a2959e6864cad8cb1618f1f2cc1 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Tue, 26 Nov 2024 16:17:21 +0530
Subject: [PATCH 04/23] Clean up

---
 .../auto-sizes/tests/test-improve-calculate-sizes.php  | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index 4fa3079757..7f39c8bbce 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -520,21 +520,17 @@ public function data_ancestor_and_image_block_alignment(): array {
 	 *
 	 * @param int    $attachment_id Attachment ID.
 	 * @param string $size          Optional. Image size. Default 'full'.
-	 * @param string $align         Optional.  Image alignment. Default null.
+	 * @param string $align         Optional. Image alignment. Default null.
 	 * @return string Image block markup.
 	 */
 	public function get_image_block_markup( int $attachment_id, string $size = 'full', string $align = null ): string {
 		$image_url = wp_get_attachment_image_url( $attachment_id, $size );
 
 		$atts = wp_parse_args(
-			array(
-				'id'       => $attachment_id,
-				'sizeSlug' => $size,
-				'align'    => $align,
-			),
 			array(
 				'id'              => $attachment_id,
-				'sizeSlug'        => 'large',
+				'sizeSlug'        => $size,
+				'align'           => $align,
 				'linkDestination' => 'none',
 			)
 		);

From 93d3f08be42e97b74cf301a05895002f8fd8d922 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Thu, 28 Nov 2024 09:31:37 +0530
Subject: [PATCH 05/23] Remove test group from unit test

---
 plugins/auto-sizes/tests/test-improve-calculate-sizes.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index 7f39c8bbce..dd578800b7 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -389,8 +389,6 @@ public function test_no_image(): void {
 	/**
 	 * Test that the layout property of a group block is passed by context to the image block.
 	 *
-	 * @group test
-	 *
 	 * @dataProvider data_ancestor_and_image_block_alignment
 	 *
 	 * @param string $ancestor_block_alignment Ancestor block alignment.

From f1ec64d43e50694917c4e0e83d3b59803ef92b1b Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Thu, 28 Nov 2024 09:39:35 +0530
Subject: [PATCH 06/23] Move add_filter() calls in hooks.php

---
 plugins/auto-sizes/hooks.php                            | 2 ++
 plugins/auto-sizes/includes/improve-calculate-sizes.php | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/auto-sizes/hooks.php b/plugins/auto-sizes/hooks.php
index 45612d9af2..21899cd332 100644
--- a/plugins/auto-sizes/hooks.php
+++ b/plugins/auto-sizes/hooks.php
@@ -38,3 +38,5 @@ function auto_sizes_render_generator(): void {
 add_filter( 'the_content', 'auto_sizes_prime_attachment_caches', 9 ); // This must run before 'do_blocks', which runs at priority 9.
 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_allowed_uses_context_for_image_blocks', 10, 2 );
+add_filter( 'render_block_context', 'auto_sizes_modify_render_block_context', 10, 2 );
diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 072effdfff..4adc86555e 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -240,7 +240,6 @@ function auto_sizes_allowed_uses_context_for_image_blocks( array $uses_context,
 	}
 	return $uses_context;
 }
-add_filter( 'get_block_type_uses_context', 'auto_sizes_allowed_uses_context_for_image_blocks', 10, 2 );
 
 /**
  * Modifies the block context during rendering to blocks.
@@ -258,4 +257,3 @@ function auto_sizes_modify_render_block_context( array $context, array $block ):
 	}
 	return $context;
 }
-add_filter( 'render_block_context', 'auto_sizes_modify_render_block_context', 10, 2 );

From 27357137e6afc1e5378b7fefbf204dee01ef2ce8 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Thu, 28 Nov 2024 09:43:42 +0530
Subject: [PATCH 07/23] Remove unused wp_parse_args from unit test

---
 .../tests/test-improve-calculate-sizes.php           | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index dd578800b7..188d73065d 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -524,13 +524,11 @@ public function data_ancestor_and_image_block_alignment(): array {
 	public function get_image_block_markup( int $attachment_id, string $size = 'full', string $align = null ): string {
 		$image_url = wp_get_attachment_image_url( $attachment_id, $size );
 
-		$atts = wp_parse_args(
-			array(
-				'id'              => $attachment_id,
-				'sizeSlug'        => $size,
-				'align'           => $align,
-				'linkDestination' => 'none',
-			)
+		$atts = array(
+			'id'              => $attachment_id,
+			'sizeSlug'        => $size,
+			'align'           => $align,
+			'linkDestination' => 'none',
 		);
 
 		return '<!-- wp:image ' . wp_json_encode( $atts ) . ' --><figure class="wp-block-image size-' . $size . '"><img src="' . $image_url . '" alt="" class="wp-image-' . $attachment_id . '"/></figure><!-- /wp:image -->';

From b84d33e5399b03ed9a25883be6e6e15c02c774cd Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Thu, 28 Nov 2024 10:26:28 +0530
Subject: [PATCH 08/23] Remove parent block context instead use existing key
 for check

---
 .../includes/improve-calculate-sizes.php          | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 4adc86555e..12bc6e83e8 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -99,14 +99,14 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 * @param string $sizes The image sizes attribute value.
 		 * @param string $size  The image size data.
 		 */
-		$filter = static function ( $sizes, $size ) use ( $block ) {
+		$filter = static function ( $sizes, $size ) use ( $block, $parsed_block ) {
 			$id                   = $block->attributes['id'] ?? 0;
 			$alignment            = $block->attributes['align'] ?? '';
 			$width                = $block->attributes['width'] ?? '';
-			$is_parent_block      = $block->context['is_parent_block'] ?? false;
+			$has_parent_block     = isset( $parsed_block['parentLayout'] );
 			$ancestor_block_align = $block->context['ancestor_block_align'] ?? '';
 
-			return auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, (bool) $is_parent_block, (string) $ancestor_block_align );
+			return auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, $has_parent_block, (string) $ancestor_block_align );
 		};
 
 		// Hook this filter early, before default filters are run.
@@ -144,11 +144,11 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  * @param string $size                 The image size data.
  * @param string $align                The image alignment.
  * @param string $resize_width         Resize image width.
- * @param bool   $is_parent_block      Check if image block has parent block.
+ * @param bool   $has_parent_block     Check if image block has parent block.
  * @param string $ancestor_block_align The ancestor block alignment.
  * @return string The sizes attribute value.
  */
-function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, bool $is_parent_block, string $ancestor_block_align ): string {
+function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, bool $has_parent_block, string $ancestor_block_align ): string {
 	$image = wp_get_attachment_image_src( $id, $size );
 
 	if ( false === $image ) {
@@ -158,7 +158,7 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 	// Retrieve width from the image tag itself.
 	$image_width = '' !== $resize_width ? (int) $resize_width : $image[1];
 
-	if ( $is_parent_block ) {
+	if ( $has_parent_block ) {
 		if ( 'full' === $ancestor_block_align && 'full' === $align ) {
 			return auto_sizes_get_sizes_by_block_alignments( $align, $image_width, true );
 		} elseif ( 'full' !== $ancestor_block_align && 'full' === $align ) {
@@ -236,7 +236,7 @@ function auto_sizes_get_sizes_by_block_alignments( string $alignment, int $image
 function auto_sizes_allowed_uses_context_for_image_blocks( array $uses_context, WP_Block_Type $block_type ): array {
 	if ( 'core/image' === $block_type->name ) {
 		// Use array_values to reset the array keys after merging.
-		return array_values( array_unique( array_merge( $uses_context, array( 'is_parent_block', 'ancestor_block_align' ) ) ) );
+		return array_values( array_unique( array_merge( $uses_context, array( 'ancestor_block_align' ) ) ) );
 	}
 	return $uses_context;
 }
@@ -252,7 +252,6 @@ function auto_sizes_allowed_uses_context_for_image_blocks( array $uses_context,
  */
 function auto_sizes_modify_render_block_context( array $context, array $block ): array {
 	if ( 'core/group' === $block['blockName'] || 'core/columns' === $block['blockName'] ) {
-		$context['is_parent_block']      = true;
 		$context['ancestor_block_align'] = $block['attrs']['align'] ?? '';
 	}
 	return $context;

From 5a9ce372df91190a8baa32411766164a5bdc6f48 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Thu, 28 Nov 2024 11:09:10 +0530
Subject: [PATCH 09/23] Bump unit test WP version to 6.6

---
 .github/workflows/php-test-plugins.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/php-test-plugins.yml b/.github/workflows/php-test-plugins.yml
index 3594515140..97e862abfd 100644
--- a/.github/workflows/php-test-plugins.yml
+++ b/.github/workflows/php-test-plugins.yml
@@ -46,7 +46,7 @@ jobs:
         coverage: [false]
         include:
           - php: '7.4'
-            wp: '6.5'
+            wp: '6.6'
           - php: '8.3'
             wp: 'trunk'
           - php: '8.2'

From de77338cd9228272462164ae1542f2582ee16008 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Mon, 2 Dec 2024 15:44:34 +0530
Subject: [PATCH 10/23] implement static cache

---
 .../includes/improve-calculate-sizes.php        | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 12bc6e83e8..9069029a2f 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -190,7 +190,7 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 function auto_sizes_get_sizes_by_block_alignments( string $alignment, int $image_width, bool $print_sizes = false ): string {
 	$sizes = '';
 
-	$layout = wp_get_global_settings( array( 'layout' ) );
+	$layout = auto_sizes_get_layout_settings();
 
 	// Handle different alignment use cases.
 	switch ( $alignment ) {
@@ -256,3 +256,18 @@ function auto_sizes_modify_render_block_context( array $context, array $block ):
 	}
 	return $context;
 }
+
+/**
+ * Retrieves the layout settings defined in theme.json.
+ *
+ * @since n.e.x.t
+ *
+ * @return array<string, mixed> Associative array of layout settings.
+ */
+function auto_sizes_get_layout_settings(): array {
+	static $layout = array();
+	if ( count( $layout ) === 0 ) {
+		$layout = wp_get_global_settings( array( 'layout' ) );
+	}
+	return $layout;
+}

From ae82ccd0e76d36dec1e3d4313b883d8b22499e5b Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Tue, 3 Dec 2024 16:07:58 +0530
Subject: [PATCH 11/23] Separate function for width calculation and format
 sizes attribute

---
 .../includes/improve-calculate-sizes.php      | 70 +++++++++++++++++--
 1 file changed, 63 insertions(+), 7 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 9069029a2f..c5fdf78b4c 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -160,21 +160,77 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 
 	if ( $has_parent_block ) {
 		if ( 'full' === $ancestor_block_align && 'full' === $align ) {
-			return auto_sizes_get_sizes_by_block_alignments( $align, $image_width, true );
+			$width = auto_sizes_calculate_width( $align, $image_width );
+			return auto_sizes_format_sizes_attribute( $align, $width );
 		} elseif ( 'full' !== $ancestor_block_align && 'full' === $align ) {
-			return auto_sizes_get_sizes_by_block_alignments( $ancestor_block_align, $image_width, true );
+			$width = auto_sizes_calculate_width( $ancestor_block_align, $image_width );
+			return auto_sizes_format_sizes_attribute( $ancestor_block_align, $width );
 		} elseif ( 'full' !== $ancestor_block_align ) {
-			$parent_block_alignment_width = auto_sizes_get_sizes_by_block_alignments( $ancestor_block_align, $image_width );
-			$block_alignment_width        = auto_sizes_get_sizes_by_block_alignments( $align, $image_width );
+			$parent_block_alignment_width = auto_sizes_calculate_width( $ancestor_block_align, $image_width );
+			$block_alignment_width        = auto_sizes_calculate_width( $align, $image_width );
 			if ( (int) $parent_block_alignment_width < (int) $block_alignment_width ) {
-				return sprintf( '(max-width: %1$s) 100vw, %1$s', $parent_block_alignment_width );
+				return auto_sizes_format_sizes_attribute( $ancestor_block_align, $parent_block_alignment_width );
 			} else {
-				return sprintf( '(max-width: %1$s) 100vw, %1$s', $block_alignment_width );
+				return auto_sizes_format_sizes_attribute( $align, $block_alignment_width );
 			}
 		}
 	}
 
-	return auto_sizes_get_sizes_by_block_alignments( $align, $image_width, true );
+	$width = auto_sizes_calculate_width( $align, $image_width );
+	return auto_sizes_format_sizes_attribute( $align, $width );
+}
+
+/**
+ * Calculates the width value for the `sizes` attribute based on block information.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $alignment   The alignment.
+ * @param int    $image_width The image width.
+ * @return string The calculated width value.
+ */
+function auto_sizes_calculate_width( string $alignment, int $image_width ): string {
+	$sizes  = '';
+	$layout = auto_sizes_get_layout_settings();
+
+	// Handle different alignment use cases.
+	switch ( $alignment ) {
+		case 'full':
+			$sizes = '100vw';
+			break;
+
+		case 'wide':
+			$sizes = array_key_exists( 'wideSize', $layout ) ? $layout['wideSize'] : '';
+			break;
+
+		case 'left':
+		case 'right':
+		case 'center':
+			$sizes = auto_sizes_get_width( '', $image_width );
+			break;
+
+		default:
+			$sizes = array_key_exists( 'contentSize', $layout )
+				? auto_sizes_get_width( $layout['contentSize'], $image_width )
+				: '';
+			break;
+	}
+	return $sizes;
+}
+
+/**
+ * Formats the `sizes` attribute value.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $alignment The alignment.
+ * @param string $width     The calculated width value.
+ * @return string The formatted sizes attribute value.
+ */
+function auto_sizes_format_sizes_attribute( string $alignment, string $width ): string {
+	return 'full' === $alignment
+		? $width
+		: sprintf( '(max-width: %1$s) 100vw, %1$s', $width );
 }
 
 /**

From 8189d71f63d66b35d541658c37ad23eaad6cf050 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Tue, 3 Dec 2024 16:25:50 +0530
Subject: [PATCH 12/23] Remove unused old function

---
 .../includes/improve-calculate-sizes.php      | 47 -------------------
 1 file changed, 47 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index c5fdf78b4c..7112da9be5 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -233,53 +233,6 @@ function auto_sizes_format_sizes_attribute( string $alignment, string $width ):
 		: sprintf( '(max-width: %1$s) 100vw, %1$s', $width );
 }
 
-/**
- * Generates the `sizes` attribute value based on block information.
- *
- * @since n.e.x.t
- *
- * @param string $alignment   The alignment.
- * @param int    $image_width The image width.
- * @param bool   $print_sizes Print the sizes attribute. Default is false.
- * @return string The sizes attribute value.
- */
-function auto_sizes_get_sizes_by_block_alignments( string $alignment, int $image_width, bool $print_sizes = false ): string {
-	$sizes = '';
-
-	$layout = auto_sizes_get_layout_settings();
-
-	// Handle different alignment use cases.
-	switch ( $alignment ) {
-		case 'full':
-			$sizes = '100vw';
-			break;
-
-		case 'wide':
-			if ( array_key_exists( 'wideSize', $layout ) ) {
-				$sizes = $layout['wideSize'];
-			}
-			break;
-
-		case 'left':
-		case 'right':
-		case 'center':
-			$sizes = auto_sizes_get_width( '', $image_width );
-			break;
-
-		default:
-			if ( array_key_exists( 'contentSize', $layout ) ) {
-				$sizes = auto_sizes_get_width( $layout['contentSize'], $image_width );
-			}
-			break;
-	}
-
-	if ( $print_sizes ) {
-		$sizes = 'full' === $alignment ? $sizes : sprintf( '(max-width: %1$s) 100vw, %1$s', $sizes );
-	}
-
-	return $sizes;
-}
-
 /**
  * Filters the context keys that a block type uses.
  *

From 25d95ea72da9fce577832b5f5ad17ae6fd248f9f Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Tue, 3 Dec 2024 11:40:07 -0600
Subject: [PATCH 13/23] Rename filter callbacks for consistency

---
 plugins/auto-sizes/hooks.php                            | 4 ++--
 plugins/auto-sizes/includes/improve-calculate-sizes.php | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/auto-sizes/hooks.php b/plugins/auto-sizes/hooks.php
index 21899cd332..55cbe9dec2 100644
--- a/plugins/auto-sizes/hooks.php
+++ b/plugins/auto-sizes/hooks.php
@@ -38,5 +38,5 @@ function auto_sizes_render_generator(): void {
 add_filter( 'the_content', 'auto_sizes_prime_attachment_caches', 9 ); // This must run before 'do_blocks', which runs at priority 9.
 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_allowed_uses_context_for_image_blocks', 10, 2 );
-add_filter( 'render_block_context', 'auto_sizes_modify_render_block_context', 10, 2 );
+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 );
diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 7112da9be5..6a840c3280 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -242,7 +242,7 @@ function auto_sizes_format_sizes_attribute( string $alignment, string $width ):
  * @param WP_Block_Type $block_type   The full block type object.
  * @return array<string> The filtered context keys used by the block type.
  */
-function auto_sizes_allowed_uses_context_for_image_blocks( array $uses_context, WP_Block_Type $block_type ): array {
+function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $block_type ): array {
 	if ( 'core/image' === $block_type->name ) {
 		// Use array_values to reset the array keys after merging.
 		return array_values( array_unique( array_merge( $uses_context, array( 'ancestor_block_align' ) ) ) );
@@ -259,7 +259,7 @@ function auto_sizes_allowed_uses_context_for_image_blocks( array $uses_context,
  * @param array<string, mixed> $block   The block being rendered.
  * @return array<string, mixed> Modified block context.
  */
-function auto_sizes_modify_render_block_context( array $context, array $block ): array {
+function auto_sizes_filter_render_block_context( array $context, array $block ): array {
 	if ( 'core/group' === $block['blockName'] || 'core/columns' === $block['blockName'] ) {
 		$context['ancestor_block_align'] = $block['attrs']['align'] ?? '';
 	}

From 9677bca256489e5a89080cadcc560e5897c0dd5b Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Thu, 5 Dec 2024 10:48:54 -0600
Subject: [PATCH 14/23] Simplify passing of context for sizes calculation

This removes the need to pass whether there is a parent block by comparing the constraints of the parent block prior to calling `auto_sizes_calculate_width()`.
---
 .../includes/improve-calculate-sizes.php      | 137 ++++++++++--------
 .../tests/test-improve-calculate-sizes.php    |  12 +-
 2 files changed, 88 insertions(+), 61 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 6a840c3280..32792bf313 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -99,14 +99,17 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 * @param string $sizes The image sizes attribute value.
 		 * @param string $size  The image size data.
 		 */
-		$filter = static function ( $sizes, $size ) use ( $block, $parsed_block ) {
+		$filter = static function ( $sizes, $size ) use ( $block ) {
+
 			$id                   = $block->attributes['id'] ?? 0;
 			$alignment            = $block->attributes['align'] ?? '';
 			$width                = $block->attributes['width'] ?? '';
-			$has_parent_block     = isset( $parsed_block['parentLayout'] );
-			$ancestor_block_align = $block->context['ancestor_block_align'] ?? '';
+			$ancestor_block_align = $block->context['ancestor_block_align'] ?? 'full';
+
+			$better_sizes = auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, (string) $ancestor_block_align );
 
-			return auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, $has_parent_block, (string) $ancestor_block_align );
+			// If better sizes can't be calculated, use the default sizes.
+			return false !== $better_sizes ? $better_sizes : $sizes;
 		};
 
 		// Hook this filter early, before default filters are run.
@@ -144,40 +147,72 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  * @param string $size                 The image size data.
  * @param string $align                The image alignment.
  * @param string $resize_width         Resize image width.
- * @param bool   $has_parent_block     Check if image block has parent block.
  * @param string $ancestor_block_align The ancestor block alignment.
- * @return string The sizes attribute value.
+ * @return string|false An improved sizes attribute or false if a better size cannot be calculated.
  */
-function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, bool $has_parent_block, string $ancestor_block_align ): string {
-	$image = wp_get_attachment_image_src( $id, $size );
+function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, string $ancestor_block_align ) {
+	// Without an image ID or a resize width, we cannot calculate a better size.
+	if ( ! (bool) $id && ! (bool) $resize_width ) {
+		return false;
+	}
 
-	if ( false === $image ) {
-		return '';
+	$image_data = wp_get_attachment_image_src( $id, $size );
+
+	$resize_width = (int) $resize_width;
+	$image_width  = false !== $image_data ? $image_data[1] : 0;
+
+	// If we don't have an image width or a resize width, we cannot calculate a better size.
+	if ( ! ( (bool) $image_width || (bool) $resize_width ) ) {
+		return false;
 	}
 
-	// Retrieve width from the image tag itself.
-	$image_width = '' !== $resize_width ? (int) $resize_width : $image[1];
-
-	if ( $has_parent_block ) {
-		if ( 'full' === $ancestor_block_align && 'full' === $align ) {
-			$width = auto_sizes_calculate_width( $align, $image_width );
-			return auto_sizes_format_sizes_attribute( $align, $width );
-		} elseif ( 'full' !== $ancestor_block_align && 'full' === $align ) {
-			$width = auto_sizes_calculate_width( $ancestor_block_align, $image_width );
-			return auto_sizes_format_sizes_attribute( $ancestor_block_align, $width );
-		} elseif ( 'full' !== $ancestor_block_align ) {
-			$parent_block_alignment_width = auto_sizes_calculate_width( $ancestor_block_align, $image_width );
-			$block_alignment_width        = auto_sizes_calculate_width( $align, $image_width );
-			if ( (int) $parent_block_alignment_width < (int) $block_alignment_width ) {
-				return auto_sizes_format_sizes_attribute( $ancestor_block_align, $parent_block_alignment_width );
-			} else {
-				return auto_sizes_format_sizes_attribute( $align, $block_alignment_width );
-			}
-		}
+	/*
+	 * If we don't have an image width, use the resize width.
+	 * If we have both an image width and a resize width, use the smaller of the two.
+	 */
+	if ( ! (bool) $image_width ) {
+		$image_width = $resize_width;
+	} elseif ( (bool) $resize_width ) {
+		$image_width = min( $image_width, $resize_width );
 	}
 
-	$width = auto_sizes_calculate_width( $align, $image_width );
-	return auto_sizes_format_sizes_attribute( $align, $width );
+	// Normalize default alignment values.
+	$align                = '' !== $align ? $align : 'default';
+	$ancestor_block_align = '' !== $ancestor_block_align ? $ancestor_block_align : 'default';
+
+	// We'll choose which alignment to use, based on which is more constraining.
+	$constraint = array(
+		'full'    => 0,
+		'wide'    => 1,
+		'left'    => 2,
+		'right'   => 2,
+		'center'  => 2,
+		'default' => 3,
+	);
+
+	$alignment = $constraint[ $align ] > $constraint[ $ancestor_block_align ] ? $align : $ancestor_block_align;
+
+	return auto_sizes_calculate_width( $alignment, $image_width, $ancestor_block_align );
+}
+
+/**
+ * Retrieves the layout width for an alignment defined in theme.json.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $alignment The alignment value.
+ * @return string The alignment width based.
+ */
+function auto_sizes_get_layout_width( string $alignment ): string {
+	$layout = auto_sizes_get_layout_settings();
+
+	$layout_widths = array(
+		'full'    => '100vw',
+		'wide'    => array_key_exists( 'wideSize', $layout ) ? $layout['wideSize'] : '',
+		'default' => array_key_exists( 'contentSize', $layout ) ? $layout['contentSize'] : '',
+	);
+
+	return $layout_widths[ $alignment ] ?? '';
 }
 
 /**
@@ -185,52 +220,40 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
  *
  * @since n.e.x.t
  *
- * @param string $alignment   The alignment.
- * @param int    $image_width The image width.
+ * @param string $alignment          The alignment.
+ * @param int    $image_width        The image width.
+ * @param string $ancestor_alignment The ancestor alignment.
  * @return string The calculated width value.
  */
-function auto_sizes_calculate_width( string $alignment, int $image_width ): string {
-	$sizes  = '';
-	$layout = auto_sizes_get_layout_settings();
+function auto_sizes_calculate_width( string $alignment, int $image_width, string $ancestor_alignment ): string {
+	$sizes = '';
 
 	// Handle different alignment use cases.
 	switch ( $alignment ) {
 		case 'full':
-			$sizes = '100vw';
+			$layout_width = auto_sizes_get_layout_width( 'full' );
 			break;
 
 		case 'wide':
-			$sizes = array_key_exists( 'wideSize', $layout ) ? $layout['wideSize'] : '';
+			$layout_width = auto_sizes_get_layout_width( 'wide' );
 			break;
 
 		case 'left':
 		case 'right':
 		case 'center':
-			$sizes = auto_sizes_get_width( '', $image_width );
+			// Todo: use smaller fo the two values.
+			$content_width = auto_sizes_get_layout_width( $ancestor_alignment );
+			$layout_width  = sprintf( '%1$spx', $image_width );
 			break;
 
 		default:
-			$sizes = array_key_exists( 'contentSize', $layout )
-				? auto_sizes_get_width( $layout['contentSize'], $image_width )
-				: '';
+			// Todo: use smaller fo the two values.
+			$content_width = auto_sizes_get_layout_width( 'default' );
+			$layout_width  = min( (int) $content_width, $image_width ) . 'px';
 			break;
 	}
-	return $sizes;
-}
 
-/**
- * Formats the `sizes` attribute value.
- *
- * @since n.e.x.t
- *
- * @param string $alignment The alignment.
- * @param string $width     The calculated width value.
- * @return string The formatted sizes attribute value.
- */
-function auto_sizes_format_sizes_attribute( string $alignment, string $width ): string {
-	return 'full' === $alignment
-		? $width
-		: sprintf( '(max-width: %1$s) 100vw, %1$s', $width );
+	return 'full' === $alignment ? $layout_width : sprintf( '(max-width: %1$s) 100vw, %1$s', $layout_width );
 }
 
 /**
diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index 188d73065d..dbdac70395 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -62,7 +62,7 @@ public function test_that_if_disable_responsive_image_then_it_will_not_add_sizes
 	 * @param string $image_size Image size.
 	 */
 	public function test_image_block_with_full_alignment( string $image_size ): void {
-		$block_content = '<!-- wp:image {"id":' . self::$image_id . ',"sizeSlug":"' . $image_size . '","linkDestination":"none","align":"full"} --><figure class="wp-block-image size-' . $image_size . '"><img src="' . wp_get_attachment_image_url( self::$image_id, $image_size ) . '" alt="" class="wp-image-' . self::$image_id . '"/></figure><!-- /wp:image -->';
+		$block_content = $this->get_image_block_markup( self::$image_id, $image_size, 'full' );
 
 		$result = apply_filters( 'the_content', $block_content );
 
@@ -93,7 +93,7 @@ public function test_cover_block_with_full_alignment(): void {
 	 * @param string $image_size Image size.
 	 */
 	public function test_image_block_with_wide_alignment( string $image_size ): void {
-		$block_content = '<!-- wp:image {"id":' . self::$image_id . ',"sizeSlug":"' . $image_size . '","linkDestination":"none","align":"wide"} --><figure class="wp-block-image size-' . $image_size . '"><img src="' . wp_get_attachment_image_url( self::$image_id, $image_size ) . '" alt="" class="wp-image-' . self::$image_id . '"/></figure><!-- /wp:image -->';
+		$block_content = $this->get_image_block_markup( self::$image_id, $image_size, 'wide' );
 
 		$result = apply_filters( 'the_content', $block_content );
 
@@ -531,7 +531,9 @@ public function get_image_block_markup( int $attachment_id, string $size = 'full
 			'linkDestination' => 'none',
 		);
 
-		return '<!-- wp:image ' . wp_json_encode( $atts ) . ' --><figure class="wp-block-image size-' . $size . '"><img src="' . $image_url . '" alt="" class="wp-image-' . $attachment_id . '"/></figure><!-- /wp:image -->';
+		$align_class = null !== $align ? ' align' . $align : '';
+
+		return '<!-- wp:image ' . wp_json_encode( $atts ) . ' --><figure class="wp-block-image size-' . $size . $align_class . '"><img src="' . $image_url . '" alt="" class="wp-image-' . $attachment_id . '"/></figure><!-- /wp:image -->';
 	}
 
 	/**
@@ -551,8 +553,10 @@ public function get_group_block_markup( string $content, array $atts = array() )
 			)
 		);
 
+		$align_class = isset( $atts['align'] ) ? ' align' . $atts['align'] : '';
+
 		return '<!-- wp:group ' . wp_json_encode( $atts ) . ' -->
-		<div class="wp-block-group">' . $content . '</div>
+		<div class="wp-block-group' . $align_class . '">' . $content . '</div>
 		<!-- /wp:group -->';
 	}
 }

From 5c6f7fdf55c3a2a0e61704cab65e2fd4f7719e1a Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Thu, 5 Dec 2024 15:22:24 -0600
Subject: [PATCH 15/23] Simplify context logic further

---
 .../includes/improve-calculate-sizes.php      | 131 ++++++++++--------
 .../tests/test-improve-calculate-sizes.php    |   2 +-
 2 files changed, 73 insertions(+), 60 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 32792bf313..e761acc9e9 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -101,12 +101,12 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 */
 		$filter = static function ( $sizes, $size ) use ( $block ) {
 
-			$id                   = $block->attributes['id'] ?? 0;
-			$alignment            = $block->attributes['align'] ?? '';
-			$width                = $block->attributes['width'] ?? '';
-			$ancestor_block_align = $block->context['ancestor_block_align'] ?? 'full';
+			$id            = $block->attributes['id'] ?? 0;
+			$alignment     = $block->attributes['align'] ?? '';
+			$width         = $block->attributes['width'] ?? '';
+			$max_alignment = $block->context['max_alignment'];
 
-			$better_sizes = auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, (string) $ancestor_block_align );
+			$better_sizes = auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, (string) $max_alignment );
 
 			// If better sizes can't be calculated, use the default sizes.
 			return false !== $better_sizes ? $better_sizes : $sizes;
@@ -147,10 +147,10 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  * @param string $size                 The image size data.
  * @param string $align                The image alignment.
  * @param string $resize_width         Resize image width.
- * @param string $ancestor_block_align The ancestor block alignment.
+ * @param string $max_alignment        The maximum usable layout alignment.
  * @return string|false An improved sizes attribute or false if a better size cannot be calculated.
  */
-function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, string $ancestor_block_align ) {
+function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, string $max_alignment ) {
 	// Without an image ID or a resize width, we cannot calculate a better size.
 	if ( ! (bool) $id && ! (bool) $resize_width ) {
 		return false;
@@ -177,11 +177,13 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 	}
 
 	// Normalize default alignment values.
-	$align                = '' !== $align ? $align : 'default';
-	$ancestor_block_align = '' !== $ancestor_block_align ? $ancestor_block_align : 'default';
+	$align = (bool) $align ? $align : 'default';
 
-	// We'll choose which alignment to use, based on which is more constraining.
-	$constraint = array(
+	/*
+	 * Map alignment values to a weighting value so they can be compared.
+	 * Note that 'left', 'right', and 'center' alignments are only constrained by default containers.
+	 */
+	$constraints = array(
 		'full'    => 0,
 		'wide'    => 1,
 		'left'    => 2,
@@ -190,43 +192,7 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 		'default' => 3,
 	);
 
-	$alignment = $constraint[ $align ] > $constraint[ $ancestor_block_align ] ? $align : $ancestor_block_align;
-
-	return auto_sizes_calculate_width( $alignment, $image_width, $ancestor_block_align );
-}
-
-/**
- * Retrieves the layout width for an alignment defined in theme.json.
- *
- * @since n.e.x.t
- *
- * @param string $alignment The alignment value.
- * @return string The alignment width based.
- */
-function auto_sizes_get_layout_width( string $alignment ): string {
-	$layout = auto_sizes_get_layout_settings();
-
-	$layout_widths = array(
-		'full'    => '100vw',
-		'wide'    => array_key_exists( 'wideSize', $layout ) ? $layout['wideSize'] : '',
-		'default' => array_key_exists( 'contentSize', $layout ) ? $layout['contentSize'] : '',
-	);
-
-	return $layout_widths[ $alignment ] ?? '';
-}
-
-/**
- * Calculates the width value for the `sizes` attribute based on block information.
- *
- * @since n.e.x.t
- *
- * @param string $alignment          The alignment.
- * @param int    $image_width        The image width.
- * @param string $ancestor_alignment The ancestor alignment.
- * @return string The calculated width value.
- */
-function auto_sizes_calculate_width( string $alignment, int $image_width, string $ancestor_alignment ): string {
-	$sizes = '';
+	$alignment = $constraints[ $align ] > $constraints[ $max_alignment ] ? $align : $max_alignment;
 
 	// Handle different alignment use cases.
 	switch ( $alignment ) {
@@ -241,19 +207,43 @@ function auto_sizes_calculate_width( string $alignment, int $image_width, string
 		case 'left':
 		case 'right':
 		case 'center':
-			// Todo: use smaller fo the two values.
-			$content_width = auto_sizes_get_layout_width( $ancestor_alignment );
-			$layout_width  = sprintf( '%1$spx', $image_width );
+			// These alignment get constrained by the wide layout size but do not get stretched.
+			$alignment    = auto_sizes_get_layout_width( 'wide' );
+			$layout_width = sprintf( '%1$spx', min( (int) $alignment, $image_width ) );
 			break;
 
 		default:
-			// Todo: use smaller fo the two values.
-			$content_width = auto_sizes_get_layout_width( 'default' );
-			$layout_width  = min( (int) $content_width, $image_width ) . 'px';
+			$alignment    = auto_sizes_get_layout_width( 'default' );
+			$layout_width = sprintf( '%1$spx', min( (int) $alignment, $image_width ) );
 			break;
 	}
 
-	return 'full' === $alignment ? $layout_width : sprintf( '(max-width: %1$s) 100vw, %1$s', $layout_width );
+	// Format layout width when not 'full'.
+	if ( 'full' !== $alignment ) {
+		$layout_width = sprintf( '(max-width: %1$s) 100vw, %1$s', $layout_width );
+	}
+
+	return $layout_width;
+}
+
+/**
+ * Retrieves the layout width for an alignment defined in theme.json.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $alignment The alignment value.
+ * @return string The alignment width based.
+ */
+function auto_sizes_get_layout_width( string $alignment ): string {
+	$layout = auto_sizes_get_layout_settings();
+
+	$layout_widths = array(
+		'full'    => '100vw', // Todo: incorporate useRootPaddingAwareAlignments.
+		'wide'    => array_key_exists( 'wideSize', $layout ) ? $layout['wideSize'] : '',
+		'default' => array_key_exists( 'contentSize', $layout ) ? $layout['contentSize'] : '',
+	);
+
+	return $layout_widths[ $alignment ] ?? '';
 }
 
 /**
@@ -266,9 +256,15 @@ function auto_sizes_calculate_width( string $alignment, int $image_width, string
  * @return array<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 {
-	if ( 'core/image' === $block_type->name ) {
+	// The list of blocks that can consume outer layout context.
+	$consumer_blocks = array(
+		'core/cover',
+		'core/image',
+	);
+
+	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( 'ancestor_block_align' ) ) ) );
+		return array_values( array_unique( array_merge( $uses_context, array( 'max_alignment' ) ) ) );
 	}
 	return $uses_context;
 }
@@ -283,9 +279,26 @@ function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $blo
  * @return array<string, mixed> Modified block context.
  */
 function auto_sizes_filter_render_block_context( array $context, array $block ): array {
-	if ( 'core/group' === $block['blockName'] || 'core/columns' === $block['blockName'] ) {
-		$context['ancestor_block_align'] = $block['attrs']['align'] ?? '';
+	// When no max alignment is set, the maximum is assumed to be 'full'.
+	$context['max_alignment'] = $context['max_alignment'] ?? 'full';
+
+	// The list of blocks that can modify outer layout context.
+	$provider_blocks = array(
+		'core/columns',
+		'core/group',
+	);
+
+	if ( in_array( $block['blockName'], $provider_blocks, true ) ) {
+		$alignment = $block['attrs']['align'] ?? '';
+
+		// If the container block doesn't have alignment, it's assumed to be 'default'.
+		if ( ! (bool) $alignment ) {
+			$context['max_alignment'] = 'default';
+		} elseif ( 'wide' === $block['attrs']['align'] ) {
+			$context['max_alignment'] = 'wide';
+		}
 	}
+
 	return $context;
 }
 
diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index dbdac70395..81529b27b3 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -553,7 +553,7 @@ public function get_group_block_markup( string $content, array $atts = array() )
 			)
 		);
 
-		$align_class = isset( $atts['align'] ) ? ' align' . $atts['align'] : '';
+		$align_class = (bool) $atts['align'] ? ' align' . $atts['align'] : '';
 
 		return '<!-- wp:group ' . wp_json_encode( $atts ) . ' -->
 		<div class="wp-block-group' . $align_class . '">' . $content . '</div>

From df8741fc9f2ab2afaebee5c52754d22d91529cd4 Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Thu, 5 Dec 2024 15:25:19 -0600
Subject: [PATCH 16/23] Remove unused auto_sizes_get_width function

---
 .../includes/improve-calculate-sizes.php      | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index e761acc9e9..70fc6f9de9 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -6,25 +6,6 @@
  * @since n.e.x.t
  */
 
-/**
- * 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 1.1.0
- *
- * @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';
-}
-
 /**
  * Primes attachment into the cache with a single database query.
  *

From 0790b92c6809ba491a8341587a0a9c7ec272ccb3 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
Date: Fri, 6 Dec 2024 18:26:23 +0530
Subject: [PATCH 17/23] Minor docbock update

---
 .../auto-sizes/includes/improve-calculate-sizes.php    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 70fc6f9de9..d6174c9c47 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -124,11 +124,11 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  *
  * @since n.e.x.t
  *
- * @param int    $id                   The image id.
- * @param string $size                 The image size data.
- * @param string $align                The image alignment.
- * @param string $resize_width         Resize image width.
- * @param string $max_alignment        The maximum usable layout alignment.
+ * @param int    $id            The image id.
+ * @param string $size          The image size data.
+ * @param string $align         The image alignment.
+ * @param string $resize_width  Resize image width.
+ * @param string $max_alignment The maximum usable layout alignment.
  * @return string|false An improved sizes attribute or false if a better size cannot be calculated.
  */
 function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, string $max_alignment ) {

From 8ca8b2730feac8140195eded8cb06c7346df362b Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Tue, 10 Dec 2024 16:32:50 -0600
Subject: [PATCH 18/23] WIP: fix center alignments and cover blocks

---
 .../includes/improve-calculate-sizes.php      | 12 ++++++------
 .../tests/test-improve-calculate-sizes.php    | 19 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index d6174c9c47..564a382dd4 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -162,15 +162,15 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 
 	/*
 	 * Map alignment values to a weighting value so they can be compared.
-	 * Note that 'left', 'right', and 'center' alignments are only constrained by default containers.
+	 * Note that 'left' and 'right' alignments are only constrained by max alignment.
 	 */
 	$constraints = array(
 		'full'    => 0,
-		'wide'    => 1,
-		'left'    => 2,
-		'right'   => 2,
-		'center'  => 2,
+		'left'    => 1,
+		'right'   => 1,
+		'wide'    => 2,
 		'default' => 3,
+		'center'  => 3,
 	);
 
 	$alignment = $constraints[ $align ] > $constraints[ $max_alignment ] ? $align : $max_alignment;
@@ -187,12 +187,12 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 
 		case 'left':
 		case 'right':
-		case 'center':
 			// These alignment get constrained by the wide layout size but do not get stretched.
 			$alignment    = auto_sizes_get_layout_width( 'wide' );
 			$layout_width = sprintf( '%1$spx', min( (int) $alignment, $image_width ) );
 			break;
 
+		case 'center':
 		default:
 			$alignment    = auto_sizes_get_layout_width( 'default' );
 			$layout_width = sprintf( '%1$spx', min( (int) $alignment, $image_width ) );
diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index 81529b27b3..6de672be97 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -273,14 +273,14 @@ public function data_image_sizes_for_left_right_center_alignment(): array {
 				'sizes="(max-width: 300px) 100vw, 300px" ',
 				'center',
 			),
-			'Return large image size 1024px with center alignment'                                  => array(
+			'Return large image size 620px with center alignment'                                  => array(
 				'large',
-				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
 				'center',
 			),
-			'Return full image size 1080px with center alignment'                                   => array(
+			'Return full image size 620px with center alignment'                                   => array(
 				'full',
-				'sizes="(max-width: 1080px) 100vw, 1080px" ',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
 				'center',
 			),
 			'Return resized size 100px instead of medium image size 300px with left alignment'      => array(
@@ -346,8 +346,9 @@ public function data_image_sizes_for_left_right_center_alignment(): array {
 	 * @dataProvider data_image_left_right_center_alignment
 	 *
 	 * @param string $alignment Alignment of the image.
+	 * @param string $expected  Expected output.
 	 */
-	public function test_cover_block_with_left_right_center_alignment( string $alignment ): void {
+	public function test_cover_block_with_left_right_center_alignment( string $alignment, string $expected ): void {
 		$image_url     = wp_get_attachment_image_url( self::$image_id, 'full' );
 		$block_content = '<!-- wp:cover {"url":"' . $image_url . '","id":' . self::$image_id . ',"dimRatio":50,"align":"' . $alignment . '","style":{"color":{}}} -->
 		<div class="wp-block-cover align' . $alignment . '"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-' . self::$image_id . '" alt="" src="' . $image_url . '" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
@@ -357,7 +358,7 @@ public function test_cover_block_with_left_right_center_alignment( string $align
 
 		$result = apply_filters( 'the_content', $block_content );
 
-		$this->assertStringContainsString( 'sizes="(max-width: 1080px) 100vw, 1080px" ', $result );
+		$this->assertStringContainsString( $expected, $result );
 	}
 
 	/**
@@ -367,9 +368,9 @@ public function test_cover_block_with_left_right_center_alignment( string $align
 	 */
 	public function data_image_left_right_center_alignment(): array {
 		return array(
-			array( 'left' ),
-			array( 'right' ),
-			array( 'center' ),
+			array( 'left', 'sizes="(max-width: 420px) 100vw, 420px' ),
+			array( 'right', 'sizes="(max-width: 420px) 100vw, 420px' ),
+			array( 'center', 'sizes="(max-width: 620px) 100vw, 620px' ),
 		);
 	}
 

From 83be032b1b6455490531640bd077b5cf50decd05 Mon Sep 17 00:00:00 2001
From: Mukesh Panchal <mukeshpanchal27@gmail.com>
Date: Wed, 11 Dec 2024 10:10:10 +0530
Subject: [PATCH 19/23] Return accurate sizes for center alignment

---
 .../includes/improve-calculate-sizes.php      | 23 ++++++++++++-------
 .../tests/test-improve-calculate-sizes.php    | 14 +++++------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 564a382dd4..813ac4de4f 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -82,12 +82,13 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 */
 		$filter = static function ( $sizes, $size ) use ( $block ) {
 
+			$block_name    = $block->name;
 			$id            = $block->attributes['id'] ?? 0;
 			$alignment     = $block->attributes['align'] ?? '';
 			$width         = $block->attributes['width'] ?? '';
 			$max_alignment = $block->context['max_alignment'];
 
-			$better_sizes = auto_sizes_calculate_better_sizes( (int) $id, (string) $size, (string) $alignment, (string) $width, (string) $max_alignment );
+			$better_sizes = auto_sizes_calculate_better_sizes( (string) $block_name, (int) $id, (string) $size, (string) $alignment, (string) $width, (string) $max_alignment );
 
 			// If better sizes can't be calculated, use the default sizes.
 			return false !== $better_sizes ? $better_sizes : $sizes;
@@ -124,6 +125,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  *
  * @since n.e.x.t
  *
+ * @param string $block_name    The block name.
  * @param int    $id            The image id.
  * @param string $size          The image size data.
  * @param string $align         The image alignment.
@@ -131,7 +133,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  * @param string $max_alignment The maximum usable layout alignment.
  * @return string|false An improved sizes attribute or false if a better size cannot be calculated.
  */
-function auto_sizes_calculate_better_sizes( int $id, string $size, string $align, string $resize_width, string $max_alignment ) {
+function auto_sizes_calculate_better_sizes( string $block_name, int $id, string $size, string $align, string $resize_width, string $max_alignment ) {
 	// Without an image ID or a resize width, we cannot calculate a better size.
 	if ( ! (bool) $id && ! (bool) $resize_width ) {
 		return false;
@@ -166,9 +168,9 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 	 */
 	$constraints = array(
 		'full'    => 0,
-		'left'    => 1,
-		'right'   => 1,
-		'wide'    => 2,
+		'wide'    => 1,
+		'left'    => 2,
+		'right'   => 2,
 		'default' => 3,
 		'center'  => 3,
 	);
@@ -187,9 +189,14 @@ function auto_sizes_calculate_better_sizes( int $id, string $size, string $align
 
 		case 'left':
 		case 'right':
-			// These alignment get constrained by the wide layout size but do not get stretched.
-			$alignment    = auto_sizes_get_layout_width( 'wide' );
-			$layout_width = sprintf( '%1$spx', min( (int) $alignment, $image_width ) );
+			/*
+			 * Update width for cover block.
+			 * See https://github.com/WordPress/gutenberg/blob/938720602082dc50a1746bd2e33faa3d3a6096d4/packages/block-library/src/cover/style.scss#L82-L87.
+			 */
+			if ( 'core/cover' === $block_name ) {
+				$image_width = $image_width * 0.5;
+			}
+			$layout_width = sprintf( '%1$spx', $image_width );
 			break;
 
 		case 'center':
diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index 6de672be97..58a692edd5 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -341,7 +341,7 @@ public function data_image_sizes_for_left_right_center_alignment(): array {
 	}
 
 	/**
-	 * Test the cover block with left and right alignment.
+	 * Test the cover block with left, right and center alignment.
 	 *
 	 * @dataProvider data_image_left_right_center_alignment
 	 *
@@ -368,8 +368,8 @@ public function test_cover_block_with_left_right_center_alignment( string $align
 	 */
 	public function data_image_left_right_center_alignment(): array {
 		return array(
-			array( 'left', 'sizes="(max-width: 420px) 100vw, 420px' ),
-			array( 'right', 'sizes="(max-width: 420px) 100vw, 420px' ),
+			array( 'left', 'sizes="(max-width: 540px) 100vw, 540px' ),
+			array( 'right', 'sizes="(max-width: 540px) 100vw, 540px' ),
 			array( 'center', 'sizes="(max-width: 620px) 100vw, 620px' ),
 		);
 	}
@@ -469,10 +469,10 @@ public function data_ancestor_and_image_block_alignment(): array {
 				'left',
 				'sizes="(max-width: 1024px) 100vw, 1024px" ',
 			),
-			'Return image size 1024px, parent block wide alignment, image block center alignment'     => array(
+			'Return image size 620px, parent block wide alignment, image block center alignment'     => array(
 				'wide',
 				'center',
-				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
 			),
 			'Return image size 1024px, parent block wide alignment, image block right alignment'      => array(
 				'wide',
@@ -501,10 +501,10 @@ public function data_ancestor_and_image_block_alignment(): array {
 				'left',
 				'sizes="(max-width: 1024px) 100vw, 1024px" ',
 			),
-			'Return image size 1024px, parent block full alignment, image block center alignment'     => array(
+			'Return image size 620px, parent block full alignment, image block center alignment'     => array(
 				'full',
 				'center',
-				'sizes="(max-width: 1024px) 100vw, 1024px" ',
+				'sizes="(max-width: 620px) 100vw, 620px" ',
 			),
 			'Return image size 1024px, parent block full alignment, image block right alignment'      => array(
 				'full',

From d3a60d0ab386fde7724f4f7e7de0fa6f102c6b6b Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Wed, 11 Dec 2024 18:55:12 -0600
Subject: [PATCH 20/23] Improve cover block left/right alignment

---
 .../includes/improve-calculate-sizes.php      | 31 +++++++++----------
 .../tests/test-improve-calculate-sizes.php    |  4 +--
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 813ac4de4f..8394924296 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -82,13 +82,20 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 */
 		$filter = static function ( $sizes, $size ) use ( $block ) {
 
-			$block_name    = $block->name;
 			$id            = $block->attributes['id'] ?? 0;
 			$alignment     = $block->attributes['align'] ?? '';
 			$width         = $block->attributes['width'] ?? '';
 			$max_alignment = $block->context['max_alignment'];
 
-			$better_sizes = auto_sizes_calculate_better_sizes( (string) $block_name, (int) $id, (string) $size, (string) $alignment, (string) $width, (string) $max_alignment );
+			/*
+			 * Update width for cover block.
+			 * See https://github.com/WordPress/gutenberg/blob/938720602082dc50a1746bd2e33faa3d3a6096d4/packages/block-library/src/cover/style.scss#L82-L87.
+			 */
+			if ( 'core/cover' === $block->name && in_array( $alignment, array( 'left', 'right' ), true ) ) {
+				$size = array( 420, 420 );
+			}
+
+			$better_sizes = auto_sizes_calculate_better_sizes( (int) $id, $size, (string) $alignment, (string) $width, (string) $max_alignment );
 
 			// If better sizes can't be calculated, use the default sizes.
 			return false !== $better_sizes ? $better_sizes : $sizes;
@@ -125,15 +132,14 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  *
  * @since n.e.x.t
  *
- * @param string $block_name    The block name.
- * @param int    $id            The image id.
- * @param string $size          The image size data.
- * @param string $align         The image alignment.
- * @param string $resize_width  Resize image width.
- * @param string $max_alignment The maximum usable layout alignment.
+ * @param int          $id            The image id.
+ * @param string|int[] $size          The image size data.
+ * @param string       $align         The image alignment.
+ * @param string       $resize_width  Resize image width.
+ * @param string       $max_alignment The maximum usable layout alignment.
  * @return string|false An improved sizes attribute or false if a better size cannot be calculated.
  */
-function auto_sizes_calculate_better_sizes( string $block_name, int $id, string $size, string $align, string $resize_width, string $max_alignment ) {
+function auto_sizes_calculate_better_sizes( int $id, $size, string $align, string $resize_width, string $max_alignment ) {
 	// Without an image ID or a resize width, we cannot calculate a better size.
 	if ( ! (bool) $id && ! (bool) $resize_width ) {
 		return false;
@@ -189,13 +195,6 @@ function auto_sizes_calculate_better_sizes( string $block_name, int $id, string
 
 		case 'left':
 		case 'right':
-			/*
-			 * Update width for cover block.
-			 * See https://github.com/WordPress/gutenberg/blob/938720602082dc50a1746bd2e33faa3d3a6096d4/packages/block-library/src/cover/style.scss#L82-L87.
-			 */
-			if ( 'core/cover' === $block_name ) {
-				$image_width = $image_width * 0.5;
-			}
 			$layout_width = sprintf( '%1$spx', $image_width );
 			break;
 
diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
index 58a692edd5..1ef56fd2c6 100644
--- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
+++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php
@@ -368,8 +368,8 @@ public function test_cover_block_with_left_right_center_alignment( string $align
 	 */
 	public function data_image_left_right_center_alignment(): array {
 		return array(
-			array( 'left', 'sizes="(max-width: 540px) 100vw, 540px' ),
-			array( 'right', 'sizes="(max-width: 540px) 100vw, 540px' ),
+			array( 'left', 'sizes="(max-width: 420px) 100vw, 420px' ),
+			array( 'right', 'sizes="(max-width: 420px) 100vw, 420px' ),
 			array( 'center', 'sizes="(max-width: 620px) 100vw, 620px' ),
 		);
 	}

From 266e457318a8259f9b22f3b4309d9e5e654b907e Mon Sep 17 00:00:00 2001
From: Joe McGill <801097+joemcgill@users.noreply.github.com>
Date: Thu, 12 Dec 2024 12:50:07 -0600
Subject: [PATCH 21/23] Initial review feedback improvements

Co-authored-by: Weston Ruter <westonruter@google.com>
---
 .../includes/improve-calculate-sizes.php       | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 8394924296..af45fb8f63 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -85,7 +85,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 			$id            = $block->attributes['id'] ?? 0;
 			$alignment     = $block->attributes['align'] ?? '';
 			$width         = $block->attributes['width'] ?? '';
-			$max_alignment = $block->context['max_alignment'];
+			$max_alignment = $block->context['max_alignment'] ?? '';
 
 			/*
 			 * Update width for cover block.
@@ -132,11 +132,11 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  *
  * @since n.e.x.t
  *
- * @param int          $id            The image id.
- * @param string|int[] $size          The image size data.
- * @param string       $align         The image alignment.
- * @param string       $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 string                 $resize_width  Resize image width.
+ * @param string                 $max_alignment The maximum usable layout alignment.
  * @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, string $resize_width, string $max_alignment ) {
@@ -166,7 +166,7 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, strin
 	}
 
 	// Normalize default alignment values.
-	$align = (bool) $align ? $align : 'default';
+	$align = '' !== $align ? $align : 'default';
 
 	/*
 	 * Map alignment values to a weighting value so they can be compared.
@@ -238,9 +238,9 @@ function auto_sizes_get_layout_width( string $alignment ): string {
  *
  * @since n.e.x.t
  *
- * @param array<string> $uses_context Array of registered uses context for a block type.
+ * @param string[]      $uses_context Array of registered uses context for a block type.
  * @param WP_Block_Type $block_type   The full block type object.
- * @return array<string> The filtered context keys used by the block type.
+ * @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.

From aecb3de9431ebba81eb9750e8e2dbfa6acb1ec78 Mon Sep 17 00:00:00 2001
From: Joe McGill <joe.mcgill@10up.com>
Date: Thu, 12 Dec 2024 13:00:56 -0600
Subject: [PATCH 22/23] Force resize width to be an int

---
 .../includes/improve-calculate-sizes.php      | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index af45fb8f63..9b8459571f 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -82,9 +82,9 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
 		 */
 		$filter = static function ( $sizes, $size ) use ( $block ) {
 
-			$id            = $block->attributes['id'] ?? 0;
+			$id            = isset( $block->attributes['id'] ) ? (int) $block->attributes['id'] : 0;
 			$alignment     = $block->attributes['align'] ?? '';
-			$width         = $block->attributes['width'] ?? '';
+			$width         = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0;
 			$max_alignment = $block->context['max_alignment'] ?? '';
 
 			/*
@@ -95,7 +95,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( (int) $id, $size, (string) $alignment, (string) $width, (string) $max_alignment );
+			$better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment );
 
 			// If better sizes can't be calculated, use the default sizes.
 			return false !== $better_sizes ? $better_sizes : $sizes;
@@ -135,23 +135,22 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
  * @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 string                 $resize_width  Resize image width.
+ * @param int                    $resize_width  Resize image width.
  * @param string                 $max_alignment The maximum usable layout alignment.
  * @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, string $resize_width, string $max_alignment ) {
+function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $resize_width, string $max_alignment ) {
 	// Without an image ID or a resize width, we cannot calculate a better size.
-	if ( ! (bool) $id && ! (bool) $resize_width ) {
+	if ( 0 === $id && 0 === $resize_width ) {
 		return false;
 	}
 
 	$image_data = wp_get_attachment_image_src( $id, $size );
 
-	$resize_width = (int) $resize_width;
-	$image_width  = false !== $image_data ? $image_data[1] : 0;
+	$image_width = false !== $image_data ? $image_data[1] : 0;
 
 	// If we don't have an image width or a resize width, we cannot calculate a better size.
-	if ( ! ( (bool) $image_width || (bool) $resize_width ) ) {
+	if ( 0 === $image_width && 0 === $resize_width ) {
 		return false;
 	}
 
@@ -159,9 +158,9 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, strin
 	 * If we don't have an image width, use the resize width.
 	 * If we have both an image width and a resize width, use the smaller of the two.
 	 */
-	if ( ! (bool) $image_width ) {
+	if ( 0 === $image_width ) {
 		$image_width = $resize_width;
-	} elseif ( (bool) $resize_width ) {
+	} elseif ( 0 !== $resize_width ) {
 		$image_width = min( $image_width, $resize_width );
 	}
 

From 7fb1962b6a28ddfcb65321ff7442331f1b230897 Mon Sep 17 00:00:00 2001
From: Joe McGill <801097+joemcgill@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:58:49 -0600
Subject: [PATCH 23/23] Additional type casting fixes

Co-authored-by: Weston Ruter <westonruter@google.com>
---
 plugins/auto-sizes/includes/improve-calculate-sizes.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php
index 9b8459571f..40b50a0e46 100644
--- a/plugins/auto-sizes/includes/improve-calculate-sizes.php
+++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php
@@ -278,9 +278,9 @@ function auto_sizes_filter_render_block_context( array $context, array $block ):
 		$alignment = $block['attrs']['align'] ?? '';
 
 		// If the container block doesn't have alignment, it's assumed to be 'default'.
-		if ( ! (bool) $alignment ) {
+		if ( '' === $alignment ) {
 			$context['max_alignment'] = 'default';
-		} elseif ( 'wide' === $block['attrs']['align'] ) {
+		} elseif ( 'wide' === $alignment ) {
 			$context['max_alignment'] = 'wide';
 		}
 	}