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

Zoom Out: Use the zoom-level value to scale the iframe #66280

Merged
merged 2 commits into from
Oct 23, 2024
+29 −16
Merged

Zoom Out: Use the zoom-level value to scale the iframe #66280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ee78c5
Zoom Out: Use the zoom-level value to scale the iframe
youknowriad Oct 21, 2024
f0c2542
Fix isZoomOut
youknowriad Oct 22, 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
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/block-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,14 @@ export function ExperimentalBlockCanvas( {
const clearerRef = useBlockSelectionClearer();
const localRef = useRef();
const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
const isZoomedOut = useSelect(
( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
const zoomLevel = useSelect(
( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),
[]
);
const zoomOutIframeProps =
isZoomedOut && ! isTabletViewport
zoomLevel !== 100 && ! isTabletViewport
? {
scale: 'default',
scale: zoomLevel,
frameSize: '40px',
}
: {};
Expand Down
2 changes: 1 addition & 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 @@ -354,7 +354,7 @@ function Iframe( {
// but calc( 100px / 2px ) is not.
iframeDocument.documentElement.style.setProperty(
'--wp-block-editor-iframe-zoom-out-scale',
scale === 'default'
scale === 'auto-scaled'
Copy link
Member

Choose a reason for hiding this comment

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

Is this just a case of not wanting to set a scale as a percentage, but instead a certain width?

Copy link
Member

Choose a reason for hiding this comment

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

Because it seems this "auto scaling" is just a hardcoded 750px width.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I'm not entirely how the computation works, it's computed using the actual width of the window and a maxWidth of 750 for the zoom-out area.

I would be fine removing it and setting a percentage but I don't have too much context here.

Copy link
Member

Choose a reason for hiding this comment

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

My point is: does it make sense to have a % API? Are we using that as third party somewhere? Would a width work there instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah good point, Well, in my mind, the zoom level becomes kind of like a range picker (see the storybook), in which case the % API seems better no?

Copy link
Contributor

Choose a reason for hiding this comment

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

I always saw the state as representing a percentage of zoom 👍

Copy link
Member

Choose a reason for hiding this comment

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

Any way we can make this auto scaled private? Maybe a symbol?

? ( Math.min( containerWidth, maxWidth ) -
parseInt( frameSize ) * 2 ) /
scaleContainerWidth
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/hooks/use-zoom-out.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function useZoomOut( zoomOut = true ) {

return () => {
if ( isZoomOutOnMount && isWideViewport ) {
setZoomLevel( 50 );
setZoomLevel( 'auto-scaled' );
} else {
resetZoomLevel();
}
Expand All @@ -37,7 +37,7 @@ export function useZoomOut( zoomOut = true ) {

useEffect( () => {
if ( zoomOut && isWideViewport ) {
setZoomLevel( 50 );
setZoomLevel( 'auto-scaled' );
} else {
resetZoomLevel();
}
Expand Down
12 changes: 11 additions & 1 deletion packages/block-editor/src/store/private-selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -592,7 +592,17 @@ export function getSectionRootClientId( state ) {
* @return {boolean} Whether the editor is zoomed.
*/
export function isZoomOut( state ) {
return state.zoomLevel < 100;
return state.zoomLevel === 'auto-scaled' || state.zoomLevel < 100;
}

/**
* Returns whether the zoom level.
*
* @param {Object} state Global application state.
* @return {number|"auto-scaled"} Zoom level.
*/
export function getZoomLevel( state ) {
return state.zoomLevel;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/zoom-out-toggle/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ZoomOutToggle = ( { disabled } ) => {
if ( isZoomOut ) {
resetZoomLevel();
} else {
setZoomLevel( 50 );
setZoomLevel( 'auto-scaled' );
}
};

Expand Down
7 changes: 5 additions & 2 deletions storybook/stories/playground/index.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,13 @@ UndoRedo.parameters = {
sourceLink: 'storybook/stories/playground/with-undo-redo/index.js',
};

export const ZoomOut = () => {
return <EditorZoomOut />;
export const ZoomOut = ( props ) => {
return <EditorZoomOut { ...props } />;
};

ZoomOut.parameters = {
sourceLink: 'storybook/stories/playground/zoom-out/index.js',
};
ZoomOut.argTypes = {
zoomLevel: { control: { type: 'range', min: 10, max: 100, step: 5 } },
};
10 changes: 5 additions & 5 deletions storybook/stories/playground/zoom-out/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@ const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
'@wordpress/edit-site'
);

function EnableZoomOut() {
function EnableZoomOut( { zoomLevel } ) {
const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );

useEffect( () => {
setZoomLevel( 50 );
}, [ setZoomLevel ] );
setZoomLevel( zoomLevel ? zoomLevel / 100 : 'auto-scaled' );
}, [ setZoomLevel, zoomLevel ] );

return null;
}

export default function EditorZoomOut() {
export default function EditorZoomOut( { zoomLevel } ) {
const [ blocks, updateBlocks ] = useState( [] );

useEffect( () => {
Expand All @@ -57,7 +57,7 @@ export default function EditorZoomOut() {
onInput={ updateBlocks }
onChange={ updateBlocks }
>
<EnableZoomOut />
<EnableZoomOut zoomLevel={ zoomLevel } />
<BlockCanvas height="500px" styles={ editorStyles }>
<style>{ contentCss }</style>
<BlockList />
Expand Down
Loading