-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Labels on new Height and Width dimension controls for children of Flex layout blocks can be confusing #46864
Comments
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! |
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. |
It's possible this could be discussed as a part of #42385 |
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 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:
|
Thanks for the feedback! This is a known issue, tracked in #53766. |
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
Screenshots, screen recording, code snippet
Environment info
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
The text was updated successfully, but these errors were encountered: