Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix scaling animation for device previews #66132

Merged
merged 4 commits into from
Oct 16, 2024
Merged

Fix scaling animation for device previews #66132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e84ec54
Fix scaling animation for device previews
jeryj Oct 15, 2024
b6793e4
Add mixin for handling canvas resizing
jeryj Oct 16, 2024
993cc33
Simplify mixin
jeryj Oct 16, 2024
9dfdb76
Linting
jeryj Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/base-styles/_animations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,8 @@
@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");
}
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/block-canvas/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@ iframe[name="editor-canvas"] {
height: 100%;
display: block;
background-color: transparent;
// Handles transitions between device previews
@include editor-canvas-resize-animation;
}
10 changes: 3 additions & 7 deletions packages/block-editor/src/components/iframe/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,16 @@

.block-editor-iframe__html {
transform-origin: top center;
// 400ms should match the animation speed used in iframe/index.js
$zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);

// 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.
transition: $zoomOutAnimation, transform 0s scale 0s;
@include reduce-motion("transition");
@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);

&.zoom-out-animation {
// 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.
transition: $zoomOutAnimation, transform 0s;
@include editor-canvas-resize-animation(transform 0s);
}
}

Expand All @@ -30,7 +26,7 @@
$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-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(( #{$outer-container-width} - #{ $container-width }) / 2 / #{$scale}));
transform: translateX(calc((#{$outer-container-width} - #{$container-width}) / 2 / #{$scale}));
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Linting.

scale: #{$scale};
background-color: $gray-300;

Expand Down
Loading