Content width toggle: Polish wording and appearance #43702
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
|
Size Change: +2.57 kB (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
|
I still think the "Constrain inner blocks" is a confusing text. To a non developer user not familiar with the technical layout types, the feature that this setting toggles on and off is the wide and full width settings. I think that should be reflected in the label. Perhaps "Width of inner blocks" is also accurate, and easier? "Custom width of inner blocks" ? |
|
Thank you for looking. Custom width sounds good: |
|
I'm not sure that 'Custom' is the correct language here. It doesn't feel quite right to me anyway. In the screenshot above, the values from global styles are applied because the 'content' and 'wide' inputs are left empty. This is a legitimate configuration that doesn't feel custom at all, in fact you can probably make an argument for it to be the 'default' (opposite of custom 😅). It only becomes 'custom' if you insert new values into those inputs. Side note; this is yet another example where controls not reflecting values from global styles is very confusing (#34178). The inputs appear empty, but the canvas clearly shows that values are being used from somewhere. Perhaps the problem here is that there are actually three options, while the toggle can only really communicate two of them.
Maybe it would help to think about different ways to present these options? 🤔 |
|
But you can't insert custom values when the option is toggled off. |
|
Yup, it may be that 'custom' is a sub-option that appears when you elect to use layout values from global styles. Similar to how we use the settings icon to enable custom values in other design tool controls like font size:
Another thing worth considering here imo is how strange it feels to apply 'content' width to a container that you're using for layout while template building. It seems very out of context. These controls have had quite a few tweaks since their inception, and none of them have felt totally right. I think it's important to settle on something a bit more sustainable before making any more band-aid changes. |
|
Agree with all of that. More urgently I just want the label to not wrap, and the helptext prop to be used 😅 |
|
Hah. Well in that case I think we should leave the toggle label as close to its current wording as possible. It's clearly not perfect, but changing things again, only to do the same later feels like it might harm the UX?
This fits? Alternatively we could just leave it for now and dedicate this PR to the helptext. The label is inevitably going to wrap in some languages anyway. No strong opinions :) |
|
Updated: |
jameskoster
approved these changes
Sep 1, 2022
|
Thank you for updating this! I just noticed it was looking much nicer in the editor today ✨ |
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?
The recent changes to the Layout content width toggle has the toggle label wrap on two lines, and has too much space above the help text:
This PR rephrases it slightly, and changes the help text to use the component prop:
Testing Instructions
Test selecting a group block and toggling the inspector layout control.