Skip to content

Commit

Permalink
Polish zoom out inserter (WordPress#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 and karthick-murugan committed Nov 13, 2024
1 parent fb66d5d commit 9acc419
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

0 comments on commit 9acc419

Please sign in to comment.