WIP: fix center alignments and cover blocks

Author: joemcgill

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 ) );

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' ),
 		);
 	}