Add Zoom Out toggle to editor header when experiment enabled

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 }
 				/>
 				<PostViewLink />
+
+				{ zoomOutExperimentEnabled && <ZoomOutToggle /> }
+
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />
 				) }
+
 				{ ! customSaveButton && (
 					<PostPublishButtonOrToggle
 						forceIsDirty={ forceIsDirty }
@@ -153,6 +161,7 @@ function Header( {
 						}
 					/>
 				) }
+
 				{ customSaveButton }
 				<MoreMenu />
 			</motion.div>

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 (
+		<Button
+			onClick={ handleZoomOut }
+			icon={ zoomOutIcon }
+			label={ __( 'Toggle Zoom Out' ) }
+			isPressed={ isZoomOutMode }
+			size="compact"
+		/>
+	);
+};
+
+export default ZoomOutToggle;

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';

packages/icons/src/library/square.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const square = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+		<Path
+			fill="none"
+			d="M5.75 12.75V18.25H11.25M12.75 5.75H18.25V11.25"
+			stroke="currentColor"
+			stroke-width="1.5"
+			stroke-linecap="square"
+		/>
+	</SVG>
+);
+
+export default square;