Skip to content

Commit 35988a4

Browse files
joemcgilljoemcgill
committed
Add tests for relative alignment
1 parent 7dd60d5 commit 35988a4

File tree

2 files changed

+123
-5
lines changed

2 files changed

+123
-5
lines changed

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -304,9 +304,5 @@ function auto_sizes_filter_render_block_context( array $context, array $block ):
304304
* @return array<string, mixed> Associative array of layout settings.
305305
*/
306306
function auto_sizes_get_layout_settings(): array {
307-
static $layout = array();
308-
if ( count( $layout ) === 0 ) {
309-
$layout = wp_get_global_settings( array( 'layout' ) );
310-
}
311-
return $layout;
307+
return wp_get_global_settings( array( 'layout' ) );
312308
}

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ public function set_up(): void {
3434

3535
// Disable lazy loading attribute.
3636
add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
37+
38+
// Run each test with fresh WP_Theme_JSON data so we can filter layout values.
39+
wp_clean_theme_json_cache();
3740
}
3841

3942
/**
@@ -514,6 +517,125 @@ public function data_ancestor_and_image_block_alignment(): array {
514517
);
515518
}
516519

520+
/**
521+
* Test sizes attributes when alignments use relative units.
522+
*
523+
* @dataProvider data_image_blocks_with_relative_alignment
524+
*
525+
* @param string $ancestor_alignment Ancestor alignment.
526+
* @param string $image_alignment Image alignment.
527+
* @param string $expected Expected output.
528+
*/
529+
public function test_sizes_with_relative_layout_sizes( string $ancestor_alignment, string $image_alignment, string $expected ): void {
530+
add_filter( 'wp_theme_json_data_user', array( $this, 'filter_theme_json_layout_sizes' ) );
531+
532+
$block_content = $this->get_group_block_markup(
533+
$this->get_image_block_markup( self::$image_id, 'large', $image_alignment ),
534+
array(
535+
'align' => $ancestor_alignment,
536+
)
537+
);
538+
539+
$result = apply_filters( 'the_content', $block_content );
540+
541+
$this->assertStringContainsString( $expected, $result );
542+
}
543+
544+
/**
545+
* Data provider.
546+
*
547+
* @return array<string, array<int, bool|string>> The ancestor and image alignments.
548+
*/
549+
public function data_image_blocks_with_relative_alignment(): array {
550+
return array(
551+
// Parent default alignment.
552+
'Return contentSize 50vw, parent block default alignment, image block default alignment' => array(
553+
'',
554+
'',
555+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
556+
),
557+
'Return contentSize 50vw, parent block default alignment, image block wide alignment' => array(
558+
'',
559+
'wide',
560+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
561+
),
562+
'Return contentSize 50vw, parent block default alignment, image block full alignment' => array(
563+
'',
564+
'full',
565+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
566+
),
567+
'Return contentSize 50vw, parent block default alignment, image block left alignment' => array(
568+
'',
569+
'left',
570+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
571+
),
572+
'Return contentSize 50vw, parent block default alignment, image block center alignment' => array(
573+
'',
574+
'center',
575+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
576+
),
577+
'Return contentSize 50vw, parent block default alignment, image block right alignment' => array(
578+
'',
579+
'right',
580+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
581+
),
582+
583+
// Parent wide alignment.
584+
'Return contentSize 50vw, parent block wide alignment, image block default alignment' => array(
585+
'wide',
586+
'',
587+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
588+
),
589+
'Return wideSize 75vw, parent block wide alignment, image block wide alignment' => array(
590+
'wide',
591+
'wide',
592+
'sizes="(max-width: 75vw) 100vw, 75vw" ',
593+
),
594+
'Return wideSize 75vw, parent block wide alignment, image block full alignment' => array(
595+
'wide',
596+
'full',
597+
'sizes="(max-width: 75vw) 100vw, 75vw" ',
598+
),
599+
'Return image size 1024px, parent block wide alignment, image block left alignment' => array(
600+
'wide',
601+
'left',
602+
'sizes="(max-width: min(75vw, 1024px)) 100vw, min(75vw, 1024px)" ',
603+
),
604+
'Return image size 620px, parent block wide alignment, image block center alignment' => array(
605+
'wide',
606+
'center',
607+
'sizes="(max-width: min(50vw, 1024px)) 100vw, min(50vw, 1024px)" ',
608+
),
609+
'Return image size 1024px, parent block wide alignment, image block right alignment' => array(
610+
'wide',
611+
'right',
612+
'sizes="(max-width: min(75vw, 1024px)) 100vw, min(75vw, 1024px)" ',
613+
),
614+
);
615+
}
616+
617+
/**
618+
* Filter the theme.json data to include relative layout sizes.
619+
*
620+
* @param WP_Theme_JSON_Data $theme_json Theme JSON object.
621+
* @return WP_Theme_JSON_Data Updated theme JSON object.
622+
*/
623+
public function filter_theme_json_layout_sizes( WP_Theme_JSON_Data $theme_json ): WP_Theme_JSON_Data {
624+
$data = array(
625+
'version' => 2,
626+
'settings' => array(
627+
'layout' => array(
628+
'contentSize' => '50vw',
629+
'wideSize' => '75vw',
630+
),
631+
),
632+
);
633+
634+
$theme_json = $theme_json->update_with( $data );
635+
636+
return $theme_json;
637+
}
638+
517639
/**
518640
* Helper to generate image block markup.
519641
*

0 commit comments

Comments
 (0)