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

Jump to bottom

Try centering zoom out transition #66146

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
+32 −4
Draft

Try centering zoom out transition #66146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 18 additions & 4 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 @@ -8,7 +8,7 @@
// 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);
@include editor-canvas-resize-animation(transform 0s, translate 0s, scale 0s, padding 0s);

&.zoom-out-animation {
// we only want to animate the scaling when entering zoom out. When sidebars
Expand All @@ -25,8 +25,13 @@
$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);
$scroll-y: var(--wp-block-editor-iframe-zoom-out-scroll-y, 0);
$scroll-y-percentage: var(--wp-block-editor-iframe-zoom-out-scroll-y-percentage, 0);
// Use translate with a 0 on the x, and then override it on the transform so we can animate the Y
// translation without animating the X.
translate: 0 calc(#{$scroll-y} * (1 - #{$scale}));
// Apply an X translation to center the scaled content within the available space.
transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
transform: translateX(calc(( #{$scale-container-width} - #{ $container-width }) / 2 / #{$scale}));
scale: #{$scale};
background-color: $gray-300;

Expand All @@ -35,15 +40,24 @@
$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});
// margin-top: calc(-1 * #{$total-height} * #{$scroll-y-percentage});
// margin-bottom: calc(-1 * #{$total-height} * ( 1 - #{$scroll-y-percentage} ) );
$scaled-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});

// Our transform origin point needs to be at the top of the content, as the bottom is removed from the
// frame by the negative margin. We can find the scroll point by taking the scroll position when entering
// zoom out and ...?
// We remove the transform origin from the scroll y from the margin top value
// margin-top: calc(-1 * #{$scaled-scroll-y});

// 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});

body {
min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
min-height: $scaled-height;

> .is-root-container:not(.wp-block-post-content) {
flex: 1;
Expand Down
14 changes: 14 additions & 0 deletions packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,20 @@ function Iframe( {
: scale
);

// Get the current scroll position of the iframe
const scrollY = iframeDocument.defaultView.scrollY;

// Figure out where this center point will be when the iframe is scaled
iframeDocument.documentElement.style.setProperty(
'--wp-block-editor-iframe-zoom-out-scroll-y',
`${ scrollY }px`
);

iframeDocument.documentElement.style.setProperty(
'--wp-block-editor-iframe-zoom-out-scroll-y-percentage',
scrollY / contentHeight
);

// frameSize has to be a px value for the scaling and frame size to be computed correctly.
iframeDocument.documentElement.style.setProperty(
'--wp-block-editor-iframe-zoom-out-frame-size',
Expand Down
Loading