Zoom Out: Bundle behavior in block-editor and add story (#66240)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>

package.json

@@ -235,6 +235,7 @@
 		"prettier": "npm:wp-prettier@3.0.3",
 		"progress": "2.0.3",
 		"puppeteer-core": "23.1.0",
+		"raw-loader": "4.0.2",
 		"react": "18.3.1",
 		"react-docgen-typescript": "2.2.2",
 		"react-dom": "18.3.1",

packages/block-editor/src/components/block-canvas/index.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 // EditorStyles is a memoized component, so avoid passing a new
 // object reference on each render.
@@ -32,10 +35,22 @@ export function ExperimentalBlockCanvas( {
 	iframeProps,
 } ) {
 	useBlockCommands();
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();
 	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
+	const isZoomedOut = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
+		[]
+	);
+	const zoomOutIframeProps =
+		isZoomedOut && ! isTabletViewport
+			? {
+					scale: 'default',
+					frameSize: '40px',
+			  }
+			: {};
 
 	if ( ! shouldIframe ) {
 		return (
@@ -70,6 +85,7 @@ export function ExperimentalBlockCanvas( {
 		>
 			<Iframe
 				{ ...iframeProps }
+				{ ...zoomOutIframeProps }
 				ref={ resetTypingRef }
 				contentRef={ contentRef }
 				style={ {

packages/editor/src/components/document-tools/index.js

@@ -9,11 +9,7 @@ import clsx from 'clsx';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import {
-	NavigableToolbar,
-	ToolSelector,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useCallback } from '@wordpress/element';
@@ -48,7 +44,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			getListViewToggleRef,
 		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { isZoomOut } = unlock( select( blockEditorStore ) );
 
 		return {
 			isInserterOpened: select( editorStore ).isInserterOpened(),
@@ -61,7 +56,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
-			isZoomedOutView: isZoomOut(),
 		};
 	}, [] );
 

packages/editor/src/components/visual-editor/index.js

@@ -108,7 +108,6 @@ function VisualEditor( {
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -339,14 +338,6 @@ function VisualEditor( {
 		useZoomOutModeExit(),
 	] );
 
-	const zoomOutProps =
-		isZoomedOut && ! isTabletViewport
-			? {
-					scale: 'default',
-					frameSize: '40px',
-			  }
-			: {};
-
 	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
 	const enableResizing =
 		[
@@ -403,7 +394,6 @@ function VisualEditor( {
 					height="100%"
 					iframeProps={ {
 						...iframeProps,
-						...zoomOutProps,
 						style: {
 							...iframeProps?.style,
 							...deviceStyles,

storybook/stories/playground/index.story.js

@@ -4,6 +4,7 @@
 import EditorFullPage from './fullpage';
 import EditorBox from './box';
 import EditorWithUndoRedo from './with-undo-redo';
+import EditorZoomOut from './zoom-out';
 
 export default {
 	title: 'Playground/Block Editor',
@@ -35,3 +36,11 @@ export const UndoRedo = () => {
 UndoRedo.parameters = {
 	sourceLink: 'storybook/stories/playground/with-undo-redo/index.js',
 };
+
+export const ZoomOut = () => {
+	return <EditorZoomOut />;
+};
+
+ZoomOut.parameters = {
+	sourceLink: 'storybook/stories/playground/zoom-out/index.js',
+};

storybook/stories/playground/zoom-out/index.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { useDispatch } from '@wordpress/data';
+import {
+	BlockEditorProvider,
+	BlockCanvas,
+	store as blockEditorStore,
+	BlockList,
+} from '@wordpress/block-editor';
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import editorStyles from '../editor-styles';
+// eslint-disable-next-line @wordpress/dependency-group
+import contentCss from '!!raw-loader!../../../../packages/block-editor/build-style/content.css';
+import { pattern } from './pattern';
+
+// Temporary hack to access private APIs before stabilizing zoom level.
+const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+	'@wordpress/edit-site'
+);
+
+function EnableZoomOut() {
+	const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+	useEffect( () => {
+		setZoomLevel( 50 );
+	}, [ setZoomLevel ] );
+
+	return null;
+}
+
+export default function EditorZoomOut() {
+	const [ blocks, updateBlocks ] = useState( [] );
+
+	useEffect( () => {
+		registerCoreBlocks();
+		updateBlocks( parse( pattern ) );
+	}, [] );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="editor-zoom-out"
+			onKeyDown={ ( event ) => event.stopPropagation() }
+			style={ { background: '#ddd', border: '1px solid gray' } }
+		>
+			<BlockEditorProvider
+				value={ blocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+			>
+				<EnableZoomOut />
+				<BlockCanvas height="500px" styles={ editorStyles }>
+					<style>{ contentCss }</style>
+					<BlockList />
+				</BlockCanvas>
+			</BlockEditorProvider>
+		</div>
+	);
+}

storybook/stories/playground/zoom-out/pattern.js

@@ -0,0 +1,39 @@
+export const pattern = `<!-- wp:cover {"customOverlayColor":"#eb4c77","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"6vw","right":"6vw","bottom":"6vw","left":"6vw"},"margin":{"top":"0"}}}} -->
+<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:6vw;padding-right:6vw;padding-bottom:6vw;padding-left:6vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#eb4c77"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0vw"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center","verticalAlignment":"top"}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill"}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"600px"}} -->
+<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"fontSize":"100px","textTransform":"none","fontStyle":"normal","fontWeight":"500","lineHeight":"0.9"}},"textColor":"contrast"} -->
+<h2 class="wp-block-heading alignwide has-text-align-left has-contrast-color has-text-color" style="font-size:100px;font-style:normal;font-weight:500;line-height:0.9;text-transform:none">Time for an adventure</h2>
+<!-- /wp:heading -->
+
+<!-- wp:spacer {"height":"24px"} -->
+<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph {"align":"left","textColor":"contrast"} -->
+<p class="has-text-align-left has-contrast-color has-text-color">Explore our network of trails that lead through a variety of woodland habitats and observe the diverse flora that call this area home. </p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"60px"} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrast","textColor":"base","style":{"spacing":{"padding":{"top":"24px","right":"48px","bottom":"24px","left":"48px"}},"typography":{"fontSize":"16px","fontStyle":"normal","fontWeight":"500","textTransform":"uppercase","letterSpacing":"0px"},"border":{"radius":"0px"}},"className":"is-style-fill"} -->
+<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px;font-style:normal;font-weight:500;letter-spacing:0px;text-transform:uppercase"><a class="wp-block-button__link has-base-color has-contrast-background-color has-text-color has-background wp-element-button" style="border-radius:0px;padding-top:24px;padding-right:48px;padding-bottom:24px;padding-left:48px">Sign up</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"blockGap":"24px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"right"}} -->
+<div class="wp-block-group"><!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":"8vw"} -->
+<div style="height:8vw" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+</div>
+<!-- /wp:group -->
+
+</div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div></div>
+<!-- /wp:cover -->`;