Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Bug on `Fixed Width` setting on `Row` block's child blocks | GoodFirstPicks

Bug on `Fixed Width` setting on `Row` block's child blocks

WordPress/gutenberg 6 comments 1mo ago
View on GitHub
lowopenScope: clearSkill match: yesTest focusedWordPressJavaScriptReact

Why this is a good first issue

The issue requires adding a single CSS property to fix flexbox layout behavior.

AI Summary

The problem is that blocks with fixed width in a Row layout shrink when adjacent blocks have long content. The solution is to add `flex-shrink: 0` to fixed-width blocks. No major blockers exist as the fix is localized to CSS generation.

Issue Description

Description

When grouping 2 or more blocks into a Row block (horizontal flex layout), we can set the child blocks' width into 3 modes: Fit, Fill, and Fixed.

This issue occurred when the Row block has 2 child blocks:

  • 1st block is set to 300px Fixed width.
  • 2nd block is set to Fit or Fill, but the content inside this block is long so that it wraps into multiple lines.

This will cause the 1st block to shrink and not obey the 300px Fixed width setting. See the screenshot below:

image

This happens because the generated CSS for the 1st block with Fixed width setting is only flex-basis: 300px. Additional CSS flex-shrink: 0 is required to ensure the 1st block doesn't shrink.

Step-by-step reproduction instructions

  1. Create a new page and paste the code snippet below in the block editor.
  2. Publish and save the page.

Screenshots, screen recording, code snippet

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fixed","flexSize":"300px"}},"backgroundColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-background-color has-background">This block is set to 300px Fixed width.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"backgroundColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-background-color has-background">We have another block with very long content so that it wraps to the next line. And this will cause the first block to shrink and doesn't obey the 300px fixed width setting.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Environment info

Installed WordPress version: 6.4.2 This issue occurred with and without the Gutenberg plugin installed.

Please confirm that you have

GitHub Labels

[Type] Bug[Status] In Progress[Block] Group[Feature] Layout

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • CSS layout changes might have unexpected side effects
Loading labels...

Details

Points10 pts
Difficultylow
Scopeclear
Skill Matchyes
Test Focusedyes
AssigneeAdi-ty