Summary
In the Posts Block grid layout, featured images can render at different visible dimensions within the same row even when their source files have identical dimensions. Images in a configured row are expected to occupy equal card widths and display consistently. Instead, card content such as title length can affect the column width, causing the images to appear uneven and producing a visibly inconsistent post grid.
Customer context
- Product / area: Otter Blocks, Posts Block grid layout
- Version: Not provided; the affected rule remains present in release tag
v3.2.6
- Environment: WordPress.org user; WordPress version and theme are unknown
- Integration / third party: None reported
- Reported error / symptom: Images sourced from 1280 x 720 files display at varying sizes in one row, apparently correlated with title length
- Impact: The post grid has inconsistent image dimensions and visual alignment
Reproduction notes
- Add an Otter Posts Block using the grid layout with multiple posts in one row.
- Give those posts featured images with identical 1280 x 720 source dimensions.
- Use titles with different lengths or intrinsic widths.
- View the frontend and compare displayed image dimensions within the row.
The customer reports unequal sizes under these conditions. A live runtime reproduction was not performed, but the current stylesheet and generated card markup expose the reported content-dependent sizing path. Exact theme, block settings, and viewport details are missing.
Diagnosis
Conclusion
The defect is confirmed by source inspection. The Posts Block grid defines each column as an auto track, whose size can be influenced by card content, while the featured image scales to the available card width. This permits different title content to produce unequal card and image widths despite identical source-image dimensions. No exact matching open GitHub issue was found in the inspected issue searches.
Git history identifies this as a regression: commit d3ebf2294 (Finish Inspector) replaced the earlier flex layout's explicit equal-width cards with content-sized grid tracks. The prior v2.0.14 source assigned fixed percentages per column count, while v2.1.0 and current release v3.2.6 contain the auto track rules.
Where this likely occurs
- Posts Block frontend grid:
src/blocks/blocks/posts/style.scss — .is-grid.o-posts-grid-columns-* lines 141–168 defines two through five columns with repeated auto tracks.
- Featured-image sizing:
src/blocks/blocks/posts/style.scss — .o-posts-grid-post-image lines 212–234 scales the anchor and image using --img-width, max-width: 100%, and automatic height, tying visible dimensions to the card track width.
- Server-rendered card structure:
inc/render/class-posts-grid-block.php — Posts_Grid_Block::render() lines 67–109 emits each image and title in the same grid item; lines 118–139 apply the grid and column-count classes.
- Title output:
inc/render/class-posts-grid-block.php — Posts_Grid_Block::get_post_fields() lines 153–172 places variable title content inside each card.
- Release history: commit
d3ebf2294, first present in tag v2.1.0; the affected selectors remain in tag v3.2.6.
Engineering notes
The inspected path is the standard non-tiled Posts Block grid. Image files with the same aspect ratio remain subject to different displayed dimensions because each image fills its own content-sized track. The optional image-ratio attribute affects image proportions but does not establish equal grid-track widths. Theme or site CSS could further affect a particular page, but the product stylesheet independently permits the reported result. Responsive rules and the list/tiled layouts use related markup but were not reported as affected.
Test coverage status
tests/test-post-grid-block.php includes server-render and title-markup assertions, but it does not verify card or image dimensions. src/blocks/test/e2e/blocks/posts.spec.js covers the Posts Block data store and does not exercise frontend visual layout. No relevant visual-layout coverage was found during inspection.
What to verify or explore next
- Reproduce on a clean WordPress installation with
v3.2.6, a multi-column Posts Block, equal-dimension featured images, and titles with different intrinsic widths.
- Compare computed grid-track and image dimensions with the default theme and at desktop, tablet, and mobile breakpoints.
- Exercise two through five columns and the optional image-ratio setting.
- Run the Posts Block Playwright suite in
src/blocks/test/e2e/blocks/posts.spec.js after adding a visual or computed-dimension regression case.
Unknowns / follow-up
The ticket does not provide the Otter version, WordPress version, theme, exact column count, image-ratio setting, or block width. The customer page was not inspected under the evidence-boundary rules.
Confidence
Confidence: 94/100
The current released source uses content-sized grid tracks while featured images scale to each track, and git history shows this replaced explicit equal-width columns. That combination directly supports the reported title-dependent image-size variation; no matching open issue was found.
Source: HelpScout #3461604562
Generated by bug-report-triage (ID: bug-report-triage_6ab53b12742cc6.45387618)
Summary
In the Posts Block grid layout, featured images can render at different visible dimensions within the same row even when their source files have identical dimensions. Images in a configured row are expected to occupy equal card widths and display consistently. Instead, card content such as title length can affect the column width, causing the images to appear uneven and producing a visibly inconsistent post grid.
Customer context
v3.2.6Reproduction notes
The customer reports unequal sizes under these conditions. A live runtime reproduction was not performed, but the current stylesheet and generated card markup expose the reported content-dependent sizing path. Exact theme, block settings, and viewport details are missing.
Diagnosis
Conclusion
The defect is confirmed by source inspection. The Posts Block grid defines each column as an
autotrack, whose size can be influenced by card content, while the featured image scales to the available card width. This permits different title content to produce unequal card and image widths despite identical source-image dimensions. No exact matching open GitHub issue was found in the inspected issue searches.Git history identifies this as a regression: commit
d3ebf2294(Finish Inspector) replaced the earlier flex layout's explicit equal-width cards with content-sized grid tracks. The priorv2.0.14source assigned fixed percentages per column count, whilev2.1.0and current releasev3.2.6contain theautotrack rules.Where this likely occurs
src/blocks/blocks/posts/style.scss—.is-grid.o-posts-grid-columns-*lines 141–168 defines two through five columns with repeatedautotracks.src/blocks/blocks/posts/style.scss—.o-posts-grid-post-imagelines 212–234 scales the anchor and image using--img-width,max-width: 100%, and automatic height, tying visible dimensions to the card track width.inc/render/class-posts-grid-block.php—Posts_Grid_Block::render()lines 67–109 emits each image and title in the same grid item; lines 118–139 apply the grid and column-count classes.inc/render/class-posts-grid-block.php—Posts_Grid_Block::get_post_fields()lines 153–172 places variable title content inside each card.d3ebf2294, first present in tagv2.1.0; the affected selectors remain in tagv3.2.6.Engineering notes
The inspected path is the standard non-tiled Posts Block grid. Image files with the same aspect ratio remain subject to different displayed dimensions because each image fills its own content-sized track. The optional image-ratio attribute affects image proportions but does not establish equal grid-track widths. Theme or site CSS could further affect a particular page, but the product stylesheet independently permits the reported result. Responsive rules and the list/tiled layouts use related markup but were not reported as affected.
Test coverage status
tests/test-post-grid-block.phpincludes server-render and title-markup assertions, but it does not verify card or image dimensions.src/blocks/test/e2e/blocks/posts.spec.jscovers the Posts Block data store and does not exercise frontend visual layout. No relevant visual-layout coverage was found during inspection.What to verify or explore next
v3.2.6, a multi-column Posts Block, equal-dimension featured images, and titles with different intrinsic widths.src/blocks/test/e2e/blocks/posts.spec.jsafter adding a visual or computed-dimension regression case.Unknowns / follow-up
The ticket does not provide the Otter version, WordPress version, theme, exact column count, image-ratio setting, or block width. The customer page was not inspected under the evidence-boundary rules.
Confidence
Confidence: 94/100
The current released source uses content-sized grid tracks while featured images scale to each track, and git history shows this replaced explicit equal-width columns. That combination directly supports the reported title-dependent image-size variation; no matching open issue was found.
Source: HelpScout #3461604562
Generated by bug-report-triage (ID: bug-report-triage_6ab53b12742cc6.45387618)