Skip to content

Commit d0800cc

Browse files
mukeshpanchal27mukeshpanchal27
authored
Merge pull request #2084 from WordPress/update/sizes-core-post-featured-image-block
Accurate sizes: Add support for `core/post-featured-image` block
2 parents c2ccbde + a7fa2e0 commit d0800cc

File tree

3 files changed

+196
-18
lines changed

3 files changed

+196
-18
lines changed

‎plugins/auto-sizes/hooks.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,6 @@ function auto_sizes_render_generator(): void {
4040
add_filter( 'the_content', 'auto_sizes_prime_attachment_caches', 9 ); // This must run before 'do_blocks', which runs at priority 9.
4141
add_filter( 'render_block_core/image', 'auto_sizes_filter_image_tag', 10, 3 );
4242
add_filter( 'render_block_core/cover', 'auto_sizes_filter_image_tag', 10, 3 );
43+
add_filter( 'render_block_core/post-featured-image', 'auto_sizes_filter_image_tag', 10, 3 );
4344
add_filter( 'get_block_type_uses_context', 'auto_sizes_filter_uses_context', 10, 2 );
4445
add_filter( 'render_block_context', 'auto_sizes_filter_render_block_context', 10, 3 );

‎plugins/auto-sizes/includes/improve-calculate-sizes.php‎

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,20 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
9494
* @param string $size The image size data.
9595
*/
9696
$filter = static function ( $sizes, $size ) use ( $block ) {
97-
9897
$id = isset( $block->attributes['id'] ) ? (int) $block->attributes['id'] : 0;
9998
$alignment = $block->attributes['align'] ?? '';
10099
$width = isset( $block->attributes['width'] ) ? (int) $block->attributes['width'] : 0;
101100
$max_alignment = $block->context['max_alignment'] ?? '';
102101
$container_relative_width = $block->context['container_relative_width'] ?? 1.0;
103102

103+
/*
104+
* For the post featured image block, use the post ID to get the featured image attachment ID.
105+
* See https://github.com/WordPress/wordpress-develop/blob/3f9c6fce666ed2ea0d56c21f6235c37db3d91392/src/wp-includes/blocks/post-featured-image.php#L65
106+
*/
107+
if ( 'core/post-featured-image' === $block->name && isset( $block->context['postId'] ) ) {
108+
$id = auto_sizes_get_featured_image_attachment_id( $block->context['postId'] );
109+
}
110+
104111
/*
105112
* Update width for cover block.
106113
* See https://github.com/WordPress/gutenberg/blob/938720602082dc50a1746bd2e33faa3d3a6096d4/packages/block-library/src/cover/style.scss#L82-L87.
@@ -118,12 +125,23 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
118125
// Hook this filter early, before default filters are run.
119126
add_filter( 'wp_calculate_image_sizes', $filter, 9, 2 );
120127

128+
// Get the image ID from the block attributes or context.
129+
$id = $parsed_block['attrs']['id'] ?? 0;
130+
131+
/*
132+
* For the post featured image block, use the post ID to get the featured image attachment ID.
133+
* See https://github.com/WordPress/wordpress-develop/blob/3f9c6fce666ed2ea0d56c21f6235c37db3d91392/src/wp-includes/blocks/post-featured-image.php#L65
134+
*/
135+
if ( 'core/post-featured-image' === $block->name && isset( $block->context['postId'] ) ) {
136+
$id = auto_sizes_get_featured_image_attachment_id( $block->context['postId'] );
137+
}
138+
121139
$sizes = wp_calculate_image_sizes(
122140
// If we don't have a size slug, assume the full size was used.
123141
$parsed_block['attrs']['sizeSlug'] ?? 'full',
124142
null,
125143
null,
126-
$parsed_block['attrs']['id'] ?? 0
144+
$id
127145
);
128146

129147
remove_filter( 'wp_calculate_image_sizes', $filter, 9 );
@@ -284,11 +302,12 @@ function auto_sizes_get_layout_width( string $alignment ): string {
284302
function auto_sizes_filter_uses_context( array $uses_context, WP_Block_Type $block_type ): array {
285303
// Define block-specific context usage.
286304
$block_specific_context = array(
287-
'core/cover' => array( 'max_alignment', 'container_relative_width' ),
288-
'core/image' => array( 'max_alignment', 'container_relative_width' ),
289-
'core/group' => array( 'max_alignment' ),
290-
'core/columns' => array( 'max_alignment', 'container_relative_width' ),
291-
'core/column' => array( 'max_alignment', 'column_count' ),
305+
'core/cover' => array( 'max_alignment', 'container_relative_width' ),
306+
'core/image' => array( 'max_alignment', 'container_relative_width' ),
307+
'core/post-featured-image' => array( 'max_alignment', 'container_relative_width' ),
308+
'core/group' => array( 'max_alignment' ),
309+
'core/columns' => array( 'max_alignment', 'container_relative_width' ),
310+
'core/column' => array( 'max_alignment', 'column_count' ),
292311
);
293312

294313
if ( isset( $block_specific_context[ $block_type->name ] ) ) {
@@ -316,6 +335,7 @@ function auto_sizes_filter_render_block_context( array $context, array $block, ?
316335
$provider_blocks = array(
317336
'core/columns',
318337
'core/group',
338+
'core/post-featured-image',
319339
);
320340

321341
if ( in_array( $block['blockName'], $provider_blocks, true ) ) {
@@ -360,3 +380,19 @@ function auto_sizes_filter_render_block_context( array $context, array $block, ?
360380
}
361381
return $context;
362382
}
383+
384+
/**
385+
* Retrieves the featured image attachment ID for a given post ID.
386+
*
387+
* @since n.e.x.t
388+
*
389+
* @param int $post_id The post ID.
390+
* @return int The featured image attachment ID or 0 if not found.
391+
*/
392+
function auto_sizes_get_featured_image_attachment_id( int $post_id ): int {
393+
if ( 0 === $post_id ) {
394+
return 0;
395+
}
396+
397+
return (int) get_post_thumbnail_id( $post_id );
398+
}

‎plugins/auto-sizes/tests/test-improve-calculate-sizes.php‎

Lines changed: 152 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ class Tests_Improve_Calculate_Sizes extends WP_UnitTestCase {
1515
*/
1616
public static $image_id;
1717

18+
/**
19+
* Post ID.
20+
*
21+
* @var int
22+
*/
23+
public static $post_id;
1824
/**
1925
* Set up the environment for the tests.
2026
*/
@@ -24,6 +30,13 @@ public static function set_up_before_class(): void {
2430
switch_theme( 'twentytwentyfour' );
2531

2632
self::$image_id = self::factory()->attachment->create_upload_object( TESTS_PLUGIN_DIR . '/tests/data/images/leaves.jpg' );
33+
34+
self::$post_id = self::factory()->post->create(
35+
array(
36+
'post_status' => 'publish',
37+
'post_name' => 'test-post',
38+
)
39+
);
2740
}
2841

2942
public function set_up(): void {
@@ -108,7 +121,7 @@ public function test_image_block_with_wide_alignment( string $image_size ): void
108121
*
109122
* @return array<array<string>> The image sizes.
110123
*/
111-
public function data_image_sizes(): array {
124+
public static function data_image_sizes(): array {
112125
return array(
113126
'Return full or wideSize 1280px instead of medium size 300px' => array(
114127
'medium',
@@ -164,7 +177,7 @@ public function test_image_block_with_default_alignment( string $image_size, str
164177
*
165178
* @return array<string, array<int, bool|string>> The image sizes.
166179
*/
167-
public function data_image_sizes_for_default_alignment(): array {
180+
public static function data_image_sizes_for_default_alignment(): array {
168181
return array(
169182
'Return medium image size 300px instead of contentSize 620px' => array(
170183
'medium',
@@ -239,7 +252,7 @@ public function test_image_block_with_left_right_center_alignment( string $image
239252
*
240253
* @return array<string, array<int, bool|string>> The image sizes and alignments.
241254
*/
242-
public function data_image_sizes_for_left_right_center_alignment(): array {
255+
public static function data_image_sizes_for_left_right_center_alignment(): array {
243256
return array(
244257
'Return medium image size 300px with left alignment' => array(
245258
'medium',
@@ -369,7 +382,7 @@ public function test_cover_block_with_left_right_center_alignment( string $align
369382
*
370383
* @return array<array<string>> The image sizes.
371384
*/
372-
public function data_image_left_right_center_alignment(): array {
385+
public static function data_image_left_right_center_alignment(): array {
373386
return array(
374387
array( 'left', 'sizes="(max-width: 420px) 100vw, 420px' ),
375388
array( 'right', 'sizes="(max-width: 420px) 100vw, 420px' ),
@@ -417,7 +430,7 @@ public function test_ancestor_layout_is_passed_by_context( string $ancestor_bloc
417430
*
418431
* @return array<string, array<int, bool|string>> The ancestor and image alignments.
419432
*/
420-
public function data_ancestor_and_image_block_alignment(): array {
433+
public static function data_ancestor_and_image_block_alignment(): array {
421434
return array(
422435
// Parent default alignment.
423436
'Return contentSize 620px, parent block default alignment, image block default alignment' => array(
@@ -546,7 +559,7 @@ public function test_sizes_with_relative_layout_sizes( string $ancestor_alignmen
546559
*
547560
* @return array<string, array<int, bool|string>> The ancestor and image alignments.
548561
*/
549-
public function data_image_blocks_with_relative_alignment(): array {
562+
public static function data_image_blocks_with_relative_alignment(): array {
550563
return array(
551564
// Parent default alignment.
552565
'Return contentSize 50vw, parent block default alignment, image block default alignment' => array(
@@ -636,7 +649,7 @@ public function test_image_block_with_different_alignment_in_classic_theme( stri
636649
*
637650
* @return array<array<string>> The ancestor and image alignments.
638651
*/
639-
public function data_image_blocks_with_relative_alignment_for_classic_theme(): array {
652+
public static function data_image_blocks_with_relative_alignment_for_classic_theme(): array {
640653
return array(
641654
array( '' ),
642655
array( 'wide' ),
@@ -673,7 +686,7 @@ public function test_image_block_with_single_column_block( string $ancestor_bloc
673686
*
674687
* @return array<string, array<int, bool|string>> The ancestor and image alignments.
675688
*/
676-
public function data_image_block_with_column_block(): array {
689+
public static function data_image_block_with_column_block(): array {
677690
return array(
678691
// Parent default alignment.
679692
'Return contentSize 620px, parent block default alignment, image block default alignment' => array(
@@ -809,7 +822,7 @@ public function test_image_block_with_two_equal_column_block( string $ancestor_b
809822
*
810823
* @return array<string, array<int, bool|string>> The ancestor and image alignments.
811824
*/
812-
public function data_image_block_with_two_equal_column_block(): array {
825+
public static function data_image_block_with_two_equal_column_block(): array {
813826
return array(
814827
// Parent default alignment.
815828
'Return half size of contentSize 310px, parent block default alignment, image block default alignment' => array(
@@ -945,7 +958,7 @@ public function test_image_block_with_two_different_width_column_block( string $
945958
*
946959
* @return array<string, array<int, bool|string>> The ancestor and image alignments.
947960
*/
948-
public function data_image_block_with_two_different_width_column_block(): array {
961+
public static function data_image_block_with_two_different_width_column_block(): array {
949962
return array(
950963
// Parent default alignment.
951964
'Return 66.66% width of contentSize 413px, parent block default alignment, image block default alignment' => array(
@@ -1087,7 +1100,7 @@ public function test_image_block_with_parent_columns_and_its_parent_group_block(
10871100
*
10881101
* @return array<string, array<int, string>> The ancestor and image alignments.
10891102
*/
1090-
public function data_image_block_with_parent_columns_and_its_parent_group_block(): array {
1103+
public static function data_image_block_with_parent_columns_and_its_parent_group_block(): array {
10911104
return array(
10921105
// Parent default alignment.
10931106
'Return 66.66% width of contentSize 413px, group block default alignment, columns block default alignment, image block default alignment' => array(
@@ -1259,6 +1272,134 @@ public function data_image_block_with_parent_columns_and_its_parent_group_block(
12591272
);
12601273
}
12611274

1275+
/**
1276+
* Verifies that the post featured image block does not render when no featured image is set for the post.
1277+
*/
1278+
public function test_post_featured_image_block_without_featured_image(): void {
1279+
$block_content = '<!-- wp:post-featured-image /-->';
1280+
1281+
// Set up global $post so 'the_content' filter works as expected.
1282+
global $post;
1283+
$post = get_post( self::$post_id );
1284+
setup_postdata( $post );
1285+
1286+
$result = apply_filters( 'the_content', $block_content );
1287+
1288+
$this->assertStringContainsString( '', $result );
1289+
1290+
wp_reset_postdata();
1291+
}
1292+
1293+
/**
1294+
* Test that the post featured image block renders correctly with different image sizes.
1295+
*
1296+
* @dataProvider data_post_featured_image_block_image_sizes
1297+
*
1298+
* @param string $image_size Image size.
1299+
* @param string $expected Expected output.
1300+
*/
1301+
public function test_post_featured_image_block_with_different_image_size( string $image_size, string $expected ): void {
1302+
update_post_meta( self::$post_id, '_thumbnail_id', self::$image_id );
1303+
1304+
$block_content = '<!-- wp:post-featured-image {"sizeSlug":"' . $image_size . '"} /-->';
1305+
1306+
// Set up global $post so 'the_content' filter works as expected.
1307+
global $post;
1308+
$post = get_post( self::$post_id );
1309+
setup_postdata( $post );
1310+
1311+
$result = apply_filters( 'the_content', $block_content );
1312+
1313+
// Check that the featured image block renders the image and has a sizes attribute.
1314+
$this->assertStringContainsString( 'wp-block-post-featured-image', $result );
1315+
$this->assertStringContainsString( $expected, $result );
1316+
1317+
wp_reset_postdata();
1318+
}
1319+
1320+
/**
1321+
* Data provider.
1322+
*
1323+
* @return array<array<string>> The image sizes.
1324+
*/
1325+
public static function data_post_featured_image_block_image_sizes(): array {
1326+
return array(
1327+
'Return medium image size 300px' => array(
1328+
'medium',
1329+
'sizes="(max-width: 300px) 100vw, 300px" ',
1330+
),
1331+
'Return contentSize 620px instead of large size 1024px' => array(
1332+
'large',
1333+
'sizes="(max-width: 620px) 100vw, 620px" ',
1334+
),
1335+
'Return contentSize 620px instead of full size 1080px' => array(
1336+
'full',
1337+
'sizes="(max-width: 620px) 100vw, 620px" ',
1338+
),
1339+
);
1340+
}
1341+
1342+
/**
1343+
* Test that the post featured image block renders correctly with different alignment.
1344+
*
1345+
* @dataProvider data_post_featured_image_block_alignment
1346+
*
1347+
* @param string $alignment Alignment of the image.
1348+
* @param string $expected Expected output.
1349+
*/
1350+
public function test_post_featured_image_block_with_different_alignment( string $alignment, string $expected ): void {
1351+
update_post_meta( self::$post_id, '_thumbnail_id', self::$image_id );
1352+
1353+
$block_content = '<!-- wp:post-featured-image {"align":"' . $alignment . '"} /-->';
1354+
1355+
// Set up global $post so 'the_content' filter works as expected.
1356+
global $post;
1357+
$post = get_post( self::$post_id );
1358+
setup_postdata( $post );
1359+
1360+
$result = apply_filters( 'the_content', $block_content );
1361+
1362+
// Check that the featured image block renders the image and has a sizes attribute.
1363+
$this->assertStringContainsString( 'wp-block-post-featured-image', $result );
1364+
$this->assertStringContainsString( $expected, $result );
1365+
1366+
wp_reset_postdata();
1367+
}
1368+
1369+
/**
1370+
* Data provider.
1371+
*
1372+
* @return array<array<string>> The image sizes.
1373+
*/
1374+
public static function data_post_featured_image_block_alignment(): array {
1375+
return array(
1376+
'Return contentSize 620px instead of image size 1080px, block default alignment' => array(
1377+
'',
1378+
'sizes="(max-width: 620px) 100vw, 620px" ',
1379+
),
1380+
'Return wideSize 1280px instead of image size 1080px, block wide alignment' => array(
1381+
'wide',
1382+
'sizes="(max-width: 1280px) 100vw, 1280px" ',
1383+
),
1384+
'Return full size instead of image size 1080px, block full alignment' => array(
1385+
'full',
1386+
'sizes="100vw" ',
1387+
),
1388+
'Return image size 1080px, block left alignment' => array(
1389+
'left',
1390+
'sizes="(max-width: 1080px) 100vw, 1080px" ',
1391+
),
1392+
'Return image size 1080px, block right alignment' => array(
1393+
'right',
1394+
'sizes="(max-width: 1080px) 100vw, 1080px" ',
1395+
),
1396+
'Return contentSize 620px instead of image size 1080px, block center alignment' => array(
1397+
'center',
1398+
'sizes="(max-width: 620px) 100vw, 620px" ',
1399+
),
1400+
);
1401+
}
1402+
12621403
/**
12631404
* Filter the theme.json data to include relative layout sizes.
12641405
*

0 commit comments

Comments
 (0)