Skip to content

Commit

Permalink
Add useScaleCanvas: Web Animations API for zoom in/out animation (#66917
Browse files Browse the repository at this point in the history 
)

* Move code into useScaleCanvas that isn't necessary in iframe index
* Use Web Animations API for zoom in/out
* Add reverse animation if zoom state is toggled quickly
* Use transitionTo and transitionFrom refs to manage start and end points of transition

---------

Co-authored-by: Alex Lende <[email protected]>
  • Loading branch information
@jeryj @ajlende
jeryj and ajlende authored Nov 26, 2024
1 parent 9b90853 commit eadf2dd
Show file tree
Hide file tree
Showing 5 changed files with 517 additions and 360 deletions.
5 changes: 0 additions & 5 deletions packages/base-styles/_animations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,3 @@
@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
@include animation__fade-in($speed, $delay);
}

@mixin editor-canvas-resize-animation($additional-transition-rules...) {
transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), $additional-transition-rules;
@include reduce-motion("transition");
}
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/block-canvas/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ iframe[name="editor-canvas"] {
height: 100%;
display: block;
// Handles transitions between device previews
@include editor-canvas-resize-animation;
transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
@include reduce-motion("transition");
background-color: $gray-300;
}
75 changes: 34 additions & 41 deletions packages/block-editor/src/components/iframe/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@

.block-editor-iframe__html {
transform-origin: top center;
// We don't want to animate the transform of the translateX because it is used
// to "center" the canvas. Leaving it on causes the canvas to slide around in
// odd ways.
@include editor-canvas-resize-animation( transform 0s, scale 0s, padding 0s, translate 0s);
// Prevents a flash of background color change when entering/exiting zoom out
transition: background-color 400ms;

&.zoom-out-animation {
$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
Expand All @@ -18,53 +16,48 @@
right: 0;
top: calc(-1 * #{$scroll-top});
bottom: 0;
translate: 0 calc(#{$scroll-top} - #{$scroll-top-next});
// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
// and removing the scrollbar causes the content to shift.
overflow-y: scroll;

// We only want to animate the scaling when entering zoom out. When sidebars
// are toggled, the resizing of the iframe handles scaling the canvas as well,
// and the doubled animations cause very odd animations.
@include editor-canvas-resize-animation( transform 0s, top 0s, bottom 0s, right 0s, left 0s );
}
}

.block-editor-iframe__html.is-zoomed-out {
$scale: var(--wp-block-editor-iframe-zoom-out-scale);
$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
// Apply an X translation to center the scaled content within the available space.
transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
scale: #{$scale};
background-color: $gray-300;
&.is-zoomed-out {
$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
// Apply an X translation to center the scaled content within the available space.
transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
scale: $scale;
background-color: $gray-300;

// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
// so we need to adjust the height of the content to match the scale by using negative margins.
$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
margin-bottom: calc(-1 * #{$total-height});
// Add the top/bottom frame size. We use scaling to account for the left/right, as
// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
// of the content.
padding-top: calc(#{$frame-size} / #{$scale});
padding-bottom: calc(#{$frame-size} / #{$scale});
// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
// so we need to adjust the height of the content to match the scale by using negative margins.
$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
margin-bottom: calc(-1 * #{$total-height});

body {
min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
// Add the top/bottom frame size. We use scaling to account for the left/right, as
// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
// of the content.
padding-top: calc(#{$frame-size} / #{$scale});
padding-bottom: calc(#{$frame-size} / #{$scale});

> .is-root-container:not(.wp-block-post-content) {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
body {
min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});

> main {
> .is-root-container:not(.wp-block-post-content) {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;

> main {
flex: 1;
}
}
}
}
Expand Down
Loading

1 comment on commit eadf2dd

@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 eadf2dd.
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/12038574371
📝 Reported issues:

Please sign in to comment.