WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.56k stars 4.22k forks source link

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

Open daviedR opened 10 months ago

daviedR commented 10 months ago

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:

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 searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

github-actions[bot] commented 9 months ago

Hi, This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps. Thanks for helping out.