Gallery Block: Fix equal column gallery image sizes

[mukeshpanchal27]

Summary

Part of #2449

Relevant Technical Choices

Ensure that the number of images added matches the Gallery block's configured column count.

How to Test

1. Add a Gallery block.
2. Insert 3 images and make sure the Columns setting is set to 3.
3. Verify that the image sizes.
4. Repeat the test with 6 images while keeping the Columns setting at 3.
5. Verify that the image sizes.

Before

After

In follow-up PR will fix the sizes for other column settings.

• Add unit tests

Use of AI Tools

N/A

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.50%. Comparing base (726398d) to head (a4f79e2).
⚠️ Report is 1 commits behind head on feature/2449-gallery-block.

Additional details and impacted files

@@                      Coverage Diff                       @@
##           feature/2449-gallery-block    #2534      +/-   ##
==============================================================
+ Coverage                       70.38%   70.50%   +0.12%     
==============================================================
  Files                              91       91              
  Lines                            7850     7882      +32     
==============================================================
+ Hits                             5525     5557      +32     
  Misses                           2325     2325              

Flag	Coverage Δ
multisite	70.50% <100.00%> (+0.12%)	⬆️
single	35.85% <100.00%> (+0.26%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mukeshpanchal27]

@westonruter I'd appreciate any initial feedback you can provide on the PR when you have a chance to take a look.

[adamsilverstein]

pr makes sense to me, it would be good to add some tests that demonstrate what it achieves.

[westonruter]

@mukeshpanchal27 How does this handle the responsive layout? If I add a Gallery with three columns I have this on desktop:

But on mobile it becomes 2 columns, and the third image is twice as wide as the first two:

There would seem to need to be some logic add this breakpoint in sizes, where if there is an odd number of images, the last one would get a 100vw width.

[mukeshpanchal27]

@westonruter In 46bfea1 i set two column layout for mobile explicitly.

In follow-up PR will fix issue for different columns.

[westonruter]

We can't rely on wp_is_mobile(), unfortunately. Page caching may not vary responses by device form factor. We'll need a solution that serves the same markup to all devices (the promise of responsive design).

[mukeshpanchal27]

Can we tackle that in a follow-up PR?

On mobile/responsive layouts with screen widths below 600px, it currently becomes a two-column layout. Since that appears to be a separate issue, I think it would be better to address it in a dedicated follow-up PR.

[westonruter]

I don't think we can tackle in a follow-up, because this is a fundamental design decision or how this feature works. If we can't implement it using responsive design tools, then it won't be viable to ship.

[mukeshpanchal27]

Yes. Currently, I'm pushing all PRs to the feature/2449-gallery-block feature branch, where all related changes are being gathered.

Once all issues are resolved, we'll open a final PR to merge into trunk. So the release will not be published until all identified issues have been addressed.

[mukeshpanchal27]

It will be tackle in #2551

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mukeshpanchal27 <mukesh27@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

[westonruter]

Ensure that the number of images added matches the Gallery block's configured column count.

Is there a plan to deal with this? If I add 3 images to a gallery that has 2 columns:

All of the images have sizes="(max-width: 322px) 100vw, 322px". In reality, the last image should have sizes="(max-width: 645px) 100vw, 645px".

[westonruter]

Review of tests from Claude Opus 4.8:

The test name and data-provider name are misleading, and the primary feature is untested.

• test_gallery_block_with_explicitly_columns_set / data_gallery_block_with_explicitly_columns_set claim to test explicit columns, but get_gallery_block_markup() never sets a columns attribute — it only sets linkTo and align. So every case exercises the fallback branch (line 370–371, inner-block count capped at 3), and the explicit-columns branch (lines 361–362) — the actual headline feature — has zero coverage.
• A regression there would go unnoticed. The most valuable missing case: a gallery with columns set to a value that differs from the image count, e.g. columns=2 with 6 images should yield 310px, and columns=4 should exercise a value above the fallback cap of 3. Please add explicit-columns cases (and rename the test to match what it actually asserts, or split into two tests).
• The $ancestor_block_alignment / $image_block_alignment parameters are threaded through but only ever ''. Either drop them or add wide/full alignment cases (galleries can be aligned, and alignment interacts with container_relative_width).

Recommendation: Approve after addressing the test gap — add explicit-columns cases (including a value above the fallback cap and one differing from image count) and rename the misleading test. The redundant guards and style nit are optional cleanups.

[mukeshpanchal27]

I updated the test and data-provider name.

The $ancestor_block_alignment / $image_block_alignment parameters are threaded through but only ever ''. Either drop them or add wide/full alignment cases (galleries can be aligned, and alignment interacts with container_relative_width).

I will add tests in follow-up PR. As it needs some adjustments.

[westonruter]

Is there a plan to deal with this? If I add 3 images to a gallery that has 2 columns:

Oh, this is what #2543 is for?