Flex dimensions: Rename "Fill" to "Grow". #62779
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jasmussen
added
[Type] Enhancement
|
Size Change: +39 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
|
Nice! I think the label "Grow" works well here @jasmussen. Do we also need to update the preview text that shows under the button. I'm not set up to run this yet so I can't tell if the copy While we're at this. What do you think of updating "Fit" as well? The term fit isn't very clear. When I read it, it makes me think fit within the space. Taking inspiration from Figma and calling this Hug might work better. The corresponding descriptor in this case could read "Hug content". |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @nikkivias. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
t-hamano
reviewed
Jun 29, 2024
There was a problem hiding this comment.
I don't have a strong opinion on the label, but translators who see it may not know how to translate it into their own language. This word, at least in Japanese, is translated into various words depending on the context. The word "Grow" is more abstract than the word "Fill".
Therefore, these options may need context. For example:
<ToggleGroupControlOption
key="fit"
value="fit"
label={ _x( 'Fit', 'Block width in flex layout' ) }
/>
<ToggleGroupControlOption
key="fill"
value="fill"
label={ _x( 'Grow', 'Block width in flex layout' ) }
/>
<ToggleGroupControlOption
key="fixed"
value="fixed"
label={ _x( 'Fixed', 'Block width in flex layout' ) }
/>I am also concerned that the mismatch between the label and value might cause some problems. cc @tellthemachines
Label and value are independent so this shouldn't cause any problem. |
|
Regarding the label: In German, the term "Grow" typically describes a process rather than a static state. For a flex item, it might cause confusion as it implies an ongoing action rather than describing the end state of how it should look in the layout. "Fill" more intuitively conveys the idea of occupying available space and represents the end state more clearly. |
|
Good feedback, keep it coming and feel free to also suggest help text improvements.
Is there a different word for "Grow" in German that would work better here? In Danish there are a couple that could work, and if we can provide sufficient context for translators, perhaps a good term could be found? Perhaps even the existing one? Mainly, this feels like one of those aspects where the term deserves care for each language. |
|
The difference in meaning is this: "Wachsen" (grow) implies a natural, organic process of increasing in size over time, similar to how a plant grows. "Erweitern" (extend), on the other hand, suggests a deliberate action to increase in size or capacity, which is more appropriate for a flex item that adjusts to fill available space. Providing sufficient context for translators would be good, yes. |
|
I asked the chat GPT for help 😄 https://chatgpt.com/share/8db0b22f-b875-4c32-8fa5-ed1b61850bd0 They suggested the following English words, what do you think?
|
|
Thank you all for chiming in. I've grown quite fond of "Grow" for english, and I'm wondering, would it be able to have that term, but provide clear enough instructions for translators that for example German might translate it to "Erweitern"? |
|
I interpret Grow more as Hug, as in it grows as the elements it contains increase, and it happens incrementally. |
|
I suspect this is highly subjective, so a bit tricky to find definitive consensus. 'Fill' is slightly more intuitive to me, but that's probably personal bias due to years of Figma use: 
I appreciate that 'Grow' aligns more with the underlying css property... the arguments for change are solid. On that basis renaming seems fine, so long as there are no strong objections, and hints are provided for translators. |
I see, so should we decide to go with "Grow"? To ship this PR, I think we need to resolve the conflicts and add translation context. |
There's been enough user feedback that "fill" is confusing, so yes, I think it's worth trying "grow" and see if people find it more intuitive.
I'll take a stab in a minute! Thank you. |
jasmussen
force-pushed
the
update/rename-fill-to-grow
branch
from
05e7727
to
e3f2cbf
Compare
|
Tried to add very specific translation contexts. Thank you for the code samples. Let me know if this works for you. |
t-hamano
approved these changes
Jul 3, 2024
|
Cool, let's try this! And I'm here for followups. |
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
* Flex dimensions: Rename "Fill" to "Grow". * Add translation context.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Flex tools have a dimensions control that lets you choose between Fit, Fill and Fixed:
This PR renames "Fill" to "Grow":
Why?
Here's a menu-design use case, as an example:
In that GIF, a horizontal navigation menu featureing a site title, a menu, and a button is built. In this, the site title is set to "fill", so it pushes the navigation menu and the button to the right most side of the header, accomplishing the desire design. But it would easily be confused in this case, to suggest that "fill" should fill the available space, and not also imply pushing the other content rightwards. Whereas "Grow" does suggest filling the available space, but also implies pushing other contents aside.
Testing Instructions
Insert a row block with a couple of child blocks. View the inspetor for a child block, and see "Grow" instead of "Fill".