Skip to content

Gallery block: Add full align gallery support and unit tests #2587

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

Open
mukeshpanchal27 wants to merge 3 commits into
base: fix/2449-equal-column
Choose a base branch
from
+170 −2
Open

Gallery block: Add full align gallery support and unit tests #2587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e1ba8b
Add full align gallery support and unit tests
mukeshpanchal27 Jul 20, 2026
37e15bb
Add test case
mukeshpanchal27 Jul 21, 2026
714535c
Update inline comment
mukeshpanchal27 Jul 21, 2026
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
13 changes: 11 additions & 2 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 @@ -131,6 +131,15 @@ function auto_sizes_filter_image_tag( $content, array $parsed_block, WP_Block $b
$is_parent_gallery_aligned = (bool) ( $block->context['is_parent_aligned'] ?? false );
if ( $is_parent_gallery_aligned && '' === $alignment ) {
$alignment = $max_alignment;

/*
* A full alignment normally spans the whole viewport, but inside a narrower
* container (e.g. a column) the gallery is constrained to that container instead.
* The resulting width cannot be expressed reliably here, so keep the default sizes.
*/
if ( 1.0 !== (float) $container_relative_width && 'full' === $alignment ) {
return $sizes;
Comment thread
mukeshpanchal27 marked this conversation as resolved.
}
}

$better_sizes = auto_sizes_calculate_better_sizes( $id, $size, $alignment, $width, $max_alignment, $container_relative_width );
Expand Down Expand Up @@ -385,9 +394,9 @@ function auto_sizes_filter_render_block_context( array $context, array $block, ?
$context['gallery_column_count'] = 3;
}

// If the gallery is wide aligned, treat child Image blocks as aligned too.
// If the gallery is wide or full aligned, treat child Image blocks as aligned too.
$gallery_alignment = $block['attrs']['align'] ?? '';
$context['is_parent_aligned'] = 'wide' === $gallery_alignment;
$context['is_parent_aligned'] = in_array( $gallery_alignment, array( 'wide', 'full' ), true );
}

// Special handling for images inside galleries, as they have a different layout calculation that depends on the number of columns.
Expand Down
159 changes: 159 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 @@ -1569,6 +1569,42 @@ public static function data_gallery_block_with_automatic_columns_set(): array {
9,
'sizes="(max-width: 426px) 100vw, 426px" ',
),

/*
* A full aligned gallery with a single image spans the whole viewport,
* so the image covers '100vw'. Once the gallery has more than one column
* the image no longer spans the viewport and the default sizes are used.
*/
'Full gallery alignment, Default image alignment, 1 image (1 column)' => array(
'full',
'',
1,
'sizes="100vw" ',
),
'Full gallery alignment, Default image alignment, 2 images (2 columns)' => array(
'full',
'',
2,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
),
'Full gallery alignment, Default image alignment, 3 images (3 columns)' => array(
'full',
'',
3,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
),
'Full gallery alignment, Default image alignment, 6 images (maxes out column constraints)' => array(
'full',
'',
6,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
),
Comment thread
mukeshpanchal27 marked this conversation as resolved.
'Full gallery alignment, Default image alignment, 9 images (maxes out column constraints)' => array(
'full',
'',
9,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
),
);
}

Expand Down Expand Up @@ -2111,7 +2147,130 @@ public static function data_gallery_block_with_columns_set(): array {
'sizes="(max-width: 213px) 100vw, 213px" ',
'sizes="(max-width: 426px) 100vw, 426px" ',
),

/*
* Full aligned galleries. Only a single column spans the whole viewport,
* every other column count falls back to the default sizes, including the
* images in an incomplete last row.
*/
'Full gallery alignment, Default image alignment, 1 image (1 column)' => array(
'full',
'',
1,
1,
'sizes="100vw" ',
),
'Full gallery alignment, Default image alignment, 3 images (1 column)' => array(
'full',
'',
3,
1,
'sizes="100vw" ',
),
'Full gallery alignment, Default image alignment, 3 images (2 columns; incomplete last row with remainder=1)' => array(
'full',
'',
3,
2,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
'sizes="100vw" ',
),
'Full gallery alignment, Default image alignment, 4 images (2 columns)' => array(
'full',
'',
4,
2,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
),
'Full gallery alignment, Default image alignment, 5 images (3 columns)' => array(
'full',
'',
5,
3,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
),
'Full gallery alignment, Default image alignment, 15 images (6 columns)' => array(
'full',
'',
15,
6,
'sizes="(max-width: 1024px) 100vw, 1024px" ',
),
);
}

/**
* Test that a Gallery block only marks its child Image blocks as aligned for
* the alignments that actually break out of the content width.
*
* @dataProvider data_gallery_is_parent_aligned_context
*
* @cover ::auto_sizes_filter_render_block_context
*
* @param string $gallery_alignment Gallery block alignment.
* @param bool $expected Expected 'is_parent_aligned' context value.
*/
public function test_gallery_is_parent_aligned_context( string $gallery_alignment, bool $expected ): void {
$block = array(
'blockName' => 'core/gallery',
'attrs' => '' !== $gallery_alignment ? array( 'align' => $gallery_alignment ) : array(),
'innerBlocks' => array(),
);

$context = auto_sizes_filter_render_block_context( array(), $block, null );

$this->assertArrayHasKey( 'is_parent_aligned', $context );
$this->assertSame( $expected, $context['is_parent_aligned'] );
}

/**
* Data provider for testing the 'is_parent_aligned' gallery context.
*
* @return array<string, array{0: string, 1: bool}> Arguments passed to the test method.
*/
public static function data_gallery_is_parent_aligned_context(): array {
return array(
'wide alignment' => array( 'wide', true ),
'full alignment' => array( 'full', true ),
'no alignment' => array( '', false ),
'left alignment' => array( 'left', false ),
'right alignment' => array( 'right', false ),
'center alignment' => array( 'center', false ),
);
}

/**
* Test that a non gallery block never receives the 'is_parent_aligned' context,
* even when it is full aligned.
*
* @cover ::auto_sizes_filter_render_block_context
*/
public function test_non_gallery_block_does_not_receive_is_parent_aligned_context(): void {
$block = array(
'blockName' => 'core/group',
'attrs' => array( 'align' => 'full' ),
'innerBlocks' => array(),
);

$context = auto_sizes_filter_render_block_context( array(), $block, null );

$this->assertArrayNotHasKey( 'is_parent_aligned', $context );
}

/**
* Test that the Image block declares the context keys the gallery alignment
* handling depends on.
*
* @cover ::auto_sizes_filter_uses_context
*/
public function test_image_block_uses_is_parent_aligned_context(): void {
$block_type = new WP_Block_Type( 'core/image' );

$uses_context = auto_sizes_filter_uses_context( array(), $block_type );

$this->assertContains( 'is_parent_aligned', $uses_context );
$this->assertContains( 'max_alignment', $uses_context );
$this->assertContains( 'container_relative_width', $uses_context );
}

/**
Expand Down
Loading