Skip to content

Commit

Permalink
Polish zoom out inserter (#66110)
Browse files Browse the repository at this point in the history
* Hide overflow; add delay to prompt; revise font scale

* Tweak prompt text transition
  • Loading branch information
stokesman authored Oct 15, 2024
1 parent ec71b32 commit d32b15d
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 8 deletions.
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/block-list/content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -404,14 +404,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: $default-font-size;
font-family: $default-font;
color: $black;
font-weight: normal;

.is-zoomed-out & {
// Scale the font size based on the zoom level.
font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
// 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));
}

&.is-dragged-over {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,15 @@ export function ZoomOutSeparator( {
<AnimatePresence>
{ isVisible && (
<motion.div
as="button"
layout={ ! isReducedMotion }
initial={ { height: 0 } }
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)',
} }
exit={ { height: 0 } }
transition={ {
type: 'tween',
duration: 0.2,
duration: isReducedMotion ? 0 : 0.2,
ease: [ 0.6, 0, 0.4, 1 ],
} }
className={ clsx(
Expand All @@ -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 } } }
transition={ {
type: 'tween',
ease: 'linear',
duration: 0.1,
delay: 0.125,
} }
>
{ __( 'Drop pattern.' ) }
Expand Down

1 comment on commit d32b15d

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in d32b15d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11348621374
📝 Reported issues:

Please sign in to comment.