Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accurate sizes: Pass parent alignment context to images #1701

Merged
merged 26 commits into from
Dec 12, 2024
Merged

Accurate sizes: Pass parent alignment context to images #1701

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
042232f
Add tests for passing parent alignment context to images
joemcgill Nov 25, 2024
47c6779
POC - Pass group block alignment context to image block
mukeshpanchal27 Nov 26, 2024
894ed57
Fix spell
mukeshpanchal27 Nov 26, 2024
cf8691a
Clean up
mukeshpanchal27 Nov 26, 2024
ee5f028
Merge branch 'feature/1511-incorporate-layout-constraints-from-ancest…
joemcgill Nov 26, 2024
93d3f08
Remove test group from unit test
mukeshpanchal27 Nov 28, 2024
f1ec64d
Move add_filter() calls in hooks.php
mukeshpanchal27 Nov 28, 2024
2735713
Remove unused wp_parse_args from unit test
mukeshpanchal27 Nov 28, 2024
b84d33e
Remove parent block context instead use existing key for check
mukeshpanchal27 Nov 28, 2024
5a9ce37
Bump unit test WP version to 6.6
mukeshpanchal27 Nov 28, 2024
2085845
Merge pull request #1704 from WordPress/update/poc-pass-alignment-by-…
mukeshpanchal27 Nov 28, 2024
de77338
implement static cache
mukeshpanchal27 Dec 2, 2024
ae82ccd
Separate function for width calculation and format sizes attribute
mukeshpanchal27 Dec 3, 2024
8189d71
Remove unused old function
mukeshpanchal27 Dec 3, 2024
2f03e55
Merge branch 'feature/1511-incorporate-layout-constraints-from-ancest…
joemcgill Dec 3, 2024
25d95ea
Rename filter callbacks for consistency
joemcgill Dec 3, 2024
9677bca
Simplify passing of context for sizes calculation
joemcgill Dec 5, 2024
5c6f7fd
Simplify context logic further
joemcgill Dec 5, 2024
df8741f
Remove unused auto_sizes_get_width function
joemcgill Dec 5, 2024
0790b92
Minor docbock update
mukeshpanchal27 Dec 6, 2024
8ca8b27
WIP: fix center alignments and cover blocks
joemcgill Dec 10, 2024
83be032
Return accurate sizes for center alignment
mukeshpanchal27 Dec 11, 2024
d3a60d0
Improve cover block left/right alignment
joemcgill Dec 12, 2024
266e457
Initial review feedback improvements
joemcgill Dec 12, 2024
aecb3de
Force resize width to be an int
joemcgill Dec 12, 2024
7fb1962
Additional type casting fixes
joemcgill Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions plugins/auto-sizes/includes/improve-calculate-sizes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
joemcgill marked this conversation as resolved.
Show resolved Hide resolved

$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;
Expand Down Expand Up @@ -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 ) {
joemcgill marked this conversation as resolved.
Show resolved Hide resolved
return false;
Expand Down Expand Up @@ -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,
);
Expand All @@ -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;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea! I think that instead we could pass this as the function as the $size or $resize_width value for auto_sizes_calculate_better_sizes() and avoid needing to add another argument to the function signature. Alternately, we could consider allowing arbitrary values to be passed to the $max_alignment value, which then overrides any alignment value, which may come in handy whenever we want to pass a maximum width value based on things like columns or grid values.

Also, small nitpick, but this calculation isn't the same as what is used for the cover block, instead it calculates 0.5 * $content-width, which is a CSS variable that is defined in this package. So it should always end up being '420px'.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Went with the $size idea and took advantage of the fact that you can use an array for $size when passing to wp_get_attachment_image_src(). See, d3a60d0.

}
$layout_width = sprintf( '%1$spx', $image_width );
break;

case 'center':
Expand Down
14 changes: 7 additions & 7 deletions plugins/auto-sizes/tests/test-improve-calculate-sizes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand All @@ -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' ),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These were correct prior, based on https://github.com/WordPress/gutenberg/blob/938720602082dc50a1746bd2e33faa3d3a6096d4/packages/base-styles/_variables.scss#L125.

array( 'center', 'sizes="(max-width: 620px) 100vw, 620px' ),
);
}
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
Loading