Update the layout of the title in the top bar while template editing #27845
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: +121 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
|
I think the "Template" will be unnecessary once the context is more established. Could we skip it for now and introduce it later if necessary? |
|
Yup we can visually hide that for now, which gives the labels a little more room to breathe as well. |
|
My feedback was going to be similar to @mtias. Further, I'm curious if at narrow width it could make sense to collapse the entire template title/breadcrumb into a template icon and have the title and other information expand from it sort of the way the document info works now? |
|
Oh yeah, I already implemented that change, here's how it looks now:
It's possible of course but I'm not sure it's worth it. I see this label as a way to quickly identify what you're editing at a high level. Hiding it behind a click reduces efficiency there. Since most templates have fairly short names, I don't think space is a huge concern. What was your reasoning for that suggestion @rickybanister? |
|
I agree, sorry, I only meant that collapsing it could free up space in the mobile view or at narrow breakpoints. If there is space I don't think there's any value in hiding it. |
There was a problem hiding this comment.
This seems very similar visually to the old double-dropdown that was replaced when we implemented @shaunandrews design that is currently in use (with the vertical division). Im not married to either format but I do have a few critiques about this implementation.
1 - In the old format, the template name is Bold and the dropdown icon is next to the template name. Both of these things work together to make it clear that the dropdown corresponds to the template.
Now, both the template and template part names are the same font weight and the dropdown button is to the right of the template part. This makes it much less clear that the dropdown corresponds to the template as opposed to the template part.
2 - The vertical format is much more friendly for fitting in the top bar when the screen width is limited.
3 - A nitpick on updating the animations. In our old format when a template part is selected both the template and template part names slide up, when unselected the template name slides down:
Currently with this approach the animation is not as smooth. The template name "jumps" position when a template part is selected/unselected as there is no animation for it:
|
I believe the animation helps make it clear that the dropdown is still associated with the overall template, seeing as the part name is injected between the chevron and the template label. We could lighten the template part name a bit so that the chevron and template match, which might help?
Space isn't a huge concern since the all core template names (archive, single, page, home, 404, search, tag, date, author, etc) are fairly short and fit comfortably even on small screens. Any contributions to improve the animation code would be most welcome! |
|
I pushed some tweaks to the design and transition for the template part.
Feel free to revert or adjust as needed. |
shaunandrews
approved these changes
Jan 11, 2021
|
This works well for me. Probably something to explore later, but I wonder if we could somehow tie in some color or iconography inline with other efforts to distinguish template parts. |
Wooo 🎉 - This looks fantastic and animates smoothly. This looks and feels great! |
Addison-Stavlo
approved these changes
Jan 12, 2021
|
Nice :) |
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.
While editing a template in the Site Editor you currently see this in the top bar (when a template part is selected):
The spacing is a little off, and the columnar layout is inconsistent with all other text in the top bar, creating an awkward vertical rhythm.
This PR arranges the content in to a single line, and adds a prefix which helps clarify what is being editing.
I believe the prefix is useful because once custom templates (#27778) arrive, it may not always be obvious whether one is editing content or template, especially as the canvas may appear identically in both contexts.
The slash glyph (
/) is a recognisable indicator for hierarchy, and helps outline the relationship between template and template part.The main drawback with this approach is how everything collapses down on smaller screens. If both the selected template and template part happen to have very long names, they get truncated:
For all the most common template names (index, post, archive, search, 404, header, footer, sidebar, etc) this doesn't seem to be an issue.