diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 2e045ad732942..a838b95258ca6 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -22,6 +22,7 @@ import PostPublishButtonOrToggle from '../post-publish-button/post-publish-butto
import PostSavedState from '../post-saved-state';
import PostViewLink from '../post-view-link';
import PreviewDropdown from '../preview-dropdown';
+import ZoomOutToggle from '../zoom-out-toggle';
import { store as editorStore } from '../../store';
const toolbarVariations = {
@@ -48,6 +49,9 @@ function Header( {
title,
icon,
} ) {
+ const zoomOutExperimentEnabled =
+ window.__experimentalEnableZoomOutExperiment;
+
const isWideViewport = useViewportMatch( 'large' );
const isLargeViewport = useViewportMatch( 'medium' );
const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
@@ -142,9 +146,13 @@ function Header( {
forceIsAutosaveable={ forceIsDirty }
/>
+
+ { zoomOutExperimentEnabled && }
+
{ ( isWideViewport || ! showIconLabels ) && (
) }
+
{ ! customSaveButton && (
) }
+
{ customSaveButton }
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 5acaa351c9bb7..ecc5bc610a302 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -19,9 +19,7 @@ import { __ } from '@wordpress/i18n';
import { desktop, mobile, tablet, external } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
-import { useEffect, useRef } from '@wordpress/element';
import { store as preferencesStore } from '@wordpress/preferences';
-import { store as blockEditorStore } from '@wordpress/block-editor';
import { ActionItem } from '@wordpress/interface';
/**
@@ -31,49 +29,21 @@ import { store as editorStore } from '../../store';
import PostPreviewButton from '../post-preview-button';
export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
- const {
- deviceType,
- editorMode,
- homeUrl,
- isTemplate,
- isViewable,
- showIconLabels,
- } = useSelect( ( select ) => {
- const { getDeviceType, getCurrentPostType } = select( editorStore );
- const { getEntityRecord, getPostType } = select( coreStore );
- const { get } = select( preferencesStore );
- const { __unstableGetEditorMode } = select( blockEditorStore );
- const _currentPostType = getCurrentPostType();
- return {
- deviceType: getDeviceType(),
- editorMode: __unstableGetEditorMode(),
- homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
- isTemplate: _currentPostType === 'wp_template',
- isViewable: getPostType( _currentPostType )?.viewable ?? false,
- showIconLabels: get( 'core', 'showIconLabels' ),
- };
- }, [] );
+ const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
+ useSelect( ( select ) => {
+ const { getDeviceType, getCurrentPostType } = select( editorStore );
+ const { getEntityRecord, getPostType } = select( coreStore );
+ const { get } = select( preferencesStore );
+ const _currentPostType = getCurrentPostType();
+ return {
+ deviceType: getDeviceType(),
+ homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+ isTemplate: _currentPostType === 'wp_template',
+ isViewable: getPostType( _currentPostType )?.viewable ?? false,
+ showIconLabels: get( 'core', 'showIconLabels' ),
+ };
+ }, [] );
const { setDeviceType } = useDispatch( editorStore );
- const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-
- /**
- * Save the original editing mode in a ref to restore it when we exit zoom out.
- */
- const originalEditingModeRef = useRef( editorMode );
- useEffect( () => {
- if ( editorMode !== 'zoom-out' ) {
- originalEditingModeRef.current = editorMode;
- }
-
- return () => {
- if (
- editorMode === 'zoom-out' &&
- editorMode !== originalEditingModeRef.current
- ) {
- __unstableSetEditorMode( originalEditingModeRef.current );
- }
- };
- }, [ editorMode, __unstableSetEditorMode ] );
const isMobile = useViewportMatch( 'medium', '<' );
if ( isMobile ) {
@@ -112,44 +82,17 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
label: __( 'Desktop' ),
icon: desktop,
},
+ {
+ value: 'Tablet',
+ label: __( 'Tablet' ),
+ icon: tablet,
+ },
+ {
+ value: 'Mobile',
+ label: __( 'Mobile' ),
+ icon: mobile,
+ },
];
- if ( window.__experimentalEnableZoomOutExperiment ) {
- choices.push( {
- value: 'ZoomOut',
- label: __( 'Desktop (50%)' ),
- icon: desktop,
- } );
- }
- choices.push( {
- value: 'Tablet',
- label: __( 'Tablet' ),
- icon: tablet,
- } );
- choices.push( {
- value: 'Mobile',
- label: __( 'Mobile' ),
- icon: mobile,
- } );
-
- const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
-
- /**
- * Handles the selection of a device type.
- *
- * @param {string} value The device type.
- */
- const onSelect = ( value ) => {
- let newEditorMode = originalEditingModeRef.current;
-
- if ( value === 'ZoomOut' ) {
- newEditorMode = 'zoom-out';
- setDeviceType( 'Desktop' );
- } else {
- setDeviceType( value );
- }
-
- __unstableSetEditorMode( newEditorMode );
- };
return (
@@ -170,8 +112,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
{ isTemplate && (
diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
new file mode 100644
index 0000000000000..e8c7b1e50510a
--- /dev/null
+++ b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { square as zoomOutIcon } from '@wordpress/icons';
+
+const ZoomOutToggle = () => {
+ const { isZoomOutMode } = useSelect( ( select ) => ( {
+ isZoomOutMode:
+ select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+ } ) );
+
+ const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+ const handleZoomOut = () => {
+ __unstableSetEditorMode( isZoomOutMode ? 'edit' : 'zoom-out' );
+ };
+
+ return (
+
+ );
+};
+
+export default ZoomOutToggle;
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 11b3da927f364..d60ca5a74eb5b 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -242,6 +242,7 @@ export { default as store } from './library/store';
export { default as stretchFullWidth } from './library/stretch-full-width';
export { default as styles } from './library/styles';
export { default as shipping } from './library/shipping';
+export { default as square } from './library/square';
export { default as stretchWide } from './library/stretch-wide';
export { default as subscript } from './library/subscript';
export { default as superscript } from './library/superscript';
diff --git a/packages/icons/src/library/square.js b/packages/icons/src/library/square.js
new file mode 100644
index 0000000000000..843a8d2d5261d
--- /dev/null
+++ b/packages/icons/src/library/square.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const square = (
+
+);
+
+export default square;