Update the template creation modal #32427
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
jameskoster
added
Needs Design Feedback
|
Size Change: +238 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
|
Nice improvements. Personally I'm not a big fan of the two columns layout though. Also, should we do the same about the "template part creation modal" and reusable block as well? |
|
Agreed with Riad, these are nice improvements, but it's also a little much:
We don't use the gray background for the tips anywhere else, the two columns means the left tip box and the content on the right doesn't really align in any meaningful way, and the added border at the bottom adds unnecessary separation. In other modals I've tried to remove text and borders to reduce as much as possible, here's a mockup of the modal list view:
The point of removing all those borders and colors is to let what remain be that much more impactful. In this case, I really do appreciate the added help text and verbiage — it's definitely appropriate to add it. Is it possible to reduce this to a single paragraph of combined tip and help text? |
|
I don't think that combining makes sense, as each message describes a different thing. Here's the initial version I worked on, perhaps this is better? Edit: Fewer borders helps:
Yes, probably :) |
|
The balance is still off, and fundamentally I think there's just too much text. Is there any other context in which the tip can be shown? Should it just be in the panel itself? |
Please feel free to suggest refinements, copy is not my strongest suit. Maybe we can use the placeholder on the input to simplify?
For the best chance of users understanding, it should be as close to the template creation moment as possible. It's also worth noting that the Tip is essentially a placeholder until we support both custom (generic) and specific templates. At some point it will be replaced with a toggle that explains both options. So for now it can perhaps just go where that toggle will appear?
It doesn't help that the Tip and the Helper Text are different sizes 🙈 The continuation feels strange to me as well. I appreciate the desire to reduce visual noise overall, but not at the cost of usability. To my eye this works much better:
|
|
How about this:
Happy to push the changes if you dig. |
|
Thanks for taking a closer look :) The first sentence is a definite improvement! But the second one feels semantically incorrect to me. The helper text should provide context for the name input... the custom nature of the template isn't related to the name at all? Maybe I'm splitting hairs here... :D |
|
I think it's perfect as help-text — help text is like the proto tip. And in this case, I feel like the second sentence is providing context for the first sentence: why should I name this template "Full Width"? Oh I see, because I can apply it to any post or page. More importantly, the reduction and combination of the text, I believe makes it that much more likely that someone will actually read it. |
|
But what happens if the template is not custom? It would be weird for the text to dynamically update? I suppose we can cross that bridge when we get there... push it! :D |
But at the moment it always will be, right?
Right, I think this is one of those cases. I just have this feeling that once the added UI of custom plus bundled templates will need to be addressed, we will have a different set of ingredients to piece together, surfacing different solutions. Call it optimism :D Thanks, I'll push it. |
carolinan
approved these changes
Jun 12, 2021
|
Let's land this as a small improvement! |
youknowriad
added
Backport to WP 6.7 Beta/RC
youknowriad
pushed a commit
that referenced
this pull request
Jun 14, 2021
* Update copy and styling * Formatting * Two column layout * formatting * Polish. Co-authored-by: jasmussen <[email protected]>
youknowriad
pushed a commit
that referenced
this pull request
Jun 14, 2021
* Update copy and styling * Formatting * Two column layout * formatting * Polish. Co-authored-by: jasmussen <[email protected]>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. git-svn-id: https://develop.svn.wordpress.org/trunk@51149 602fd350-edb4-49c9-b593-d223f7449a82
nylen
pushed a commit
to nylen/wordpress-develop-svn
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. git-svn-id: https://develop.svn.wordpress.org/trunk@51149 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: http://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott
pushed a commit
to gMagicScott/core.wordpress-mirror
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: https://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd
F-Wilke
pushed a commit
to FiliagoDev/WordPress
that referenced
this pull request
Jul 31, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: http://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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.
Based on designs in #31591 this PR updates the template creation modal to make it a little more user-friendly by:
Here's before:
new.template.before.mp4
And after:
new-template.mp4