Site Editor: Move "Add Template"'s descriptions to tooltips #48710
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
kevin940726
added
[Type] Enhancement
|
Size Change: -8 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
kevin940726
commented
Mar 3, 2023
| @@ -181,55 +187,68 @@ export default function NewTemplate( { | |||
| { isCreatingTemplate && ( | |||
| <TemplateActionsLoadingScreen /> | |||
| ) } | |||
| <NavigableMenu className="edit-site-new-template-dropdown__popover"> | |||
There was a problem hiding this comment.
<NavigableMenu> doesn't seem to be needed since <DropdownMenu> already renders it under the hood.
kevin940726
requested review from
glendaviesnz,
jameskoster,
talldan and
aaronrobertshaw
aaronrobertshaw
approved these changes
Mar 3, 2023
There was a problem hiding this comment.
Nice work @kevin940726 👍
The tooltips are displaying nicely for me both via mouse and keyboard navigation.
While the need for the visually hidden description is unfortunate, it seems like a reasonable compromise in the short term.
Would it be worth adding a todo item on the Tooltip refactor issue to clean up uses of VisuallyHidden such as the one introduced in this PR?
Yeah, nice suggestion! I'll leave a comment once this PR is merged. Pining @jameskoster for a design review now that the code seems to be approved. |
|
Thanks for working on this :) Could we add a max-width to avoid illegible tooltips?
|
|
I noticed the 'Add new' button on the manage templates view is misplaced on this PR:
I'm not seeing this on trunk 🤔 |
Unfortunately, the
Nice catch! Should be fixed now. |
|
That's a shame about the hacks, but it seems to be necessary here. Hopefully this is a temporary thing and we can revise the add-template flow holistically for 6.3. For testing purposes, here's the longest proposed description:
It might be worth double checking with that to stress-test the solution. If we can get away with making the max-width a little narrower, that might be good. 320px seems to work well in terms of readability. |
|
This is what it looks like currently (
And here's the
Feel free to push to the branch and experiment with different width settings! |
|
Flaky tests detected in 0c57f20. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4331163976
|
|
Oof we'll definitely need a better solution beyond 6.2 🙈 Proper spacing between paragraphs might help a little. The 320 version feels slightly easier to read to me, but it's not a strong opinion. I suppose we can easily tweak that in a follow-up if necessary. |
jameskoster
approved these changes
Mar 3, 2023
Mamaduka
added
the
Backport to WP 6.7 Beta/RC
|
I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: 9afa204 |
Mamaduka
pushed a commit
that referenced
this pull request
Mar 9, 2023
* Move template description to tooltip * Add VisuallyHidden * Fix styling and allow long description * Use 320px
Mamaduka
removed
the
Backport to WP 6.7 Beta/RC
23 tasks
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?
Close #48589. Move the descriptions inside the "Add template" popover to tooltips.
Why?
See #48589. This is meant to be the first iteration for 6.2 until we find a better alternative.
How?
Using
<Tooltip>component to wrap the menu item. Note that this component currently is not accessible, ongoing work is tracked in #48222. In the meantime, I'm using<VisuallyHidden>to keep it accessible as the original to screen readers in a less ideal way.Testing Instructions
Testing Instructions for Keyboard
/wp-admin/site-editor.php?canvas=view&path=%2Fwp_template&postType=wp_templateScreenshots or screencast