diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 56c6bb0404c2a..3bb50999c2a92 100644
--- 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
index 0c8b474e9a9c5..321749fa70c84 100644
--- 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 (
{
- const { getEditorMode } = select( editorStore );
-
- return {
- isVisualMode: getEditorMode() === 'visual',
- };
- }, [] );
- const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
- const { setDeviceType } = useDispatch( editorStore );
- const isLargeViewport = useViewportMatch( 'medium' );
- const isZoomedOutViewExperimentEnabled =
- window?.__experimentalEnableZoomedOutView && isVisualMode;
- const isZoomedOutView = blockEditorMode === 'zoom-out';
-
- return (
-
- { isZoomedOutViewExperimentEnabled &&
- isLargeViewport &&
- ! isDistractionFree &&
- ! hasFixedToolbar && (
- {
- setDeviceType( 'Desktop' );
- __unstableSetEditorMode(
- isZoomedOutView ? 'edit' : 'zoom-out'
- );
- } }
- size="compact"
- />
- ) }
-
- );
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index 4ae9db1fea80c..921ff61dd23a1 100644
--- 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 }
>
{ showTopToolbar && (
{ isLargeViewport && (
-
+
) }
{
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 5963a1c815141..39a1a3418395a 100644
--- 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 {
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 9a3c3100c4be7..d8b0d85e484ed 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -72,7 +72,6 @@ export default function Layout() {
const {
isDistractionFree,
- isZoomOutMode,
hasFixedToolbar,
hasBlockSelected,
canvasMode,
@@ -104,9 +103,6 @@ export default function Layout() {
'core',
'showBlockBreadcrumbs'
),
- isZoomOutMode:
- select( blockEditorStore ).__unstableGetEditorMode() ===
- 'zoom-out',
hasBlockSelected:
select( blockEditorStore ).getBlockSelectionStart(),
};
@@ -186,7 +182,6 @@ export default function Layout() {
'is-full-canvas': canvasMode === 'edit',
'has-fixed-toolbar': hasFixedToolbar,
'is-block-toolbar-visible': hasBlockSelected,
- 'is-zoom-out': isZoomOutMode,
'has-block-breadcrumbs':
hasBlockBreadcrumbs &&
! isDistractionFree &&
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 64d94cc2e9165..c799e9eae30de 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -15,7 +15,7 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { Button, ToolbarItem } from '@wordpress/components';
-import { listView, plus } from '@wordpress/icons';
+import { listView, plus, chevronUpDown } from '@wordpress/icons';
import { useRef, useCallback } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as preferencesStore } from '@wordpress/preferences';
@@ -35,13 +35,13 @@ const preventDefault = ( event ) => {
function DocumentTools( {
className,
disableBlockTools = false,
- children,
// This is a temporary prop until the list view is fully unified between post and site editors.
listViewLabel = __( 'Document Overview' ),
} ) {
const inserterButton = useRef();
- const { setIsInserterOpened, setIsListViewOpened } =
+ const { setIsInserterOpened, setIsListViewOpened, setDeviceType } =
useDispatch( editorStore );
+ const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
const {
isDistractionFree,
isInserterOpened,
@@ -50,13 +50,15 @@ function DocumentTools( {
listViewToggleRef,
hasFixedToolbar,
showIconLabels,
+ isVisualMode,
+ isZoomedOutView,
} = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
const { get } = select( preferencesStore );
- const { isListViewOpened, getListViewToggleRef } = unlock(
- select( editorStore )
- );
+ const { isListViewOpened, getListViewToggleRef, getEditorMode } =
+ unlock( select( editorStore ) );
const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+ const { __unstableGetEditorMode } = select( blockEditorStore );
return {
isInserterOpened: select( editorStore ).isInserterOpened(),
@@ -68,11 +70,15 @@ function DocumentTools( {
hasFixedToolbar: getSettings().hasFixedToolbar,
showIconLabels: get( 'core', 'showIconLabels' ),
isDistractionFree: get( 'core', 'distractionFree' ),
+ isVisualMode: getEditorMode() === 'visual',
+ isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );
const isLargeViewport = useViewportMatch( 'medium' );
const isWideViewport = useViewportMatch( 'wide' );
+ const isZoomedOutViewExperimentEnabled =
+ window?.__experimentalEnableZoomedOutView && isVisualMode;
/* translators: accessibility text for the editor toolbar */
const toolbarAriaLabel = __( 'Document tools' );
@@ -179,7 +185,27 @@ function DocumentTools( {
) }
>
) }
- { children }
+
+ { isZoomedOutViewExperimentEnabled &&
+ isLargeViewport &&
+ ! isDistractionFree &&
+ ! hasFixedToolbar && (
+ {
+ setDeviceType( 'Desktop' );
+ __unstableSetEditorMode(
+ isZoomedOutView ? 'edit' : 'zoom-out'
+ );
+ } }
+ size="compact"
+ />
+ ) }
);
diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
index 8f63ee6980aac..7608b7bc856e0 100644
--- a/packages/editor/src/components/editor-canvas/index.js
+++ b/packages/editor/src/components/editor-canvas/index.js
@@ -30,6 +30,7 @@ import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import EditTemplateBlocksNotification from './edit-template-blocks-notification';
import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
+import { computeIFrameScale } from './utils';
const {
LayoutStyle,
@@ -161,13 +162,17 @@ function EditorCanvas( {
hasRootPaddingAwareAlignments,
themeHasDisabledLayoutStyles,
themeSupportsLayout,
+ isZoomOutMode,
} = useSelect( ( select ) => {
- const _settings = select( blockEditorStore ).getSettings();
+ const { getSettings, __unstableGetEditorMode } =
+ select( blockEditorStore );
+ const _settings = getSettings();
return {
themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
themeSupportsLayout: _settings.supportsLayout,
hasRootPaddingAwareAlignments:
_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+ isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );
@@ -319,6 +324,16 @@ function EditorCanvas( {
} ),
] );
+ const frameSize = isZoomOutMode ? 20 : undefined;
+ const scale = isZoomOutMode
+ ? ( contentWidth ) =>
+ computeIFrameScale(
+ { width: 1000, scale: 0.55 },
+ { width: 400, scale: 0.9 },
+ contentWidth
+ )
+ : undefined;
+
return (