From 3efbff45a7beca83f37938e8043164d770533451 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 3 Jul 2023 17:02:50 +1000
Subject: [PATCH] Page Content Focus: Add welcome guides (#52014)

* Page Content Focus: Add welcome guides

* Don't show when editor guide is active

* Just use regular accent/theme color in all guides

* slight copy change page guide

* Update components changelog

* Disable new guides in E2E tests

* Use s.w.org videos

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
---
 packages/components/src/guide/icons.tsx       |  9 +-
 packages/components/src/guide/index.tsx       |  4 +
 .../components/src/guide/page-control.tsx     |  6 +-
 packages/components/src/guide/style.scss      | 32 ++------
 .../src/admin/visit-site-editor.ts            |  8 ++
 packages/e2e-test-utils/src/site-editor.js    | 77 ++++-------------
 .../src/components/welcome-guide/editor.js    |  2 +-
 .../src/components/welcome-guide/index.js     |  4 +
 .../src/components/welcome-guide/page.js      | 75 +++++++++++++++++
 .../src/components/welcome-guide/style.scss   | 16 +++-
 .../src/components/welcome-guide/styles.js    |  2 +-
 .../src/components/welcome-guide/template.js  | 82 +++++++++++++++++++
 packages/edit-site/src/index.js               |  2 +
 13 files changed, 219 insertions(+), 100 deletions(-)
 create mode 100644 packages/edit-site/src/components/welcome-guide/page.js
 create mode 100644 packages/edit-site/src/components/welcome-guide/template.js

diff --git a/packages/components/src/guide/icons.tsx b/packages/components/src/guide/icons.tsx
index 1c47180ae0b11a..36146611dc299a 100644
--- a/packages/components/src/guide/icons.tsx
+++ b/packages/components/src/guide/icons.tsx
@@ -3,13 +3,8 @@
  */
 import { SVG, Circle } from '@wordpress/primitives';
 
-export const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (
+export const PageControlIcon = () => (
 	<SVG width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<Circle
-			cx="4"
-			cy="4"
-			r="4"
-			fill={ isSelected ? '#419ECD' : '#E1E3E6' }
-		/>
+		<Circle cx="4" cy="4" r="4" />
 	</SVG>
 );
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index 38f8d07d8c0efc..e6a2d4c1252eb8 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -111,6 +111,7 @@ function Guide( {
 		<Modal
 			className={ classnames( 'components-guide', className ) }
 			contentLabel={ contentLabel }
+			isDismissible={ pages.length > 1 }
 			onRequestClose={ onFinish }
 			onKeyDown={ ( event ) => {
 				if ( event.code === 'ArrowLeft' ) {
@@ -144,6 +145,7 @@ function Guide( {
 					{ canGoBack && (
 						<Button
 							className="components-guide__back-button"
+							variant="tertiary"
 							onClick={ goBack }
 						>
 							{ __( 'Previous' ) }
@@ -152,6 +154,7 @@ function Guide( {
 					{ canGoForward && (
 						<Button
 							className="components-guide__forward-button"
+							variant="primary"
 							onClick={ goForward }
 						>
 							{ __( 'Next' ) }
@@ -160,6 +163,7 @@ function Guide( {
 					{ ! canGoForward && (
 						<Button
 							className="components-guide__finish-button"
+							variant="primary"
 							onClick={ onFinish }
 						>
 							{ finishButtonText }
diff --git a/packages/components/src/guide/page-control.tsx b/packages/components/src/guide/page-control.tsx
index 6e5951923ab387..468670c6ad9b9b 100644
--- a/packages/components/src/guide/page-control.tsx
+++ b/packages/components/src/guide/page-control.tsx
@@ -28,11 +28,7 @@ export default function PageControl( {
 				>
 					<Button
 						key={ page }
-						icon={
-							<PageControlIcon
-								isSelected={ page === currentPage }
-							/>
-						}
+						icon={ <PageControlIcon /> }
 						aria-label={ sprintf(
 							/* translators: 1: current page number 2: total number of pages */
 							__( 'Page %1$d of %2$d' ),
diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss
index 5731f81de10ed1..b2516edeff1354 100644
--- a/packages/components/src/guide/style.scss
+++ b/packages/components/src/guide/style.scss
@@ -29,7 +29,7 @@
 
 			&:hover {
 				svg {
-					fill: #fff;
+					fill: $white;
 				}
 			}
 		}
@@ -57,7 +57,7 @@
 	&__footer {
 		align-content: center;
 		display: flex;
-		height: 30px;
+		height: $button-size;
 		justify-content: center;
 		margin: 0 0 $grid-unit-30 0;
 		padding: 0 $grid-unit-40;
@@ -78,6 +78,11 @@
 			height: 30px;
 			min-width: 20px;
 			margin: -6px 0;
+			color: $gray-200;
+		}
+
+		li[aria-current="step"] .components-button {
+			color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
 		}
 	}
 }
@@ -85,7 +90,6 @@
 .components-modal__frame.components-guide {
 	border: none;
 	min-width: 312px;
-	height: 80vh;
 	max-height: 575px;
 
 	@media ( max-width: $break-small ) {
@@ -98,34 +102,14 @@
 	&.components-guide__back-button,
 	&.components-guide__forward-button,
 	&.components-guide__finish-button {
-		height: 30px;
 		position: absolute;
 	}
 
-	&.components-guide__back-button,
-	&.components-guide__forward-button {
-		font-size: $default-font-size;
-		padding: 4px 2px;
-
-		&.has-text svg {
-			margin: 0;
-		}
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
 	&.components-guide__back-button {
 		left: $grid-unit-40;
 	}
 
-	&.components-guide__forward-button {
-		right: $grid-unit-40;
-		color: #1386bf;
-		font-weight: bold;
-	}
-
+	&.components-guide__forward-button,
 	&.components-guide__finish-button {
 		right: $grid-unit-40;
 	}
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 f703597edecf5b..a7f3697b701e72 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
@@ -44,6 +44,14 @@ export async function visitSiteEditor(
 			window.wp.data
 				.dispatch( 'core/preferences' )
 				.set( 'core/edit-site', 'welcomeGuideStyles', false );
+
+			window.wp.data
+				.dispatch( 'core/preferences' )
+				.set( 'core/edit-site', 'welcomeGuidePage', false );
+
+			window.wp.data
+				.dispatch( 'core/preferences' )
+				.set( 'core/edit-site', 'welcomeGuideTemplate', false );
 		} );
 	}
 
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index 619fc8b9cf630b..b4e5f2373e098f 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -17,68 +17,23 @@ const SELECTORS = {
  * Skips the welcome guide popping up to first time users of the site editor
  */
 export async function disableSiteEditorWelcomeGuide() {
-	// This code prioritizes using the preferences store. However, performance
-	// tests run on older versions of the codebase where the preferences store
-	// doesn't exist. Some backwards compatibility has been built-in so that
-	// those tests continue to work there. This can be removed once WordPress
-	// 6.0 is released, as the older version used by the performance tests will
-	// then include the preferences store.
-	// See https://github.com/WordPress/gutenberg/pull/39300.
-	const isWelcomeGuideActive = await page.evaluate( () => {
-		// TODO - remove if statement after WordPress 6.0 is released.
-		if ( ! wp.data.select( 'core/preferences' ) ) {
-			return wp.data
-				.select( 'core/edit-site' )
-				.isFeatureActive( 'welcomeGuide' );
-		}
-
-		return !! wp.data
-			.select( 'core/preferences' )
-			?.get( 'core/edit-site', 'welcomeGuide' );
-	} );
-	const isWelcomeGuideStyesActive = await page.evaluate( () => {
-		// TODO - remove if statement after WordPress 6.0 is released.
-		if ( ! wp.data.select( 'core/preferences' ) ) {
-			return wp.data
-				.select( 'core/edit-site' )
-				.isFeatureActive( 'welcomeGuideStyles' );
-		}
-
-		return !! wp.data
-			.select( 'core/preferences' )
-			?.get( 'core/edit-site', 'welcomeGuideStyles' );
+	await page.evaluate( () => {
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuide', false );
+
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuideStyles', false );
+
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuidePage', false );
+
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuideTemplate', false );
 	} );
-
-	if ( isWelcomeGuideActive ) {
-		await page.evaluate( () => {
-			// TODO - remove if statement after WordPress 6.0 is released.
-			if ( ! wp.data.dispatch( 'core/preferences' ) ) {
-				wp.data
-					.dispatch( 'core/edit-site' )
-					.toggleFeature( 'welcomeGuide' );
-				return;
-			}
-
-			wp.data
-				.dispatch( 'core/preferences' )
-				.toggle( 'core/edit-site', 'welcomeGuide' );
-		} );
-	}
-
-	if ( isWelcomeGuideStyesActive ) {
-		await page.evaluate( () => {
-			// TODO - remove if statement after WordPress 6.0 is released.
-			if ( ! wp.data.dispatch( 'core/preferences' ) ) {
-				wp.data
-					.dispatch( 'core/edit-site' )
-					.toggleFeature( 'welcomeGuideStyles' );
-				return;
-			}
-			wp.data
-				.dispatch( 'core/preferences' )
-				.toggle( 'core/edit-site', 'welcomeGuideStyles' );
-		} );
-	}
 }
 
 /**
diff --git a/packages/edit-site/src/components/welcome-guide/editor.js b/packages/edit-site/src/components/welcome-guide/editor.js
index 2dcc1fa9b565b7..6b07228911bf81 100644
--- a/packages/edit-site/src/components/welcome-guide/editor.js
+++ b/packages/edit-site/src/components/welcome-guide/editor.js
@@ -30,7 +30,7 @@ export default function WelcomeGuideEditor() {
 
 	return (
 		<Guide
-			className="edit-site-welcome-guide"
+			className="edit-site-welcome-guide guide-editor"
 			contentLabel={ __( 'Welcome to the site editor' ) }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }
diff --git a/packages/edit-site/src/components/welcome-guide/index.js b/packages/edit-site/src/components/welcome-guide/index.js
index 4ad4d7d0eecefd..37804f1698c763 100644
--- a/packages/edit-site/src/components/welcome-guide/index.js
+++ b/packages/edit-site/src/components/welcome-guide/index.js
@@ -3,12 +3,16 @@
  */
 import WelcomeGuideEditor from './editor';
 import WelcomeGuideStyles from './styles';
+import WelcomeGuidePage from './page';
+import WelcomeGuideTemplate from './template';
 
 export default function WelcomeGuide() {
 	return (
 		<>
 			<WelcomeGuideEditor />
 			<WelcomeGuideStyles />
+			<WelcomeGuidePage />
+			<WelcomeGuideTemplate />
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/welcome-guide/page.js b/packages/edit-site/src/components/welcome-guide/page.js
new file mode 100644
index 00000000000000..2f162c0b2e84e9
--- /dev/null
+++ b/packages/edit-site/src/components/welcome-guide/page.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuidePage() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const isVisible = useSelect( ( select ) => {
+		const isPageActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuidePage'
+		);
+		const isEditorActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuide'
+		);
+		const { hasPageContentFocus } = select( editSiteStore );
+		return isPageActive && ! isEditorActive && hasPageContentFocus();
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	const heading = __( 'Editing your page' );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide guide-page"
+			contentLabel={ heading }
+			finishButtonText={ __( 'Continue' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuidePage' ) }
+			pages={ [
+				{
+					image: (
+						<video
+							className="edit-site-welcome-guide__video"
+							autoPlay
+							loop
+							muted
+							width="312"
+							height="240"
+						>
+							<source
+								src="https://s.w.org/images/block-editor/editing-your-page.mp4"
+								type="video/mp4"
+							/>
+						</video>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ heading }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'We’ve recently introduced the ability to edit pages within the site editor. You can switch to editing your template using the settings sidebar.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/welcome-guide/style.scss b/packages/edit-site/src/components/welcome-guide/style.scss
index 78cc70d0b426c5..e9e8b46a8aff2d 100644
--- a/packages/edit-site/src/components/welcome-guide/style.scss
+++ b/packages/edit-site/src/components/welcome-guide/style.scss
@@ -1,8 +1,22 @@
 .edit-site-welcome-guide {
 	width: 312px;
 
-	&__image {
+	&.guide-editor .edit-site-welcome-guide__image
+	&.guide-styles .edit-site-welcome-guide__image {
 		background: #00a0d2;
+	}
+
+	&.guide-page .edit-site-welcome-guide__video {
+		border-right: #3858e9 $grid-unit-20 solid;
+		border-top: #3858e9 $grid-unit-20 solid;
+	}
+
+	&.guide-template .edit-site-welcome-guide__video {
+		border-left: #3858e9 $grid-unit-20 solid;
+		border-top: #3858e9 $grid-unit-20 solid;
+	}
+
+	&__image {
 		margin: 0 0 $grid-unit-20;
 		> img {
 			display: block;
diff --git a/packages/edit-site/src/components/welcome-guide/styles.js b/packages/edit-site/src/components/welcome-guide/styles.js
index d60d41d7a1a4f8..e6ec75ed7243f3 100644
--- a/packages/edit-site/src/components/welcome-guide/styles.js
+++ b/packages/edit-site/src/components/welcome-guide/styles.js
@@ -38,7 +38,7 @@ export default function WelcomeGuideStyles() {
 
 	return (
 		<Guide
-			className="edit-site-welcome-guide"
+			className="edit-site-welcome-guide guide-styles"
 			contentLabel={ welcomeLabel }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }
diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js
new file mode 100644
index 00000000000000..cf0e723ab46090
--- /dev/null
+++ b/packages/edit-site/src/components/welcome-guide/template.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuideTemplate() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const isVisible = useSelect( ( select ) => {
+		const isTemplateActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuideTemplate'
+		);
+		const isEditorActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuide'
+		);
+		const { isPage, hasPageContentFocus } = select( editSiteStore );
+		return (
+			isTemplateActive &&
+			! isEditorActive &&
+			isPage() &&
+			! hasPageContentFocus()
+		);
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	const heading = __( 'Editing your template' );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide guide-template"
+			contentLabel={ heading }
+			finishButtonText={ __( 'Continue' ) }
+			onFinish={ () =>
+				toggle( 'core/edit-site', 'welcomeGuideTemplate' )
+			}
+			pages={ [
+				{
+					image: (
+						<video
+							className="edit-site-welcome-guide__video"
+							autoPlay
+							loop
+							muted
+							width="312"
+							height="240"
+						>
+							<source
+								src="https://s.w.org/images/block-editor/editing-your-template.mp4"
+								type="video/mp4"
+							/>
+						</video>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ heading }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'You’re now editing your page’s template. To switch back to editing your page you can click the back button in the toolbar.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index a4698c02aff90b..d013ded8b416e8 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -67,6 +67,8 @@ export function initializeEditor( id, settings ) {
 		keepCaretInsideBlock: false,
 		welcomeGuide: true,
 		welcomeGuideStyles: true,
+		welcomeGuidePage: true,
+		welcomeGuideTemplate: true,
 		showListViewByDefault: false,
 		showBlockBreadcrumbs: true,
 	} );