Skip to content

Add a zoomed out view to the site editor #41156

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

Merged
ntsekouras merged 15 commits into from
Sep 7, 2022
Merged

Add a zoomed out view to the site editor #41156

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1a14570
Fix inbetween position on resize (+49 squashed commits)
youknowriad Apr 15, 2022
a05a2e7
add new chevronUpDown icon
ntsekouras Aug 12, 2022
8c93805
Add experimental setting and applied some feedback
jorgefilipecosta Aug 12, 2022
ea8073e
inbetween inserters fix
ntsekouras Aug 22, 2022
6e50a75
smooth bg transition
ntsekouras Aug 22, 2022
c0d9e24
fix empty space below
ntsekouras Aug 22, 2022
5db5274
fix from rebase
ntsekouras Aug 23, 2022
812a4f6
small style tweaks
ntsekouras Aug 23, 2022
a0addbf
hide block list appender on zoom-out view
ntsekouras Aug 23, 2022
270fe82
fix php linter
ntsekouras Aug 23, 2022
da48c0c
fix selected block popover check
ntsekouras Aug 23, 2022
21b6831
tinker with animation
ntsekouras Aug 24, 2022
d22c33c
add __experimentalDisableBlockOverlay support in widget-area
ntsekouras Aug 25, 2022
b2bf41f
'keep' same background color on transition
ntsekouras Aug 25, 2022
d2ea2ab
Apply suggestions from code review
ntsekouras Aug 29, 2022
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
Prev Previous commit
Next Next commit
fix empty space below
  • Loading branch information
@ntsekouras
ntsekouras committed Sep 7, 2022
commit c0d9e249ee740591cd42da2d3295966e417e916f
1 change: 0 additions & 1 deletion packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,7 +447,6 @@
&.is-zoomed-out {
transform-origin: top center;
transform: scale(0.45);
margin-bottom: -70%;

> .block-list-appender {
display: none;
Expand Down
20 changes: 19 additions & 1 deletion 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 @@ -14,7 +14,11 @@ import {
useReducer,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useMergeRefs, useRefEffect } from '@wordpress/compose';
import {
useResizeObserver,
useMergeRefs,
useRefEffect,
} from '@wordpress/compose';
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';

/**
Expand Down Expand Up @@ -194,6 +198,8 @@ function Iframe(
const scripts = useParsedAssets( assets?.scripts );
const clearerRef = useBlockSelectionClearer();
const [ before, writingFlowRef, after ] = useWritingFlow();
const [ contentResizeListener, { height: contentHeight } ] =
useResizeObserver();
const setRef = useRefEffect( ( node ) => {
function setDocumentIfReady() {
const { contentDocument, ownerDocument } = node;
Expand Down Expand Up @@ -305,7 +311,19 @@ function Iframe(
'is-zoomed-out': isZoomedOut,
}
) }
style={
isZoomedOut
? {
// This is the remaining percentage from the scaling down
// of the iframe body(`scale(0.45)`).
marginBottom: `-${
contentHeight * 0.55
}px`,
}
: {}
}
>
{ contentResizeListener }
{ /*
* This is a wrapper for the extra styles and scripts
* rendered imperatively by cloning the parent,
Expand Down