FSE: Add welcome guide (#36172)

* FSE: Add welcome guide * Fix e2e tests * Split welcome guide * remove extraneous full stop * get started * Close styles welcome guide for e2e tests * Add tools menu item * Update assets * Adjust styles * Fix new e2e test Co-authored-by: James Koster <[email protected]>
WordPress · Nov 22, 2021 · b697aa0 · b697aa0
1 parent c6594e7
commit b697aa0
Show file tree

Hide file tree

Showing 20 changed files with 346 additions and 2 deletions.
diff --git a/packages/e2e-tests/experimental-features.js b/packages/e2e-tests/experimental-features.js
@@ -157,4 +157,31 @@ export const siteEditor = {
 			return '';
 		} );
 	},
+
+	async disableWelcomeGuide() {
+		const isWelcomeGuideActive = await page.evaluate( () =>
+			wp.data.select( 'core/edit-site' ).isFeatureActive( 'welcomeGuide' )
+		);
+		const isWelcomeGuideStyesActive = await page.evaluate( () =>
+			wp.data
+				.select( 'core/edit-site' )
+				.isFeatureActive( 'welcomeGuideStyles' )
+		);
+
+		if ( isWelcomeGuideActive ) {
+			await page.evaluate( () =>
+				wp.data
+					.dispatch( 'core/edit-site' )
+					.toggleFeature( 'welcomeGuide' )
+			);
+		}
+
+		if ( isWelcomeGuideStyesActive ) {
+			await page.evaluate( () =>
+				wp.data
+					.dispatch( 'core/edit-site' )
+					.toggleFeature( 'welcomeGuideStyles' )
+			);
+		}
+	},
 };
diff --git a/packages/e2e-tests/specs/experiments/document-settings.test.js b/packages/e2e-tests/specs/experiments/document-settings.test.js
@@ -36,6 +36,7 @@ describe( 'Document Settings', () => {
 
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	describe( 'when a template is selected from the navigation sidebar', () => {

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -145,6 +145,7 @@ describe( 'Multi-entity editor states', () => {
 
 	it( 'should not display any dirty entities when loading the site editor', async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 		expect( await openEntitySavePanel() ).toBe( false );
 	} );
 
@@ -204,6 +205,7 @@ describe( 'Multi-entity editor states', () => {
 			);
 			await saveAllEntities();
 			await siteEditor.visit();
+			await siteEditor.disableWelcomeGuide();
 
 			// Wait for site editor to load.
 			await canvas().waitForSelector(

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -244,6 +244,7 @@ describe( 'Multi-entity save flow', () => {
 				postId: 'tt1-blocks//index',
 				postType: 'wp_template',
 			} );
+			await siteEditor.disableWelcomeGuide();
 
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-toolbar__list-view-toggle' );

diff --git a/packages/e2e-tests/specs/experiments/settings-sidebar.test.js b/packages/e2e-tests/specs/experiments/settings-sidebar.test.js
@@ -53,6 +53,7 @@ describe( 'Settings sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	describe( 'Template tab', () => {

diff --git a/packages/e2e-tests/specs/experiments/site-editor-export.test.js b/packages/e2e-tests/specs/experiments/site-editor-export.test.js
@@ -41,6 +41,7 @@ describe( 'Site Editor Templates Export', () => {
 
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	it( 'clicking export should download edit-site-export.zip file', async () => {

diff --git a/packages/e2e-tests/specs/experiments/site-editor-inserter.test.js b/packages/e2e-tests/specs/experiments/site-editor-inserter.test.js
@@ -19,6 +19,7 @@ describe( 'Site Editor Inserter', () => {
 	} );
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	it( 'inserter toggle button should toggle global inserter', async () => {

diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -36,6 +36,7 @@ describe( 'Template Part', () => {
 	describe( 'Template part block', () => {
 		beforeEach( async () => {
 			await siteEditor.visit();
+			await siteEditor.disableWelcomeGuide();
 		} );
 
 		async function navigateToHeader() {

diff --git a/packages/e2e-tests/specs/experiments/template-revert.test.js b/packages/e2e-tests/specs/experiments/template-revert.test.js
@@ -16,7 +16,11 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import { siteEditor } from '../../experimental-features';
 
-const { visit: visitSiteEditor, getEditedPostContent } = siteEditor;
+const {
+	visit: visitSiteEditor,
+	getEditedPostContent,
+	disableWelcomeGuide,
+} = siteEditor;
 
 const assertSaveButtonIsDisabled = () =>
 	page.waitForSelector(
@@ -97,6 +101,7 @@ describe( 'Template Revert', () => {
 	beforeEach( async () => {
 		await trashAllPosts( 'wp_template' );
 		await visitSiteEditor();
+		await disableWelcomeGuide();
 	} );
 
 	it( 'should delete the template after saving the reverted template', async () => {

diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -84,6 +84,7 @@ describe( 'Site Editor Performance', () => {
 		);
 
 		await siteEditor.visit( { postId: id, postType: 'page' } );
+		await siteEditor.disableWelcomeGuide();
 
 		let i = 3;
 

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -39,6 +39,7 @@ import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import ErrorBoundary from '../error-boundary';
+import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from './global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
@@ -288,6 +289,7 @@ function Editor( { initialSettings, onError } ) {
 												}
 												footer={ <BlockBreadcrumb /> }
 											/>
+											<WelcomeGuide />
 											<Popover.Slot />
 											<PluginArea />
 										</ErrorBoundary>

diff --git a/packages/edit-site/src/components/welcome-guide/editor.js b/packages/edit-site/src/components/welcome-guide/editor.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideImage from './image';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuideEditor() {
+	const { toggleFeature } = useDispatch( editSiteStore );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide"
+			contentLabel={ __( 'Welcome to the site editor' ) }
+			finishButtonText={ __( 'Get Started' ) }
+			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
+			pages={ [
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/edit-your-site.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/edit-your-site.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Edit your site' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'Design everything on your site — from the header right down to the footer — using blocks.'
+								) }
+							</p>
+							<p className="edit-site-welcome-guide__text">
+								{ createInterpolateElement(
+									__(
+										'Click <StylesIconImage /> to start designing your blocks, and choose your typography, layout, and colors.'
+									),
+									{
+										StylesIconImage: (
+											<img
+												alt={ __( 'styles' ) }
+												src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' fill='%231E1E1E'/%3E%3C/svg%3E%0A"
+											/>
+										),
+									}
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/welcome-guide/image.js b/packages/edit-site/src/components/welcome-guide/image.js
@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="edit-site-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}
diff --git a/packages/edit-site/src/components/welcome-guide/index.js b/packages/edit-site/src/components/welcome-guide/index.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideEditor from './editor';
+import WelcomeGuideStyles from './styles';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuide() {
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editSiteStore.name
+		);
+		const isStylesSidebar = sidebar === 'edit-site/global-styles';
+		const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide';
+
+		return {
+			isActive: select( editSiteStore ).isFeatureActive( feature ),
+			isStylesOpen: isStylesSidebar,
+		};
+	}, [] );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return isStylesOpen ? <WelcomeGuideStyles /> : <WelcomeGuideEditor />;
+}
diff --git a/packages/edit-site/src/components/welcome-guide/style.scss b/packages/edit-site/src/components/welcome-guide/style.scss
@@ -0,0 +1,37 @@
+.edit-site-welcome-guide {
+	width: 312px;
+
+	&__image {
+		background: #00a0d2;
+		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__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;
+	}
+
+	&__text {
+		font-size: $default-font-size;
+		line-height: 1.4;
+		margin: 0 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+
+		img {
+			vertical-align: bottom;
+		}
+	}
+
+	&__inserter-icon {
+		margin: 0 4px;
+		vertical-align: text-top;
+	}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,6 +84,7 @@ describe( 'Site Editor Performance', () => { @@
     		);
     		await siteEditor.visit( { postId: id, postType: 'page' } );
+    		await siteEditor.disableWelcomeGuide();
     		let i = 3;
@@ Expand Down @@