Skip to content

Accurate sizes: Support relative alignment widths #1737

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

Merged
merged 4 commits into from
Dec 13, 2024
Merged

Accurate sizes: Support relative alignment widths #1737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
501c65e
Initial concept for supporting relative alingment widths
joemcgill Dec 12, 2024
e69b2af
Revert unwanted doc indention changes
mukeshpanchal27 Dec 13, 2024
7dd60d5
Chance typing for `sprintf()` placeholder
joemcgill Dec 13, 2024
35988a4
Add tests for relative alignment
joemcgill Dec 13, 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
24 changes: 14 additions & 10 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 @@ -194,13 +194,21 @@ function auto_sizes_calculate_better_sizes( int $id, $size, string $align, int $

case 'left':
case 'right':
$layout_width = sprintf( '%1$spx', $image_width );
break;

case 'center':
default:
$alignment = auto_sizes_get_layout_width( 'default' );
$layout_width = sprintf( '%1$spx', min( (int) $alignment, $image_width ) );
$layout_alignment = in_array( $alignment, array( 'left', 'right' ), true ) ? 'wide' : 'default';
$layout_width = auto_sizes_get_layout_width( $layout_alignment );

/*
* 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' ) ) {
$layout_width = sprintf( '%dpx', min( (int) $layout_width, $image_width ) );
} else {
$layout_width = sprintf( 'min(%1$s, %2$spx)', $layout_width, $image_width );
}

break;
}

Expand Down Expand Up @@ -296,9 +304,5 @@ function auto_sizes_filter_render_block_context( array $context, array $block ):
* @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;
return wp_get_global_settings( array( 'layout' ) );
}
122 changes: 122 additions & 0 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 @@ -34,6 +34,9 @@ public function set_up(): void {

// Disable lazy loading attribute.
add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );

// Run each test with fresh WP_Theme_JSON data so we can filter layout values.
wp_clean_theme_json_cache();
}

/**
Expand Down Expand Up @@ -514,6 +517,125 @@ public function data_ancestor_and_image_block_alignment(): array {
);
}

/**
* Test sizes attributes when alignments use relative units.
*
* @dataProvider data_image_blocks_with_relative_alignment
*
* @param string $ancestor_alignment Ancestor alignment.
* @param string $image_alignment Image alignment.
* @param string $expected Expected output.
*/
public function test_sizes_with_relative_layout_sizes( string $ancestor_alignment, string $image_alignment, string $expected ): void {
add_filter( 'wp_theme_json_data_user', array( $this, 'filter_theme_json_layout_sizes' ) );

$block_content = $this->get_group_block_markup(
$this->get_image_block_markup( self::$image_id, 'large', $image_alignment ),
array(
'align' => $ancestor_alignment,
)
);

$result = apply_filters( 'the_content', $block_content );

$this->assertStringContainsString( $expected, $result );
}

/**
* Data provider.
*
* @return array<string, array<int, bool|string>> The ancestor and image alignments.
*/
public function data_image_blocks_with_relative_alignment(): array {
return array(
// Parent default alignment.
'Return contentSize 50vw, parent block default alignment, image block default alignment' => array(
'',
'',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),
'Return contentSize 50vw, parent block default alignment, image block wide alignment' => array(
'',
'wide',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),
'Return contentSize 50vw, parent block default alignment, image block full alignment' => array(
'',
'full',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),
'Return contentSize 50vw, parent block default alignment, image block left alignment' => array(
'',
'left',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),
'Return contentSize 50vw, parent block default alignment, image block center alignment' => array(
'',
'center',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),
'Return contentSize 50vw, parent block default alignment, image block right alignment' => array(
'',
'right',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),

// Parent wide alignment.
'Return contentSize 50vw, parent block wide alignment, image block default alignment' => array(
'wide',
'',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),
'Return wideSize 75vw, parent block wide alignment, image block wide alignment' => array(
'wide',
'wide',
'sizes="(max-width: 75vw) 100vw, 75vw" ',
),
'Return wideSize 75vw, parent block wide alignment, image block full alignment' => array(
'wide',
'full',
'sizes="(max-width: 75vw) 100vw, 75vw" ',
),
'Return image size 1024px, parent block wide alignment, image block left alignment' => array(
'wide',
'left',
'sizes="(max-width: min(75vw, 1024px)) 100vw, min(75vw, 1024px)" ',
),
'Return image size 620px, parent block wide alignment, image block center alignment' => array(
'wide',
'center',
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
),
'Return image size 1024px, parent block wide alignment, image block right alignment' => array(
'wide',
'right',
'sizes="(max-width: min(75vw, 1024px)) 100vw, min(75vw, 1024px)" ',
),
);
}

/**
* Filter the theme.json data to include relative layout sizes.
*
* @param WP_Theme_JSON_Data $theme_json Theme JSON object.
* @return WP_Theme_JSON_Data Updated theme JSON object.
*/
public function filter_theme_json_layout_sizes( WP_Theme_JSON_Data $theme_json ): WP_Theme_JSON_Data {
$data = array(
'version' => 2,
'settings' => array(
'layout' => array(
'contentSize' => '50vw',
'wideSize' => '75vw',
),
),
);

$theme_json = $theme_json->update_with( $data );

return $theme_json;
}

/**
* Helper to generate image block markup.
*
Expand Down
Loading