From ff1a7f23745882b095ac99b4704acc494159fc6e Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Wed, 22 Jan 2025 12:13:21 +0530 Subject: [PATCH 1/9] Initial POC --- .../includes/improve-calculate-sizes.php | 66 ++- .../tests/test-improve-calculate-sizes.php | 444 ++++++++++++++++++ 2 files changed, 499 insertions(+), 11 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index a5922b7e1..524378e13 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -82,10 +82,11 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b */ $filter = static function ( $sizes, $size ) use ( $block ) { - $id = isset( $block->attributes['id'] ) ? (int) $block->attributes['id'] : 0; - $alignment = $block->attributes['align'] ?? ''; - $width = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0; - $max_alignment = $block->context['max_alignment'] ?? ''; + $id = isset( $block->attributes['id'] ) ? (int) $block->attributes['id'] : 0; + $alignment = $block->attributes['align'] ?? ''; + $width = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0; + $max_alignment = $block->context['max_alignment'] ?? ''; + $ancestor_block_width = $block->context['block_width_data'] ?? array(); /* * Update width for cover block. @@ -95,7 +96,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b $size = array( 420, 420 ); } - $better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment ); + $better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment, $ancestor_block_width ); // If better sizes can't be calculated, use the default sizes. return false !== $better_sizes ? $better_sizes : $sizes; @@ -132,14 +133,15 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b * * @since 1.4.0 * - * @param int $id The image attachment post ID. - * @param string|array{int, int} $size Image size name or array of width and height. - * @param string $align The image alignment. - * @param int $resize_width Resize image width. - * @param string $max_alignment The maximum usable layout alignment. + * @param int $id The image attachment post ID. + * @param string|array{int, int} $size Image size name or array of width and height. + * @param string $align The image alignment. + * @param int $resize_width Resize image width. + * @param string $max_alignment The maximum usable layout alignment. + * @param array $ancestor_block_width Ancestor block context. * @return string|false An improved sizes attribute or false if a better size cannot be calculated. */ -function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $resize_width, string $max_alignment ) { +function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $resize_width, string $max_alignment, array $ancestor_block_width ) { // Bail early if not a block theme. if ( ! wp_is_block_theme() ) { return false; @@ -169,6 +171,44 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ $image_width = min( $image_width, $resize_width ); } + // Calculate the smallest width using the ancestor block context. + $img_smallest_width = 0; + if ( count( $ancestor_block_width ) > 0 ) { + $img_parents_block_width = 0; + foreach ( $ancestor_block_width as $width ) { + foreach ( $width as $block_name => $w ) { + if ( in_array( $w, array( 'wide', 'default' ), true ) ) { + $img_parents_block_width = auto_sizes_get_layout_width( $w ); + + if ( ! str_ends_with( $img_parents_block_width, 'px' ) ) { + // Set parent block width to zero so it doesn't take value other than the px. + $img_parents_block_width = 0; + continue; + } + $img_parents_block_width = (int) $img_parents_block_width; + + if ( $img_parents_block_width < $img_smallest_width ) { + $img_parents_block_width = $img_smallest_width; + } + } + + if ( 'core/column' === $block_name ) { + if ( str_ends_with( $w, '%' ) && is_int( $img_parents_block_width ) ) { + $img_smallest_width = $img_parents_block_width * ( (int) $w / 100 ); + } + } + } + } + + if ( $img_smallest_width <= 0 ) { + $img_smallest_width = $img_parents_block_width; + } + + if ( 0 !== $img_smallest_width ) { + $img_smallest_width = sprintf( '%dpx', (int) $img_smallest_width ); + } + } + // Normalize default alignment values. $align = '' !== $align ? $align : 'default'; @@ -219,6 +259,10 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ // Format layout width when not 'full'. if ( 'full' !== $alignment ) { + // Format layout width when smaller width found. + if ( is_string( $img_smallest_width ) && str_ends_with( $img_smallest_width, 'px' ) ) { + $layout_width = sprintf( '%1$spx', min( (int) $layout_width, (int) $img_smallest_width ) ); + } $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 693161ee9..2815ec869 100644 --- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php +++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php @@ -646,6 +646,395 @@ public function data_image_blocks_with_relative_alignment_for_classic_theme(): a ); } + /** + * Test that the layout property of a column block is passed by context to the image block. + * + * @dataProvider data_image_block_with_column_block + * + * @param string $ancestor_block_alignment Ancestor block alignment. + * @param string $image_block_alignment Image block alignment. + * @param string $expected Expected output. + */ + public function test_image_block_with_single_column_block( string $ancestor_block_alignment, string $image_block_alignment, string $expected ): void { + $block_content = $this->get_columns_block_markup( + $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( $expected, $result ); + } + + /** + * Data provider. + * + * @return array> The ancestor and image alignments. + */ + public function data_image_block_with_column_block(): array { + return array( + // Parent default 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 620px, parent block wide alignment, image block center alignment' => array( + 'wide', + 'center', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + '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 620px, parent block full alignment, image block center alignment' => array( + 'full', + 'center', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + 'Return image size 1024px, parent block full alignment, image block right alignment' => array( + 'full', + 'right', + 'sizes="(max-width: 1024px) 100vw, 1024px" ', + ), + ); + } + + /** + * Test that the layout property of a column block is passed by context to the image block. + * + * @dataProvider data_image_block_with_two_equal_column_block + * + * @param string $ancestor_block_alignment Ancestor block alignment. + * @param string $image_block_alignment Image block alignment. + * @param string $expected Expected output. + */ + public function test_image_block_with_two_equal_column_block( string $ancestor_block_alignment, string $image_block_alignment, string $expected ): void { + $block_content = $this->get_columns_block_markup( + $this->get_image_block_markup( self::$image_id, 'large', $image_block_alignment ), + array( + 'align' => $ancestor_block_alignment, + ), + array( + '50%' => true, + '49.99%' => false, + ) + ); + + $result = apply_filters( 'the_content', $block_content ); + + $this->assertStringContainsString( $expected, $result ); + } + + /** + * Data provider. + * + * @return array> The ancestor and image alignments. + */ + public function data_image_block_with_two_equal_column_block(): array { + return array( + // Parent default alignment. + 'Return half size of contentSize 310px, parent block default alignment, image block default alignment' => array( + '', + '', + 'sizes="(max-width: 310px) 100vw, 310px" ', + ), + 'Return half size of contentSize 310px, parent block default alignment, image block wide alignment' => array( + '', + 'wide', + 'sizes="(max-width: 310px) 100vw, 310px" ', + ), + 'Return half size of contentSize 310px, parent block default alignment, image block full alignment' => array( + '', + 'full', + 'sizes="(max-width: 310px) 100vw, 310px" ', + ), + 'Return half size of contentSize 310px, parent block default alignment, image block left alignment' => array( + '', + 'left', + 'sizes="(max-width: 310px) 100vw, 310px" ', + ), + 'Return half size of contentSize 310px, parent block default alignment, image block center alignment' => array( + '', + 'center', + 'sizes="(max-width: 310px) 100vw, 310px" ', + ), + 'Return half size of contentSize 310px, parent block default alignment, image block right alignment' => array( + '', + 'right', + 'sizes="(max-width: 310px) 100vw, 310px" ', + ), + + // Parent wide alignment. + 'Return contentSize 620px, parent block wide alignment, image block default alignment' => array( + 'wide', + '', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block wide alignment' => array( + 'wide', + 'wide', + 'sizes="(max-width: 640px) 100vw, 640px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block full alignment' => array( + 'wide', + 'full', + 'sizes="(max-width: 640px) 100vw, 640px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block left alignment' => array( + 'wide', + 'left', + 'sizes="(max-width: 640px) 100vw, 640px" ', + ), + 'Return image size 620px, parent block wide alignment, image block center alignment' => array( + 'wide', + 'center', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block right alignment' => array( + 'wide', + 'right', + 'sizes="(max-width: 640px) 100vw, 640px" ', + ), + + // 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 620px, parent block full alignment, image block center alignment' => array( + 'full', + 'center', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + 'Return image size 1024px, parent block full alignment, image block right alignment' => array( + 'full', + 'right', + 'sizes="(max-width: 1024px) 100vw, 1024px" ', + ), + ); + } + + /** + * Test that the layout property of a column block is passed by context to the image block. + * + * @dataProvider data_image_block_with_two_different_width_column_block + * + * @param string $ancestor_block_alignment Ancestor block alignment. + * @param string $image_block_alignment Image block alignment. + * @param string $expected Expected output. + */ + public function test_image_block_with_two_different_width_column_block( string $ancestor_block_alignment, string $image_block_alignment, string $expected ): void { + $block_content = $this->get_columns_block_markup( + $this->get_image_block_markup( self::$image_id, 'large', $image_block_alignment ), + array( + 'align' => $ancestor_block_alignment, + ), + array( + '66.66%' => true, + '33.33%' => false, + ) + ); + + $result = apply_filters( 'the_content', $block_content ); + + $this->assertStringContainsString( $expected, $result ); + } + + /** + * Data provider. + * + * @return array> The ancestor and image alignments. + */ + public function data_image_block_with_two_different_width_column_block(): array { + return array( + // Parent default alignment. + 'Return contentSize 310px, parent block default alignment, image block default alignment' => array( + '', + '', + 'sizes="(max-width: 409px) 100vw, 409px" ', + ), + 'Return contentSize 310px, parent block default alignment, image block wide alignment' => array( + '', + 'wide', + 'sizes="(max-width: 409px) 100vw, 409px" ', + ), + 'Return contentSize 310px, parent block default alignment, image block full alignment' => array( + '', + 'full', + 'sizes="(max-width: 409px) 100vw, 409px" ', + ), + 'Return contentSize 310px, parent block default alignment, image block left alignment' => array( + '', + 'left', + 'sizes="(max-width: 409px) 100vw, 409px" ', + ), + 'Return contentSize 310px, parent block default alignment, image block center alignment' => array( + '', + 'center', + 'sizes="(max-width: 409px) 100vw, 409px" ', + ), + 'Return contentSize 310px, parent block default alignment, image block right alignment' => array( + '', + 'right', + 'sizes="(max-width: 409px) 100vw, 409px" ', + ), + + // Parent wide alignment. + 'Return contentSize 620px, parent block wide alignment, image block default alignment' => array( + 'wide', + '', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block wide alignment' => array( + 'wide', + 'wide', + 'sizes="(max-width: 844px) 100vw, 844px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block full alignment' => array( + 'wide', + 'full', + 'sizes="(max-width: 844px) 100vw, 844px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block left alignment' => array( + 'wide', + 'left', + 'sizes="(max-width: 844px) 100vw, 844px" ', + ), + 'Return image size 620px, parent block wide alignment, image block center alignment' => array( + 'wide', + 'center', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + 'Return half size of wideSize 640px, parent block wide alignment, image block right alignment' => array( + 'wide', + 'right', + 'sizes="(max-width: 844px) 100vw, 844px" ', + ), + + // 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 620px, parent block full alignment, image block center alignment' => array( + 'full', + 'center', + 'sizes="(max-width: 620px) 100vw, 620px" ', + ), + 'Return image size 1024px, parent block full alignment, image block right alignment' => array( + 'full', + 'right', + 'sizes="(max-width: 1024px) 100vw, 1024px" ', + ), + ); + } + /** * Filter the theme.json data to include relative layout sizes. * @@ -714,4 +1103,59 @@ public function get_group_block_markup( string $content, array $atts = array() )
' . $content . '
'; } + + /** + * Helper to generate columns block markup. + * + * This function generates a WordPress columns block with optional alignment, + * column widths, and conditional content for columns. + * + * @param string $content Content to be included in the columns. + * @param array $atts Optional. Block attributes. Default empty array. + * @param array $column_width Optional. An array of column widths and content flags. + * Each key represents a column width (string), + * and the value is a boolean indicating whether the column + * should contain the image block content. Default empty array. + * @return string The generated columns block markup. + */ + public function get_columns_block_markup( string $content, array $atts = array(), array $column_width = array() ): string { + // Generate alignment class if align attribute is provided. + $align_class = ! empty( $atts['align'] ) ? ' align' . $atts['align'] : ''; + $column_block = ''; + + // Generate individual column markup based on provided widths and content flags. + if ( count( $column_width ) > 0 ) { + foreach ( $column_width as $width => $is_image ) { + $width_data = array( 'width' => $width ); + $width_style = '' !== $width ? ' style="flex-basis: ' . esc_attr( $width ) . ';"' : ''; + $column_content = (bool) $is_image ? $content : ''; + + $column_block .= sprintf( + ' +
%3$s
+ ', + wp_json_encode( $width_data ), + $width_style, + $column_content + ); + } + } else { + $column_block .= sprintf( + ' +
%1$s
+ ', + $content + ); + } + + // Generate and return the final columns block markup. + return sprintf( + ' +
%3$s
+ ', + wp_json_encode( $atts ), + esc_attr( $align_class ), + $column_block + ); + } } From bfed071e5b391bdd64edb857380d767a163f7af7 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Thu, 20 Mar 2025 10:53:36 +0530 Subject: [PATCH 2/9] Remove array context approach --- .../includes/improve-calculate-sizes.php | 59 +++---------------- 1 file changed, 9 insertions(+), 50 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 01107589d..40cceb305 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -100,7 +100,6 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b $width = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0; $max_alignment = $block->context['max_alignment'] ?? ''; $container_relative_width = $block->context['container_relative_width'] ?? ''; - $ancestor_block_width = $block->context['block_width_data'] ?? array(); /* * Update width for cover block. @@ -110,7 +109,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b $size = array( 420, 420 ); } - $better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment, $ancestor_block_width ); + $better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment, $container_relative_width ); // If better sizes can't be calculated, use the default sizes. return false !== $better_sizes ? $better_sizes : $sizes; @@ -147,15 +146,15 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b * * @since 1.4.0 * - * @param int $id The image attachment post ID. - * @param string|array{int, int} $size Image size name or array of width and height. - * @param string $align The image alignment. - * @param int $resize_width Resize image width. - * @param string $max_alignment The maximum usable layout alignment. - * @param array $ancestor_block_width Ancestor block context. + * @param int $id The image attachment post ID. + * @param string|array{int, int} $size Image size name or array of width and height. + * @param string $align The image alignment. + * @param int $resize_width Resize image width. + * @param string $max_alignment The maximum usable layout alignment. + * @param float $container_relative_width Container relative width. * @return string|false An improved sizes attribute or false if a better size cannot be calculated. */ -function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $resize_width, string $max_alignment, array $ancestor_block_width ) { +function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $resize_width, string $max_alignment, float $container_relative_width ) { // Bail early if not a block theme. if ( ! wp_is_block_theme() ) { return false; @@ -185,43 +184,7 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ $image_width = min( $image_width, $resize_width ); } - // Calculate the smallest width using the ancestor block context. - $img_smallest_width = 0; - if ( count( $ancestor_block_width ) > 0 ) { - $img_parents_block_width = 0; - foreach ( $ancestor_block_width as $width ) { - foreach ( $width as $block_name => $w ) { - if ( in_array( $w, array( 'wide', 'default' ), true ) ) { - $img_parents_block_width = auto_sizes_get_layout_width( $w ); - - if ( ! str_ends_with( $img_parents_block_width, 'px' ) ) { - // Set parent block width to zero so it doesn't take value other than the px. - $img_parents_block_width = 0; - continue; - } - $img_parents_block_width = (int) $img_parents_block_width; - - if ( $img_parents_block_width < $img_smallest_width ) { - $img_parents_block_width = $img_smallest_width; - } - } - - if ( 'core/column' === $block_name ) { - if ( str_ends_with( $w, '%' ) && is_int( $img_parents_block_width ) ) { - $img_smallest_width = $img_parents_block_width * ( (int) $w / 100 ); - } - } - } - } - - if ( $img_smallest_width <= 0 ) { - $img_smallest_width = $img_parents_block_width; - } - - if ( 0 !== $img_smallest_width ) { - $img_smallest_width = sprintf( '%dpx', (int) $img_smallest_width ); - } - } + $container_relative_width_for_image_width = $container_relative_width; // Normalize default alignment values. $align = '' !== $align ? $align : 'default'; @@ -263,10 +226,6 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ // Format layout width when not 'full'. if ( 'full' !== $alignment ) { - // Format layout width when smaller width found. - if ( is_string( $img_smallest_width ) && str_ends_with( $img_smallest_width, 'px' ) ) { - $layout_width = sprintf( '%1$spx', min( (int) $layout_width, (int) $img_smallest_width ) ); - } $layout_width = sprintf( '(max-width: %1$s) 100vw, %1$s', $layout_width ); } From 255fc1903e43470a7d13cdf8c9ae46c1bcd5cc24 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Thu, 20 Mar 2025 14:37:27 +0530 Subject: [PATCH 3/9] Update unit tests --- .../includes/improve-calculate-sizes.php | 11 ++- .../tests/test-improve-calculate-sizes.php | 98 +++++++++---------- 2 files changed, 56 insertions(+), 53 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 40cceb305..75ce08dec 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -99,7 +99,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b $alignment = $block->attributes['align'] ?? ''; $width = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0; $max_alignment = $block->context['max_alignment'] ?? ''; - $container_relative_width = $block->context['container_relative_width'] ?? ''; + $container_relative_width = $block->context['container_relative_width'] ?? '1.0'; /* * Update width for cover block. @@ -184,8 +184,6 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ $image_width = min( $image_width, $resize_width ); } - $container_relative_width_for_image_width = $container_relative_width; - // Normalize default alignment values. $align = '' !== $align ? $align : 'default'; @@ -202,6 +200,10 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ case 'wide': $layout_width = auto_sizes_get_layout_width( 'wide' ); + if ( str_ends_with( $layout_width, 'px' ) ) { + $layout_width = (int) $layout_width * $container_relative_width; + $layout_width = sprintf( '%dpx', (int) $layout_width ); + } break; case 'left': @@ -216,6 +218,7 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ * on the server. Otherwise, we need to rely on CSS functions. */ if ( str_ends_with( $layout_width, 'px' ) ) { + $layout_width = (int) $layout_width * $container_relative_width; $layout_width = sprintf( '%dpx', min( (int) $layout_width, $image_width ) ); } else { $layout_width = sprintf( 'min(%1$s, %2$spx)', $layout_width, $image_width ); @@ -268,7 +271,7 @@ function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $blo 'core/image' => array( 'max_alignment', 'container_relative_width' ), 'core/group' => array( 'max_alignment' ), 'core/columns' => array( 'max_alignment', 'container_relative_width' ), - 'core/column' => array( 'column_count' ), + 'core/column' => array( 'max_alignment', 'column_count' ), ); if ( isset( $block_specific_context[ $block_type->name ] ) ) { diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php index edb4aad83..18061086f 100644 --- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php +++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php @@ -839,10 +839,10 @@ public function data_image_block_with_two_equal_column_block(): array { ), // Parent wide alignment. - 'Return contentSize 620px, parent block wide alignment, image block default alignment' => array( + 'Return half size of contentSize 310px, parent block wide alignment, image block default alignment' => array( 'wide', '', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 310px) 100vw, 310px" ', ), 'Return half size of wideSize 640px, parent block wide alignment, image block wide alignment' => array( 'wide', @@ -859,10 +859,10 @@ public function data_image_block_with_two_equal_column_block(): array { 'left', 'sizes="(max-width: 640px) 100vw, 640px" ', ), - 'Return image size 620px, parent block wide alignment, image block center alignment' => array( + 'Return half size of contentSize 310px, parent block wide alignment, image block center alignment' => array( 'wide', 'center', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 310px) 100vw, 310px" ', ), 'Return half size of wideSize 640px, parent block wide alignment, image block right alignment' => array( 'wide', @@ -871,35 +871,35 @@ public function data_image_block_with_two_equal_column_block(): array { ), // Parent full alignment. - 'Return contentSize 620px, parent block full alignment, image block default alignment' => array( + 'Return half size of contentSize 310px, parent block full alignment, image block default alignment' => array( 'full', '', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 310px) 100vw, 310px" ', ), - 'Return wideSize 1280px, parent block full alignment, image block wide alignment' => array( + 'Return half size of wideSize 640px, parent block full alignment, image block wide alignment' => array( 'full', 'wide', - 'sizes="(max-width: 1280px) 100vw, 1280px" ', + 'sizes="(max-width: 640px) 100vw, 640px" ', ), '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( + 'Return half size of wideSize 640px, parent block full alignment, image block left alignment' => array( 'full', 'left', - 'sizes="(max-width: 1024px) 100vw, 1024px" ', + 'sizes="(max-width: 640px) 100vw, 640px" ', ), - 'Return image size 620px, parent block full alignment, image block center alignment' => array( + 'Return half size of contentSize 310px, parent block full alignment, image block center alignment' => array( 'full', 'center', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 310px) 100vw, 310px" ', ), - 'Return image size 1024px, parent block full alignment, image block right alignment' => array( + 'Return half size of wideSize 640px, parent block full alignment, image block right alignment' => array( 'full', 'right', - 'sizes="(max-width: 1024px) 100vw, 1024px" ', + 'sizes="(max-width: 640px) 100vw, 640px" ', ), ); } @@ -938,99 +938,99 @@ public function test_image_block_with_two_different_width_column_block( string $ public function data_image_block_with_two_different_width_column_block(): array { return array( // Parent default alignment. - 'Return contentSize 310px, parent block default alignment, image block default alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block default alignment' => array( '', '', - 'sizes="(max-width: 409px) 100vw, 409px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return contentSize 310px, parent block default alignment, image block wide alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block wide alignment' => array( '', 'wide', - 'sizes="(max-width: 409px) 100vw, 409px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return contentSize 310px, parent block default alignment, image block full alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block full alignment' => array( '', 'full', - 'sizes="(max-width: 409px) 100vw, 409px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return contentSize 310px, parent block default alignment, image block left alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block left alignment' => array( '', 'left', - 'sizes="(max-width: 409px) 100vw, 409px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return contentSize 310px, parent block default alignment, image block center alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block center alignment' => array( '', 'center', - 'sizes="(max-width: 409px) 100vw, 409px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return contentSize 310px, parent block default alignment, image block right alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block right alignment' => array( '', 'right', - 'sizes="(max-width: 409px) 100vw, 409px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), // Parent wide alignment. - 'Return contentSize 620px, parent block wide alignment, image block default alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block default alignment' => array( 'wide', '', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return half size of wideSize 640px, parent block wide alignment, image block wide alignment' => array( + 'Return 66.66% width of wideSize 853px, parent block wide alignment, image block wide alignment' => array( 'wide', 'wide', - 'sizes="(max-width: 844px) 100vw, 844px" ', + 'sizes="(max-width: 853px) 100vw, 853px" ', ), - 'Return half size of wideSize 640px, parent block wide alignment, image block full alignment' => array( + 'Return 66.66% width of wideSize 853px, parent block wide alignment, image block full alignment' => array( 'wide', 'full', - 'sizes="(max-width: 844px) 100vw, 844px" ', + 'sizes="(max-width: 853px) 100vw, 853px" ', ), - 'Return half size of wideSize 640px, parent block wide alignment, image block left alignment' => array( + 'Return 66.66% width of wideSize 853px, parent block wide alignment, image block left alignment' => array( 'wide', 'left', - 'sizes="(max-width: 844px) 100vw, 844px" ', + 'sizes="(max-width: 853px) 100vw, 853px" ', ), - 'Return image size 620px, parent block wide alignment, image block center alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block center alignment' => array( 'wide', 'center', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return half size of wideSize 640px, parent block wide alignment, image block right alignment' => array( + 'Return 66.66% width of wideSize 853px, parent block wide alignment, image block right alignment' => array( 'wide', 'right', - 'sizes="(max-width: 844px) 100vw, 844px" ', + 'sizes="(max-width: 853px) 100vw, 853px" ', ), // Parent full alignment. - 'Return contentSize 620px, parent block full alignment, image block default alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block default alignment' => array( 'full', '', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return wideSize 1280px, parent block full alignment, image block wide alignment' => array( + 'Return 66.66% width of wideSize 853px, parent block full alignment, image block wide alignment' => array( 'full', 'wide', - 'sizes="(max-width: 1280px) 100vw, 1280px" ', + 'sizes="(max-width: 853px) 100vw, 853px" ', ), '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( + 'Return 66.66% width of wideSize 853px, parent block full alignment, image block left alignment' => array( 'full', 'left', - 'sizes="(max-width: 1024px) 100vw, 1024px" ', + 'sizes="(max-width: 853px) 100vw, 853px" ', ), - 'Return image size 620px, parent block full alignment, image block center alignment' => array( + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block center alignment' => array( 'full', 'center', - 'sizes="(max-width: 620px) 100vw, 620px" ', + 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return image size 1024px, parent block full alignment, image block right alignment' => array( + 'Return 66.66% width of wideSize 853px, parent block full alignment, image block right alignment' => array( 'full', 'right', - 'sizes="(max-width: 1024px) 100vw, 1024px" ', + 'sizes="(max-width: 853px) 100vw, 853px" ', ), ); } @@ -1151,7 +1151,7 @@ public function get_columns_block_markup( string $content, array $atts = array() // Generate and return the final columns block markup. return sprintf( ' -
%3$s
+
%3$s
', wp_json_encode( $atts ), esc_attr( $align_class ), From 6a80b350c021fadf3930131af8c0c0cec617428f Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Tue, 25 Mar 2025 14:35:56 +0530 Subject: [PATCH 4/9] Add more test coverage for ancestor block --- .../tests/test-improve-calculate-sizes.php | 155 ++++++++++++++++++ 1 file changed, 155 insertions(+) diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php index 18061086f..d387b57e3 100644 --- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php +++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php @@ -1035,6 +1035,161 @@ public function data_image_block_with_two_different_width_column_block(): array ); } + /** + * Test that the layout property of a column block is passed by context to the image block. + * + * @dataProvider data_image_block_with_parent_columns_and_its_parent_group_block + * + * @param string $group_block_alignment Group block alignment. + * @param string $columns_block_alignment Columns block alignment. + * @param string $image_block_alignment Image block alignment. + * @param string $expected Expected output. + */ + public function test_image_block_with_parent_columns_and_its_parent_group_block( string $group_block_alignment, string $columns_block_alignment, string $image_block_alignment, string $expected ): void { + $block_content = $this->get_group_block_markup( + $this->get_columns_block_markup( + $this->get_image_block_markup( self::$image_id, 'large', $image_block_alignment ), + array( + 'align' => $columns_block_alignment, + ), + array( + '66.66%' => true, + '33.33%' => false, + ) + ), + array( + 'align' => $group_block_alignment, + ) + ); + + $result = apply_filters( 'the_content', $block_content ); + + $this->assertStringContainsString( $expected, $result ); + } + + /** + * Data provider. + * + * @return array> The ancestor and image alignments. + */ + public function data_image_block_with_parent_columns_and_its_parent_group_block(): array { + return array( + // Parent default alignment. + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block default alignment' => array( + '', + '', + '', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block wide alignment' => array( + '', + '', + 'wide', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block full alignment' => array( + '', + '', + 'full', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block left alignment' => array( + '', + '', + 'left', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block center alignment' => array( + '', + '', + 'center', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block default alignment, image block right alignment' => array( + '', + '', + 'right', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + + // Parent wide alignment. + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block default alignment' => array( + 'wide', + '', + '', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block wide alignment' => array( + 'wide', + '', + 'wide', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block full alignment' => array( + 'wide', + '', + 'full', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block left alignment' => array( + 'wide', + '', + 'left', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block center alignment' => array( + 'wide', + '', + 'center', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block right alignment' => array( + 'wide', + '', + 'right', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + + // Parent full alignment. + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block default alignment' => array( + 'full', + '', + '', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block wide alignment' => array( + 'full', + '', + 'wide', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block full alignment' => array( + 'full', + '', + 'full', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block left alignment' => array( + 'full', + '', + 'left', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block center alignment' => array( + 'full', + '', + 'center', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of contentSize 413px, parent block full alignment, image block right alignment' => array( + 'full', + '', + 'right', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + ); + } + /** * Filter the theme.json data to include relative layout sizes. * From 90dc20fa67fad5df900368bd31ebec6f0ac09b2b Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Wed, 26 Mar 2025 10:11:28 +0530 Subject: [PATCH 5/9] Use float value instead of string --- plugins/auto-sizes/includes/improve-calculate-sizes.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 75ce08dec..9133fbffc 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -99,7 +99,7 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b $alignment = $block->attributes['align'] ?? ''; $width = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0; $max_alignment = $block->context['max_alignment'] ?? ''; - $container_relative_width = $block->context['container_relative_width'] ?? '1.0'; + $container_relative_width = $block->context['container_relative_width'] ?? 1.0; /* * Update width for cover block. From 82d736421b69c58b952a2dd220b6a507bdb5b060 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Wed, 26 Mar 2025 10:51:59 +0530 Subject: [PATCH 6/9] Use float value for more accuracy --- .../auto-sizes/includes/improve-calculate-sizes.php | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index 9133fbffc..68c4adbc5 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -201,7 +201,10 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ case 'wide': $layout_width = auto_sizes_get_layout_width( 'wide' ); if ( str_ends_with( $layout_width, 'px' ) ) { - $layout_width = (int) $layout_width * $container_relative_width; + // First remove 'px' from width. + $layout_width = str_replace( 'px', '', $layout_width ); + // Convert to float for better precision. + $layout_width = (float) $layout_width * $container_relative_width; $layout_width = sprintf( '%dpx', (int) $layout_width ); } break; @@ -218,7 +221,10 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ * on the server. Otherwise, we need to rely on CSS functions. */ if ( str_ends_with( $layout_width, 'px' ) ) { - $layout_width = (int) $layout_width * $container_relative_width; + // First remove 'px' from width. + $layout_width = str_replace( 'px', '', $layout_width ); + // Convert to float for better precision. + $layout_width = (float) $layout_width * $container_relative_width; $layout_width = sprintf( '%dpx', min( (int) $layout_width, $image_width ) ); } else { $layout_width = sprintf( 'min(%1$s, %2$spx)', $layout_width, $image_width ); From 3a51aed436225312d53a8ad8c5e4dfe273b177f7 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Thu, 27 Mar 2025 10:16:38 +0530 Subject: [PATCH 7/9] Skip failed tests for WordPress versions lower than 6.8 --- .../tests/test-improve-calculate-sizes.php | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php index d387b57e3..19e95ea70 100644 --- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php +++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php @@ -783,6 +783,11 @@ public function data_image_block_with_column_block(): array { * @param string $expected Expected output. */ public function test_image_block_with_two_equal_column_block( string $ancestor_block_alignment, string $image_block_alignment, string $expected ): void { + // Skip test for WordPress versions below 6.8. + if ( version_compare( get_bloginfo( 'version' ), '6.8', '<' ) ) { + $this->markTestSkipped( 'This test requires WordPress 6.8 or higher.' ); + } + $block_content = $this->get_columns_block_markup( $this->get_image_block_markup( self::$image_id, 'large', $image_block_alignment ), array( @@ -914,6 +919,11 @@ public function data_image_block_with_two_equal_column_block(): array { * @param string $expected Expected output. */ public function test_image_block_with_two_different_width_column_block( string $ancestor_block_alignment, string $image_block_alignment, string $expected ): void { + // Skip test for WordPress versions below 6.8. + if ( version_compare( get_bloginfo( 'version' ), '6.8', '<' ) ) { + $this->markTestSkipped( 'This test requires WordPress 6.8 or higher.' ); + } + $block_content = $this->get_columns_block_markup( $this->get_image_block_markup( self::$image_id, 'large', $image_block_alignment ), array( @@ -1046,6 +1056,11 @@ public function data_image_block_with_two_different_width_column_block(): array * @param string $expected Expected output. */ public function test_image_block_with_parent_columns_and_its_parent_group_block( string $group_block_alignment, string $columns_block_alignment, string $image_block_alignment, string $expected ): void { + // Skip test for WordPress versions below 6.8. + if ( version_compare( get_bloginfo( 'version' ), '6.8', '<' ) ) { + $this->markTestSkipped( 'This test requires WordPress 6.8 or higher.' ); + } + $block_content = $this->get_group_block_markup( $this->get_columns_block_markup( $this->get_image_block_markup( self::$image_id, 'large', $image_block_alignment ), From bba49979a92a72a50d50db94262109239656d456 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Mon, 31 Mar 2025 10:14:07 +0530 Subject: [PATCH 8/9] Add more unit tests --- .../tests/test-improve-calculate-sizes.php | 90 +++++++++++++++---- 1 file changed, 72 insertions(+), 18 deletions(-) diff --git a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php index 19e95ea70..6a826ff72 100644 --- a/plugins/auto-sizes/tests/test-improve-calculate-sizes.php +++ b/plugins/auto-sizes/tests/test-improve-calculate-sizes.php @@ -1090,37 +1090,37 @@ public function test_image_block_with_parent_columns_and_its_parent_group_block( public function data_image_block_with_parent_columns_and_its_parent_group_block(): array { return array( // Parent default alignment. - 'Return 66.66% width of contentSize 413px, parent block default alignment, image block default alignment' => array( + 'Return 66.66% width of contentSize 413px, group block default alignment, columns block default alignment, image block default alignment' => array( '', '', '', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block default alignment, image block wide alignment' => array( + 'Return 66.66% width of contentSize 413px, group block default alignment, columns block default alignment, image block wide alignment' => array( '', '', 'wide', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block default alignment, image block full alignment' => array( + 'Return 66.66% width of contentSize 413px, group block default alignment, columns block default alignment, image block full alignment' => array( '', '', 'full', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block default alignment, image block left alignment' => array( + 'Return 66.66% width of contentSize 413px, group block default alignment, columns block default alignment, image block left alignment' => array( '', '', 'left', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block default alignment, image block center alignment' => array( + 'Return 66.66% width of contentSize 413px,group block default alignment, columns block default alignment, image block center alignment' => array( '', '', 'center', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block default alignment, image block right alignment' => array( + 'Return 66.66% width of contentSize 413px, group block default alignment, columns block default alignment, image block right alignment' => array( '', '', 'right', @@ -1128,37 +1128,37 @@ public function data_image_block_with_parent_columns_and_its_parent_group_block( ), // Parent wide alignment. - 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block default alignment' => array( + 'Return 66.66% width of contentSize 413px, group block wide alignment, columns block default alignment, image block default alignment' => array( 'wide', '', '', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block wide alignment' => array( + 'Return 66.66% width of contentSize 413px, group block wide alignment, columns block default alignment, image block wide alignment' => array( 'wide', '', 'wide', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block full alignment' => array( + 'Return 66.66% width of contentSize 413px, group block wide alignment, columns block default alignment, image block full alignment' => array( 'wide', '', 'full', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block left alignment' => array( + 'Return 66.66% width of contentSize 413px, group block wide alignment, columns block default alignment, image block left alignment' => array( 'wide', '', 'left', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block center alignment' => array( + 'Return 66.66% width of contentSize 413px, group block wide alignment, columns block default alignment, image block center alignment' => array( 'wide', '', 'center', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block wide alignment, image block right alignment' => array( + 'Return 66.66% width of contentSize 413px, group block wide alignment, columns block default alignment, image block right alignment' => array( 'wide', '', 'right', @@ -1166,42 +1166,96 @@ public function data_image_block_with_parent_columns_and_its_parent_group_block( ), // Parent full alignment. - 'Return 66.66% width of contentSize 413px, parent block full alignment, image block default alignment' => array( + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block default alignment, image block default alignment' => array( 'full', '', '', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block full alignment, image block wide alignment' => array( + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block default alignment, image block wide alignment' => array( 'full', '', 'wide', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block full alignment, image block full alignment' => array( + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block default alignment, image block full alignment' => array( 'full', '', 'full', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block full alignment, image block left alignment' => array( + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block default alignment, image block left alignment' => array( 'full', '', 'left', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block full alignment, image block center alignment' => array( + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block default alignment, image block center alignment' => array( 'full', '', 'center', 'sizes="(max-width: 413px) 100vw, 413px" ', ), - 'Return 66.66% width of contentSize 413px, parent block full alignment, image block right alignment' => array( + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block default alignment, image block right alignment' => array( 'full', '', 'right', 'sizes="(max-width: 413px) 100vw, 413px" ', ), + 'Return 66.66% width of wideSize 853px, group block full alignment, columns block wide alignment, image block left alignment' => array( + 'full', + 'wide', + 'left', + 'sizes="(max-width: 853px) 100vw, 853px" ', + ), + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block wide alignment, image block center alignment' => array( + 'full', + 'wide', + 'center', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of wideSize 853px, group block full alignment, columns block wide alignment, image block right alignment' => array( + 'full', + 'wide', + 'right', + 'sizes="(max-width: 853px) 100vw, 853px" ', + ), + 'Return 66.66% width of wideSize 853px, group block wide alignment, columns block wide alignment, image block left alignment' => array( + 'wide', + 'wide', + 'left', + 'sizes="(max-width: 853px) 100vw, 853px" ', + ), + 'Return 66.66% width of contentSize 413px, group block wide alignment, columns block wide alignment, image block center alignment' => array( + 'wide', + 'wide', + 'center', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of wideSize 853px, group block wide alignment, columns block wide alignment, image block right alignment' => array( + 'wide', + 'wide', + 'right', + 'sizes="(max-width: 853px) 100vw, 853px" ', + ), + 'Return 66.66% width of wideSize 853px, group block full alignment, columns block full alignment, image block left alignment' => array( + 'full', + 'full', + 'left', + 'sizes="(max-width: 853px) 100vw, 853px" ', + ), + 'Return 66.66% width of contentSize 413px, group block full alignment, columns block full alignment, image block center alignment' => array( + 'full', + 'full', + 'center', + 'sizes="(max-width: 413px) 100vw, 413px" ', + ), + 'Return 66.66% width of wideSize 853px, group block full alignment, columns block full alignment, image block right alignment' => array( + 'full', + 'full', + 'right', + 'sizes="(max-width: 853px) 100vw, 853px" ', + ), ); } From 454c6691574631ae401a65d84f2204f9c0c112dc Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Tue, 1 Apr 2025 11:45:51 +0530 Subject: [PATCH 9/9] Additional check for --- .../includes/improve-calculate-sizes.php | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/plugins/auto-sizes/includes/improve-calculate-sizes.php b/plugins/auto-sizes/includes/improve-calculate-sizes.php index dd7723886..4e336b03f 100644 --- a/plugins/auto-sizes/includes/improve-calculate-sizes.php +++ b/plugins/auto-sizes/includes/improve-calculate-sizes.php @@ -200,7 +200,11 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ case 'wide': $layout_width = auto_sizes_get_layout_width( 'wide' ); - if ( str_ends_with( $layout_width, 'px' ) ) { + if ( + str_ends_with( $layout_width, 'px' ) && + ( $container_relative_width > 0.0 || + $container_relative_width < 1.0 ) + ) { // First remove 'px' from width. $layout_width = str_replace( 'px', '', $layout_width ); // Convert to float for better precision. @@ -220,7 +224,11 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $ * If the layout width is in pixels, we can compare against the image width * on the server. Otherwise, we need to rely on CSS functions. */ - if ( str_ends_with( $layout_width, 'px' ) ) { + if ( + str_ends_with( $layout_width, 'px' ) && + ( $container_relative_width > 0.0 || + $container_relative_width < 1.0 ) + ) { // First remove 'px' from width. $layout_width = str_replace( 'px', '', $layout_width ); // Convert to float for better precision. @@ -337,7 +345,10 @@ function auto_sizes_filter_render_block_context( array $context, array $block, ? } // Multiply with parent's width if available. - if ( isset( $parent_block->context['container_relative_width'] ) ) { + if ( + isset( $parent_block->context['container_relative_width'] ) && + ( $current_width > 0.0 || $current_width < 1.0 ) + ) { $context['container_relative_width'] = $parent_block->context['container_relative_width'] * $current_width; } else { $context['container_relative_width'] = $current_width;