Fix: Moved `column_count` context from `column` block to `columns` block to ensure it is available to ancestor blocks #2138

mukeshpanchal27 · 2025-08-14T05:14:21Z

Summary

The columns block was not passing the column_count context to the column block, which caused the issue. This PR moves the column_count context to the columns block so it can be passed to its ancestor blocks.

Relevant technical choices

…mn block

codecov · 2025-08-14T05:32:19Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.21%. Comparing base (84002b1) to head (0573247).
⚠️ Report is 6 commits behind head on trunk.

Additional details and impacted files

@@           Coverage Diff           @@
##            trunk    #2138   +/-   ##
=======================================
  Coverage   68.21%   68.21%           
=======================================
  Files          93       93           
  Lines        7947     7947           
=======================================
  Hits         5421     5421           
  Misses       2526     2526

Flag	Coverage Δ
multisite	`68.21% <100.00%> (ø)`
single	`35.56% <100.00%> (ø)`

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

☔ View full report in Codecov by Sentry.
📢 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.

github-actions · 2025-08-14T05:32:43Z

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 <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: swissspidy <[email protected]>

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

mukeshpanchal27 · 2025-08-14T05:34:18Z

@felixarntz @joemcgill could you please take a look when you have moment!

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

westonruter · 2025-08-15T23:09:22Z

@mukeshpanchal27 What is the expected impact of this change?

I created a post with a Columns block as follows:

Post Content

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:image {"id":62,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/07/Juraparc_06-07-2013_-_Buffalo_calf-1024x678.jpg" alt="" class="wp-image-62"/><figcaption class="wp-element-caption">Buffalo calf</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:image {"id":10,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-1024x668.jpg" alt="" class="wp-image-10"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:image {"id":63,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg" alt="" class="wp-image-63"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

The rendered markup on the frontend is the same on trunk as it is when this PR's branch is checked out:

<div
  class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex"
>
  <div
    class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"
    style="flex-basis: 25%"
  >
    <figure class="wp-block-image size-large">
      <img
        fetchpriority="high"
        decoding="async"
        width="1024"
        height="678"
        sizes="(max-width: 161px) 100vw, 161px"
        src="http://localhost:8000/wp-content/uploads/2025/07/Juraparc_06-07-2013_-_Buffalo_calf-1024x678.jpg"
        alt=""
        class="wp-image-62"
        srcset="
          http://localhost:8000/wp-content/uploads/2025/07/Juraparc_06-07-2013_-_Buffalo_calf-1024x678.jpg  1024w,
          http://localhost:8000/wp-content/uploads/2025/07/Juraparc_06-07-2013_-_Buffalo_calf-300x199.jpg    300w,
          http://localhost:8000/wp-content/uploads/2025/07/Juraparc_06-07-2013_-_Buffalo_calf-768x509.jpg    768w,
          http://localhost:8000/wp-content/uploads/2025/07/Juraparc_06-07-2013_-_Buffalo_calf-1536x1017.jpg 1536w,
          http://localhost:8000/wp-content/uploads/2025/07/Juraparc_06-07-2013_-_Buffalo_calf-2048x1356.jpg 2048w
        "
      />
      <figcaption class="wp-element-caption">Buffalo calf</figcaption>
    </figure>
  </div>

  <div
    class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"
    style="flex-basis: 50%"
  >
    <figure class="wp-block-image size-large">
      <img
        decoding="async"
        width="1024"
        height="668"
        sizes="(max-width: 322px) 100vw, 322px"
        src="http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-1024x668.jpg"
        alt=""
        class="wp-image-10"
        srcset="
          http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-1024x668.jpg  1024w,
          http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-300x196.jpg    300w,
          http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-768x501.jpg    768w,
          http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-1536x1002.jpg 1536w,
          http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-2048x1336.jpg 2048w
        "
      />
    </figure>
  </div>

  <div
    class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"
    style="flex-basis: 25%"
  >
    <figure class="wp-block-image size-large">
      <img
        decoding="async"
        width="1024"
        height="741"
        sizes="(max-width: 161px) 100vw, 161px"
        src="http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg"
        alt=""
        class="wp-image-63"
        srcset="
          http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg  1024w,
          http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-300x217.jpg    300w,
          http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-768x556.jpg    768w,
          http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-1536x1112.jpg 1536w,
          http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-2048x1483.jpg 2048w
        "
      />
    </figure>
  </div>
</div>

mukeshpanchal27 · 2025-08-18T05:46:03Z

@mukeshpanchal27 What is the expected impact of this change?

@westonruter The intention of this change is to improve the accuracy of the sizes attribute when the Columns block uses equal column layouts (e.g. 50/50 or 33/33/33).

In those cases, the editor currently doesn’t add a width attribute in column elements. As a result, the responsive sizes calculation falls back to the overall block width instead of the actual column width which leads to oversized sizes values.

Example (current trunk): TT4 Theme

Layout	Generated sizes value
2 columns (50/50)	(max-width: 620px) 100vw, 620px
3 columns (33/33/33)	(max-width: 620px) 100vw, 620px

In both cases, it uses the columns default alignment width (620px), which is not correct in a multi-column layout.

With this change (current branch) we calculate the sizes value based on the column width instead of the columns block width: TT4 Theme

Layout	Generated sizes value
2 columns (50/50)	(max-width: 310px) 100vw, 310px
3 columns (33/33/33)	(max-width: 206px) 100vw, 206px

This results in more accurate image size selection and improves performance by avoiding unnecessarily large images.

In your use-case (25/50/25), the columns already have an explicit width in the markup, so the sizes calculation works correctly in both trunk and this branch. The change mainly targets equal-width layouts where the editor does not output an explicit column width.

westonruter · 2025-08-18T16:56:34Z

@mukeshpanchal27 Thank you. I can confirm in a Columns block with two columns of equal widths, there is indeed a change:

--- /tmp/before.html	2025-08-18 09:55:09
+++ /tmp/after.html	2025-08-18 09:55:23
@@ -10,7 +10,7 @@
         decoding="async"
         width="1024"
         height="668"
-        sizes="(max-width: 645px) 100vw, 645px"
+        sizes="(max-width: 322px) 100vw, 322px"
         src="http://localhost:8000/wp-content/uploads/2025/06/American_bison_k5680-1-1-1024x668.jpg"
         alt=""
         class="wp-image-10"
@@ -33,7 +33,7 @@
         decoding="async"
         width="1024"
         height="741"
-        sizes="(max-width: 645px) 100vw, 645px"
+        sizes="(max-width: 322px) 100vw, 322px"
         src="http://localhost:8000/wp-content/uploads/2025/07/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg"
         alt=""
         class="wp-image-63"

mukeshpanchal27 added 2 commits August 14, 2025 10:42

Unit test for two column layout

47df817

Unit test for three column layout

0ed443b

mukeshpanchal27 added this to the auto-sizes n.e.x.t milestone Aug 14, 2025

mukeshpanchal27 self-assigned this Aug 14, 2025

mukeshpanchal27 added [Type] Bug An existing feature is broken [Plugin] Enhanced Responsive Images Issues for the Enhanced Responsive Images plugin (formerly Auto Sizes) labels Aug 14, 2025

Set 'column_count' user context to columns block and remove from colu…

04b8107

…mn block

mukeshpanchal27 marked this pull request as ready for review August 14, 2025 05:32

mukeshpanchal27 requested a review from joemcgill as a code owner August 14, 2025 05:32

mukeshpanchal27 requested a review from felixarntz August 14, 2025 05:33

mukeshpanchal27 changed the title ~~Accurate Sizes: The calculation of sizes attribute ignores column layout for default two/three-column~~ Fix: Moved column_count context from column block to columns block to ensure it is available to ancestor blocks Aug 14, 2025

westonruter reviewed Aug 14, 2025

View reviewed changes

plugins/auto-sizes/tests/test-improve-calculate-sizes.php Show resolved Hide resolved

mukeshpanchal27 and others added 2 commits August 18, 2025 09:58

Merge branch 'trunk' into fix/2137-default-column

6fb2cf2

Add cover annotation

0573247

mukeshpanchal27 requested a review from swissspidy August 18, 2025 05:46

swissspidy approved these changes Aug 18, 2025

View reviewed changes

westonruter approved these changes Aug 18, 2025

View reviewed changes

mukeshpanchal27 merged commit 1fc81a3 into trunk Aug 19, 2025
21 checks passed

mukeshpanchal27 deleted the fix/2137-default-column branch August 19, 2025 03:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix: Moved `column_count` context from `column` block to `columns` block to ensure it is available to ancestor blocks #2138

Fix: Moved `column_count` context from `column` block to `columns` block to ensure it is available to ancestor blocks #2138

Uh oh!

mukeshpanchal27 commented Aug 14, 2025 •

edited

Loading

Uh oh!

codecov bot commented Aug 14, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 14, 2025 •

edited

Loading

Uh oh!

mukeshpanchal27 commented Aug 14, 2025

Uh oh!

Uh oh!

westonruter commented Aug 15, 2025

Uh oh!

mukeshpanchal27 commented Aug 18, 2025 •

edited

Loading

Uh oh!

westonruter commented Aug 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix: Moved column_count context from column block to columns block to ensure it is available to ancestor blocks #2138

Fix: Moved column_count context from column block to columns block to ensure it is available to ancestor blocks #2138

Uh oh!

Conversation

mukeshpanchal27 commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Relevant technical choices

Uh oh!

codecov bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mukeshpanchal27 commented Aug 14, 2025

Uh oh!

Uh oh!

westonruter commented Aug 15, 2025

Uh oh!

mukeshpanchal27 commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

westonruter commented Aug 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix: Moved `column_count` context from `column` block to `columns` block to ensure it is available to ancestor blocks #2138

Fix: Moved `column_count` context from `column` block to `columns` block to ensure it is available to ancestor blocks #2138

mukeshpanchal27 commented Aug 14, 2025 •

edited

Loading

codecov bot commented Aug 14, 2025 •

edited

Loading

github-actions bot commented Aug 14, 2025 •

edited

Loading

mukeshpanchal27 commented Aug 18, 2025 •

edited

Loading