Polish zoom out inserter #66110
Merged
Polish zoom out inserter #66110
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
stokesman
added
[Type] Enhancement
|
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 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. |
|
Size Change: +41 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
stokesman
commented
Oct 15, 2024
Comment on lines
-104
to
-105
| as="button" | ||
| layout={ ! isReducedMotion } |
There was a problem hiding this comment.
I can’t see why this is currently a button since it doesn’t have interactivity. Besides that if it’s a button I don’t think it should contain a div.
The layout prop doesn’t do anything in this context.
There was a problem hiding this comment.
Yes we've lost this context. We envisaged that when activated (via keyboard or mouse) focus would transfer to the "Search" of the Patterns Inserter. So this is why they were buttons.
I tried that but realised the approach was off so had to revert in #64748.
Given we're at RC for 6.7, I'm not sure we're going to land that feature unless it qualifies as an a11y bug fix. Maybe @jeryj can advise?
getdave
reviewed
Oct 15, 2024
There was a problem hiding this comment.
Thanks for following up with this polish 👍
I'd like a confidence check from @jasmussen on the visual changes here. Code wise it seems good and the UX was solid for me.
Thanks again.
Comment on lines
+414
to
+415
| // Maintains an absolute font-size by counter-scaling based on the zoom level. | ||
| font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale)); |
There was a problem hiding this comment.
@jasmussen specifically want this to match the default editor font size but scaled for Zoom Out. From what I can see in testing this PR the font size continues to visually match but it would be good to get a confirmation from him.
There was a problem hiding this comment.
For further context, the goal here isn't so much to match the editor font size, as it is to resemble user interface rather than an element that could be part of the theme itself. I realize that requires some careful math. Ideally the same font, size, appearance applies to this message, as would apply to any other "Drag files here" message.
Comment on lines
-104
to
-105
| as="button" | ||
| layout={ ! isReducedMotion } |
There was a problem hiding this comment.
Yes we've lost this context. We envisaged that when activated (via keyboard or mouse) focus would transfer to the "Search" of the Patterns Inserter. So this is why they were buttons.
I tried that but realised the approach was off so had to revert in #64748.
Given we're at RC for 6.7, I'm not sure we're going to land that feature unless it qualifies as an a11y bug fix. Maybe @jeryj can advise?
| animate={ { height: '120px' } } | ||
| animate={ { | ||
| // Use a height equal to that of the zoom out frame size. | ||
| height: 'calc(1 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)', |
There was a problem hiding this comment.
The result seems to be that these drop zones have become smaller. The scale may be correct but I'd recommend a design confidence check from @jasmussen.
| exit={ { height: 0 } } | ||
| transition={ { | ||
| type: 'tween', | ||
| duration: 0.2, | ||
| duration: isReducedMotion ? 0 : 0.2, |
| @@ -124,10 +125,11 @@ export function ZoomOutSeparator( { | |||
| <motion.div | |||
| initial={ { opacity: 0 } } | |||
| animate={ { opacity: 1 } } | |||
| exit={ { opacity: 0 } } | |||
| exit={ { opacity: 0, transition: { delay: -0.125 } } } | |||
There was a problem hiding this comment.
Nit: we should consider a comment here to explain why the delay is necessary without the developer having to go and look up a lot of history to understand.
| duration: 0.1, | ||
| delay: 0.125, |
There was a problem hiding this comment.
Nit: we should consider a comment here to explain why the delay is necessary without the developer having to go and look up a lot of history to understand.
getdave
added
the
Backport to WP 6.7 Beta/RC
Looks good enough. Here's the branch:
Here's trunk:
It's not clear the font size matches the 13px default UI font size (look at "Template" in the document title) in either, but that's less important and can always be tuned. The key is ensuring the font size isn't arbitrary, that it looks like block editor UI, and that it's legible. Thanks for the work! |
getdave
approved these changes
Oct 15, 2024
There was a problem hiding this comment.
Taking into account feedback from @jasmussen I'm happy we merge this.
Thanks for the improvement 👍
|
All drop zones (e.g. for media) and markers (e.g. the line when inserting a block) are blue. This one is grey. |
No, it wasn't tried. We can try it but let's merge this and iterate. |
getdave
added
[Type] Regression
|
I changed the labelling here to correctly reflect the fact that this PR fixed bugs in the implementation of Zoomed Out introduced during this cycle. |
github-actions
bot
removed
the
Backport to WP 6.7 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Oct 15, 2024
* Hide overflow; add delay to prompt; revise font scale * Tweak prompt text transition
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 69e6747 |
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
* Hide overflow; add delay to prompt; revise font scale * Tweak prompt text transition
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?
Polishing or fixing some details of the zoom out inserter and its animation. Some of the changes seem like easy wins and others not too difficult to decide upon.
Why?
A few things seem off or worth trying to do better:
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Before
Watch for the overflowing prompt text at the start of the enter animations:
zoom-out-separator-animation-trunk.mp4
After
zoom-out-separator-animation-revised.mp4