Try: Add welcome guide for zoom out mode

packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts

@@ -71,5 +71,8 @@ export async function visitSiteEditor(
 			welcomeGuidePage: false,
 			welcomeGuideTemplate: false,
 		} );
+		await this.editor.setPreferences( 'core', {
+			welcomeGuideZoomOut: false,
+		} );
 	}
 }

packages/e2e-test-utils-playwright/src/editor/set-preferences.ts

@@ -4,6 +4,7 @@
 import type { Editor } from './index';
 
 type PreferencesContext =
+	| 'core'
 	| 'core/edit-post'
 	| 'core/edit-site'
 	| 'core/customize-widgets';

packages/e2e-test-utils/src/site-editor.js

@@ -33,6 +33,10 @@ export async function disableSiteEditorWelcomeGuide() {
 		window.wp.data
 			.dispatch( 'core/preferences' )
 			.set( 'core/edit-site', 'welcomeGuideTemplate', false );
+
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core', 'welcomeGuideZoomOut', false );
 	} );
 }
 

packages/edit-post/src/index.js

@@ -72,6 +72,7 @@ export function initializeEditor(
 		showListViewByDefault: false,
 		enableChoosePatternModal: true,
 		isPublishSidebarEnabled: true,
+		welcomeGuideZoomOut: true,
 	} );
 
 	if ( window.__experimentalMediaProcessing ) {

packages/edit-site/src/index.js

@@ -80,6 +80,7 @@ export function initializeEditor( id, settings ) {
 		showBlockBreadcrumbs: true,
 		showListViewByDefault: false,
 		enableChoosePatternModal: true,
+		welcomeGuideZoomOut: true,
 	} );
 
 	if ( window.__experimentalMediaProcessing ) {

packages/edit-site/src/posts.js

@@ -73,6 +73,7 @@ export function initializePostsDashboard( id, settings ) {
 		showBlockBreadcrumbs: true,
 		showListViewByDefault: false,
 		enableChoosePatternModal: true,
+		welcomeGuideZoomOut: true,
 	} );
 
 	dispatch( editSiteStore ).updateSettings( settings );

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

@@ -13,6 +13,7 @@ import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import EditorInterface from '../editor-interface';
 import { ExperimentalEditorProvider } from '../provider';
 import Sidebar from '../sidebar';
+import WelcomeGuide from '../welcome-guide';
 
 function Editor( {
 	postType,
@@ -71,6 +72,7 @@ function Editor( {
 					initialEdits={ initialEdits }
 					useSubRegistry={ false }
 				>
+					<WelcomeGuide />
 					<EditorInterface { ...props }>
 						{ extraContent }
 					</EditorInterface>

packages/editor/src/components/welcome-guide/index.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideZoomOut from './zoom-out';
+import { unlock } from '../../lock-unlock';
+
+export default function WelcomeGuide() {
+	const { isActive, isZoomOut } = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		return {
+			isActive: get( 'core', 'welcomeGuideZoomOut' ),
+			isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+		};
+	}, [] );
+
+	if ( ! isActive || ! isZoomOut ) {
+		return null;
+	}
+
+	return <WelcomeGuideZoomOut />;
+}

packages/editor/src/components/welcome-guide/style.scss

@@ -0,0 +1,27 @@
+.editor-welcome-guide {
+	width: 312px;
+}
+
+.editor-welcome-guide__image {
+	margin: 0 0 $grid-unit-20;
+	> img {
+		display: block;
+		max-width: 100%;
+		object-fit: cover;
+	}
+}
+
+.editor-welcome-guide__heading {
+	font-family: $default-font;
+	font-size: 24px;
+	line-height: 1.4;
+	margin: $grid-unit-20 0 $grid-unit-20 0;
+	padding: 0 $grid-unit-40;
+}
+
+.editor-welcome-guide__text {
+	font-size: $default-font-size;
+	line-height: 1.4;
+	margin: 0 0 $grid-unit-20 0;
+	padding: 0 $grid-unit-40;
+}

packages/editor/src/components/welcome-guide/zoom-out.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export default function WelcomeGuideZoomOut() {
+	const isActive = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		return get( 'core', 'welcomeGuideZoomOut' );
+	}, [] );
+	const { set } = useDispatch( preferencesStore );
+	return (
+		<Guide
+			className="editor-welcome-guide"
+			contentLabel={ __( 'Welcome to the Zoom Out view' ) }
+			finishButtonText={ __( 'Continue' ) }
+			onFinish={ () => set( 'core', 'welcomeGuideZoomOut', ! isActive ) }
+			pages={ [
+				{
+					image: (
+						<picture className="editor-welcome-guide__image">
+							<source
+								srcSet="https://s.w.org/images/block-editor/welcome-template-editor.svg"
+								media="(prefers-reduced-motion: reduce)"
+							/>
+							<img
+								src="https://s.w.org/images/block-editor/welcome-template-editor.gif"
+								width="312"
+								height="240"
+								alt={ __( 'Zoom Out view' ) }
+							/>
+						</picture>
+					),
+					content: (
+						<>
+							<h1 className="editor-welcome-guide__heading">
+								{ __( 'Welcome to the Zoom Out view' ) }
+							</h1>
+							<p className="editor-welcome-guide__text">
+								{ __(
+									'The Zoom Out view simplifies your editing experience by allowing you to create and edit at the pattern level rather than focusing on individual blocks.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

packages/editor/src/style.scss

@@ -56,3 +56,4 @@
 @import "./components/table-of-contents/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
+@import "./components/welcome-guide/style.scss";