Creator: Add welcome guide on first load. (#97)

public_html/wp-content/plugins/pattern-creator/package.json

@@ -36,6 +36,7 @@
 		"@wordpress/icons": "4.0.1",
 		"@wordpress/interface": "3.1.2",
 		"@wordpress/plugins": "3.1.1",
+		"@wordpress/primitives": "2.1.1",
 		"@wordpress/url": "3.1.1",
 		"classnames": "2.3.1",
 		"lodash": "4.17.21"

public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/index.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { Guide } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as editPostStore } from '@wordpress/edit-post';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ImageCollectionImage, PatternEditorImage, PatternsImage } from './images';
+import './style.css';
+
+/**
+ * Module constants
+ */
+export const GUIDE_ID = 'wporgWelcomeGuide';
+
+export default function WelcomeGuide() {
+	const isActive = useSelect( ( select ) => select( editPostStore ).isFeatureActive( GUIDE_ID ), [] );
+
+	const { toggleFeature } = useDispatch( editPostStore );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return (
+		<Guide
+			className="pattern-creator-welcome-guide"
+			contentLabel={ __( 'Welcome to the pattern creator', 'wporg-patterns' ) }
+			finishButtonText={ __( 'Done', 'wporg-patterns' ) }
+			onFinish={ () => toggleFeature( GUIDE_ID ) }
+			pages={ [
+				{
+					image: (
+						<div className="pattern-creator-welcome-guide__image circle-background">
+							<PatternsImage />
+						</div>
+					),
+					content: (
+						<>
+							<h1 className="pattern-creator-welcome-guide__title">
+								{ __( 'Welcome to the pattern editor', 'wporg-patterns' ) }
+							</h1>
+							<p>
+								{ __(
+									'Mix and match WordPress blocks together to create unique and compelling designs.',
+									'wporg-patterns'
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<div className="pattern-creator-welcome-guide__image diamond-background">
+							<ImageCollectionImage />
+						</div>
+					),
+					content: (
+						<>
+							<h1 className="pattern-creator-welcome-guide__title">
+								{ __( 'Use our collection of license-free images', 'wporg-patterns' ) }
+							</h1>
+							<p>
+								{ __(
+									'Don’t worry about licensing. We’ve provided a collection of worry-free images and media for you to use.',
+									'wporg-patterns'
+								) }
+							</p>
+						</>
+					),
+				},
+				{
+					image: (
+						<div className="pattern-creator-welcome-guide__image triangles-background">
+							<PatternEditorImage />
+						</div>
+					),
+					content: (
+						<>
+							<h1 className="pattern-creator-welcome-guide__title">
+								{ __( 'Submit your pattern to the directory', 'wporg-patterns' ) }
+							</h1>
+							<p>
+								{ __(
+									'Choose a category and share your pattern with the world. All patterns in the directory are available from any WordPress site.',
+									'wporg-patterns'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

public_html/wp-content/plugins/pattern-creator/src/components/welcome-guide/style.css

@@ -0,0 +1,61 @@
+
+.pattern-creator-welcome-guide {
+	max-width: 320px;
+}
+
+.pattern-creator-welcome-guide__image {
+	margin-bottom: calc(var(--grid-unit) / 2); /* Pushes the dot controls away */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #1d2327;
+	height: 240px;
+	overflow: hidden;
+}
+
+/* Change circle indicator color */
+.pattern-creator-welcome-guide .components-guide__page-control [aria-current="step"] circle {
+	fill: var(--wp-admin-theme-color);
+}
+
+/* Change the close button color */
+.pattern-creator-welcome-guide .components-modal__header button {
+	background: #000;
+	color: #fff;
+}
+
+/* Change the link color */
+.pattern-creator-welcome-guide .components-button.components-guide__forward-button {
+	color: var(--wp-admin-theme-color);
+}
+
+.pattern-creator-welcome-guide__image svg {
+	position: absolute;
+}
+
+.pattern-creator-welcome-guide__title,
+.pattern-creator-welcome-guide p {
+	margin: 0;
+	padding: 0 calc(var(--grid-unit) * 2);
+}
+
+.pattern-creator-welcome-guide__title {
+	margin: var(--grid-unit) 0;
+	font-size: 20px;
+	font-weight: 600;
+	line-height: normal;
+}
+
+.pattern-creator-welcome-guide p {
+	margin-bottom: var(--grid-unit);
+	font-size: 14px;
+}
+
+.pattern-creator-welcome-guide__link {
+	margin-top: calc(var(--grid-unit) / 2);
+	display: block;
+}
+
+.pattern-creator-welcome-guide .components-guide__footer > button {
+	padding: 6px 12px;
+}

public_html/wp-content/plugins/pattern-creator/src/index.js

@@ -17,11 +17,12 @@ import './plugins/category-settings-panel';
 import './plugins/keyword-settings-panel';
 import './plugins/block-scope-settings-panel';
 
-import './plugins/inspector-controls-modifier';
+import './plugins/gutenberg-feature-remover';
 import './plugins/main-dashboard-button';
 import './plugins/save-post-modifier';
 import './plugins/update-inspector-panel-text';
 import './plugins/viewport-header-control';
+import './plugins/welcome-guide-plugin';
 import './style.css';
 
 // Set up API middleware.

public_html/wp-content/plugins/pattern-creator/src/plugins/inspector-controls-modifier.js → public_html/wp-content/plugins/pattern-creator/src/plugins/gutenberg-feature-remover.js

@@ -6,8 +6,8 @@ import { store } from '@wordpress/edit-post';
 import { useEffect } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 
-const InspectorControlsModifier = () => {
-	useEffect( () => {
+const GutenbergEditorModifier = () => {
+	const removeDocumentPanelComponents = () => {
 		const { removeEditorPanel } = dispatch( store );
 
 		// We don't want the post-status control
@@ -19,11 +19,15 @@ const InspectorControlsModifier = () => {
 		// Turn off the custom taxonomy panels and replace with our own
 		removeEditorPanel( 'taxonomy-panel-wporg-pattern-category' );
 		removeEditorPanel( 'taxonomy-panel-wporg-pattern-keyword' );
+	};
+
+	useEffect( () => {
+		removeDocumentPanelComponents();
 	}, [] );
 
 	return null;
 };
 
-registerPlugin( 'inspector-controls-modifier', {
-	render: () => <InspectorControlsModifier />,
+registerPlugin( 'gutenberg-editor-modifier', {
+	render: () => <GutenbergEditorModifier />,
 } );

public_html/wp-content/plugins/pattern-creator/src/plugins/welcome-guide-plugin.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch, select } from '@wordpress/data';
+import { registerPlugin } from '@wordpress/plugins';
+import { store } from '@wordpress/edit-post';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuide, { GUIDE_ID } from '../components/welcome-guide';
+
+registerPlugin( 'welcome-guide-plugin', {
+	render: () => {
+		// Turn off the default welcome guide
+		if ( select( store ).isFeatureActive( 'welcomeGuide' ) ) {
+			dispatch( store ).toggleFeature( 'welcomeGuide' );
+		}
+
+		const features = select( store ).getPreference( 'features' );
+
+		if ( features[ GUIDE_ID ] === undefined ) {
+			dispatch( store ).toggleFeature( GUIDE_ID );
+		}
+
+		return <WelcomeGuide />;
+	},
+} );