Editor: Enable Zoom-out mode in the post editor (#61293)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org>
WordPress · May 8, 2024 · a53cdf2 · a53cdf2
1 parent 6a0188b
commit a53cdf2
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 133 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -17,6 +17,7 @@ import {
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { useZoomOut } from '../../hooks/use-zoom-out';
+import { store as blockEditorStore } from '../../store';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -48,6 +50,11 @@ function InserterMenu(
 	},
 	ref
 ) {
+	const isZoomOutMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		[]
+	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -289,6 +296,7 @@ function InserterMenu(
 		<div
 			className={ clsx( 'block-editor-inserter__menu', {
 				'show-panel': showPatternPanel || showMediaPanel,
+				'is-zoom-out': isZoomOutMode,
 			} ) }
 			ref={ ref }
 		>

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -702,12 +702,9 @@ $block-inserter-tabs-height: 44px;
 	display: none;
 }
 
-.is-zoom-out {
-	.block-editor-inserter__menu {
-		display: flex;
-	}
-
-	.show-panel::after {
+.block-editor-inserter__menu.is-zoom-out {
+	display: flex;
+	&.show-panel::after {
 		// Makes space for the inserter flyout panel
 		@include break-medium {
 			content: "";

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -18,6 +18,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useState } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -60,9 +61,11 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 		showIconLabels,
 		hasHistory,
 		hasFixedToolbar,
+		isZoomedOutView,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const { getEditorMode } = select( editorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
 			isTextEditor: getEditorMode() === 'text',
@@ -74,6 +77,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				select( editorStore ).isPublishSidebarOpened(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -131,7 +135,10 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					// when the publish sidebar has been closed.
 					<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
 				) }
-				<PreviewDropdown forceIsAutosaveable={ hasActiveMetaboxes } />
+				<PreviewDropdown
+					disabled={ isZoomedOutView }
+					forceIsAutosaveable={ hasActiveMetaboxes }
+				/>
 				<PostPreviewButton
 					className="edit-post-header__post-preview-button"
 					forceIsAutosaveable={ hasActiveMetaboxes }

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -160,6 +160,7 @@ function Layout( { initialPost } ) {
 		documentLabel,
 		hasHistory,
 		hasBlockBreadcrumbs,
+		blockEditorMode,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
@@ -195,6 +196,8 @@ function Layout( { initialPost } ) {
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
 			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			blockEditorMode:
+				select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
 
@@ -342,6 +345,7 @@ function Layout( { initialPost } ) {
 					! isMobileViewport &&
 					showBlockBreadcrumbs &&
 					isRichEditingEnabled &&
+					blockEditorMode !== 'zoom-out' &&
 					mode === 'visual' && (
 						<div className="edit-post-layout__footer">
 							<BlockBreadcrumb rootLabelText={ documentLabel } />

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -13,6 +13,7 @@ import {
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -32,12 +33,13 @@ export default function VisualEditor( { styles } ) {
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 		isEditingTemplate,
+		isZoomedOutView,
 	} = useSelect( ( select ) => {
 		const { isFeatureActive } = select( editPostStore );
 		const { getEditorSettings, getRenderingMode } = select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const editorSettings = getEditorSettings();
-
 		return {
 			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 			renderingMode: getRenderingMode(),
@@ -47,6 +49,7 @@ export default function VisualEditor( { styles } ) {
 			} ),
 			isEditingTemplate:
 				select( editorStore ).getCurrentPostType() === 'wp_template',
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 	const hasMetaBoxes = useSelect(
@@ -60,7 +63,11 @@ export default function VisualEditor( { styles } ) {
 
 	// Add a constant padding for the typewritter effect. When typing at the
 	// bottom, there needs to be room to scroll up.
-	if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
+	if (
+		! isZoomedOutView &&
+		! hasMetaBoxes &&
+		renderingMode === 'post-only'
+	) {
 		paddingBottom = '40vh';
 	}
 

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -25,7 +25,6 @@ import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
-import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
@@ -41,11 +40,9 @@ function EditorCanvas( {
 		isFocusMode,
 		templateType,
 		canvasMode,
-		isZoomOutMode,
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { getBlockCount, __unstableGetEditorMode } =
-			select( blockEditorStore );
+		const { getBlockCount } = select( blockEditorStore );
 		const { getEditedPostType, getCanvasMode } = unlock(
 			select( editSiteStore )
 		);
@@ -54,7 +51,6 @@ function EditorCanvas( {
 		return {
 			templateType: _templateType,
 			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 			canvasMode: getCanvasMode(),
 			hasBlocks: !! getBlockCount(),
 			currentPostIsTrashed:
@@ -139,17 +135,6 @@ function EditorCanvas( {
 		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
 	);
 
-	const frameSize = isZoomOutMode ? 20 : undefined;
-
-	const scale = isZoomOutMode
-		? ( contentWidth ) =>
-				computeIFrameScale(
-					{ width: 1000, scale: 0.55 },
-					{ width: 400, scale: 0.9 },
-					contentWidth
-				)
-		: undefined;
-
 	return (
 		<EditorCanvasRoot
 			className={ clsx( 'edit-site-editor-canvas__block-list', {
@@ -158,8 +143,6 @@ function EditorCanvas( {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				scale,
-				frameSize,
 				className: clsx( 'edit-site-visual-editor__editor-canvas', {
 					'is-focused': isFocused && canvasMode === 'view',
 				} ),

diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -18,13 +18,13 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import SiteEditorMoreMenuItems from './more-menu';
 import SaveButton from '../save-button';
-import DocumentTools from './document-tools';
 import { store as editSiteStore } from '../../store';
 import {
 	getEditorCanvasContainerTitle,
@@ -36,6 +36,7 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
 const {
 	CollapsableBlockToolbar,
+	DocumentTools,
 	MoreMenu,
 	PostViewLink,
 	PreviewDropdown,
@@ -52,11 +53,12 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 		editorCanvasView,
 		isFixedToolbar,
 		isPublishSidebarOpened,
+		isVisualMode,
 	} = useSelect( ( select ) => {
 		const { getEditedPostType } = select( editSiteStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { get: getPreference } = select( preferencesStore );
-		const { getDeviceType } = select( editorStore );
+		const { getDeviceType, getEditorMode } = select( editorStore );
 
 		return {
 			deviceType: getDeviceType(),
@@ -70,6 +72,7 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 			isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			isPublishSidebarOpened:
 				select( editorStore ).isPublishSidebarOpened(),
+			isVisualMode: getEditorMode() === 'visual',
 		};
 	}, [] );
 
@@ -115,8 +118,8 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 					transition={ toolbarTransition }
 				>
 					<DocumentTools
-						blockEditorMode={ blockEditorMode }
-						isDistractionFree={ isDistractionFree }
+						disableBlockTools={ ! isVisualMode }
+						listViewLabel={ __( 'List View' ) }
 					/>
 					{ showTopToolbar && (
 						<CollapsableBlockToolbar
@@ -144,18 +147,13 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 					transition={ toolbarTransition }
 				>
 					{ isLargeViewport && (
-						<div
-							className={ clsx(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
+						<PreviewDropdown
+							disabled={
+								isFocusMode ||
+								! hasDefaultEditorCanvasView ||
+								isZoomedOutView
+							}
+						/>
 					) }
 					<PostViewLink />
 					{

diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -120,15 +120,6 @@
 	gap: $grid-unit-10;
 }
 
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
 // Button text label styles
 
 .edit-site-header-edit-mode.show-icon-labels {