diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts index f0a7db5ad966ff..e7600bfe6bd70a 100644 --- a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts +++ b/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, + } ); } } diff --git a/packages/e2e-test-utils-playwright/src/editor/set-preferences.ts b/packages/e2e-test-utils-playwright/src/editor/set-preferences.ts index 9e5345db4b9e39..699f1a97d2832a 100644 --- a/packages/e2e-test-utils-playwright/src/editor/set-preferences.ts +++ b/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'; diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js index 98ba34f7db4f51..9a81a16cca8f59 100644 --- a/packages/e2e-test-utils/src/site-editor.js +++ b/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 ); } ); } diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index daf789cb0a2ec9..d35804ff7745f9 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -72,6 +72,7 @@ export function initializeEditor( showListViewByDefault: false, enableChoosePatternModal: true, isPublishSidebarEnabled: true, + welcomeGuideZoomOut: true, } ); if ( window.__experimentalMediaProcessing ) { diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 1aceecc4d8b1fc..93158beb191128 100644 --- a/packages/edit-site/src/index.js +++ b/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 ) { diff --git a/packages/edit-site/src/posts.js b/packages/edit-site/src/posts.js index 78d823b56c4c11..960ca957f993f3 100644 --- a/packages/edit-site/src/posts.js +++ b/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 ); diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js index 21becea43cd7ee..03164fe47bcf34 100644 --- a/packages/editor/src/components/editor/index.js +++ b/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 } > + { extraContent } diff --git a/packages/editor/src/components/welcome-guide/index.js b/packages/editor/src/components/welcome-guide/index.js new file mode 100644 index 00000000000000..eb396615d9c461 --- /dev/null +++ b/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 ; +} diff --git a/packages/editor/src/components/welcome-guide/style.scss b/packages/editor/src/components/welcome-guide/style.scss new file mode 100644 index 00000000000000..7228ea458a796b --- /dev/null +++ b/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; +} diff --git a/packages/editor/src/components/welcome-guide/zoom-out.js b/packages/editor/src/components/welcome-guide/zoom-out.js new file mode 100644 index 00000000000000..6be0cb4825cee1 --- /dev/null +++ b/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 ( + set( 'core', 'welcomeGuideZoomOut', ! isActive ) } + pages={ [ + { + image: ( + + + { + + ), + content: ( + <> +

+ { __( 'Welcome to the Zoom Out view' ) } +

+

+ { __( + '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.' + ) } +

+ + ), + }, + ] } + /> + ); +} diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index d1af3095230f34..ac1d0d74dcd910 100644 --- a/packages/editor/src/style.scss +++ b/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";