Labels on new Height and Width dimension controls for children of Flex layout blocks can be confusing

[ndiego]

Description

I was experimenting with the new Height and Width dimension controls that are added to children of Flex layout blocks (#45364). The functionality works great, but I worry a bit about the usage of the "Height" and "Width" labels. These controls do not actually set height and width, but rather flex-basis and other layout options.

"Height" and "Width" are more user-friendly terms, but it quickly breaks down if the block has it's own controls for actual height and width. Consider the screenshot of the Image block below. There are now multiple controls for "Width" in a Image block.

Given that the attribute is actually layout I would consider relabeling this control to "Layout". It isn't very descriptive, but it removes the ambiguity and this control is quite tricky anyway. You kind of need to know how Flex layout works to effectively use it.

Step-by-step reproduction instructions

1. Add an Image block to a Row block
2. Add the "Width" control to the dimensions panel.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.1+
• Gutenberg 14.8.4

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

[tellthemachines]

Thanks for opening this @ndiego ! This is an interesting one. In my first draft of #45364 I went with "size" for both width and height, but changed it based on feedback to that PR.

The intention ultimately is to only display one set of "width" or "height" controls for each block, switching them out depending on whether the block is inside a flex container or not, but that wasn't implemented as part of the initial PR because most blocks don't have width or height controls yet.

I'm happy to hear any other ideas folks may have about how to best approach this!

[ndiego]

Yeah, it's tricky, especially for blocks with their own width/height controls. Ideally, those controls would be in the dimensions panel as well, making it even harder 😅

Perhaps this is a temporary issue if the goal in the long term is to support true width and height in the dimensions panel. Then these Flex-related controls can be part of each corresponding panel "section". 🤔

I'll work on getting more eyeballs on this. Regardless, the functionality is fantastic and desperately needed. Coupling this with Min. Height allows you to do soooo many cool things.

[jordesign]

It's possible this could be discussed as a part of #42385

[Azragh]

Another problem in this context (which I've stumbled across multiple times now) is that the term "fixed width" is a little misleading. If the block is in a flex layout, the new property is flex-base, which doesn't behave as expected.

An example: On the desktop, the number on the left all have a "fixed width" of 3.5em (which should be much larger according to the specified font size of 3em):

And on mobile they still get squished / shrink depending on content size:

To get the desired result, I would have to replace the containers inline styles with:

.wp-container-content-20 {
    flex-shrink: 0;
    width: 100%;
    max-width: 1.75em;
}

[tellthemachines]

the term "fixed width" is a little misleading. If the block is in a flex layout, the new property is flex-base, which doesn't behave as expected.

Thanks for the feedback! This is a known issue, tracked in #53766.