Return accurate sizes for center alignment

Author: mukeshpanchal27

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,14 +125,15 @@ 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.
  * @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':

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',