Page Content Focus: Add welcome guides

packages/components/CHANGELOG.md

@@ -8,6 +8,7 @@
 -   `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)).
 -   `Button`: Introduce `size` prop with `default`, `compact`, and `small` variants ([#51842](https://github.com/WordPress/gutenberg/pull/51842)).
 -   `ItemGroup`: Update button focus state styles to target `:focus-visible` rather than `:focus`. ([#51787](https://github.com/WordPress/gutenberg/pull/51787)).
+-   `Guide`: Don't show Close button when there is only one page, and use default button and accent/theme styling ([#52014](https://github.com/WordPress/gutenberg/pull/52014)).
 
 ### Bug Fix
 

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

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 }

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' ),

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,14 +78,18 @@
 			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));
 		}
 	}
 }
 
 .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;
 	}

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 );
 		} );
 	}
 

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' );
-		} );
-	}
 }
 
 /**

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' ) }

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 />
 		</>
 	);
 }

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>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

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;

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' ) }