Enable Gutenberg NUX with Gutenberg copy (#39846)

* Updates NUX with latest Gutenberg copy * Includes images for copy * Reference wpcom support instead of WordPress.org * Load the wpcom nux
Automattic · Mar 3, 2020 · 8cb9bff · 8cb9bff
1 parent 91a85f6
commit 8cb9bff
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 14 deletions.
diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
@@ -216,11 +216,10 @@ function load_blog_posts_block() {
 }
 add_action( 'plugins_loaded', __NAMESPACE__ . '\load_blog_posts_block' );
 
-// @TODO - Uncomment once ready to deploy wpcom NUX.
 /**
  * Load WPCOM Block Editor NUX
  */
-// function load_wpcom_block_editor_nux() {
-// 	require_once __DIR__ . '/wpcom-block-editor-nux/class-wpcom-block-editor-nux.php';
-// }
-// add_action( 'plugins_loaded', __NAMESPACE__ . '\load_wpcom_block_editor_nux' );
+function load_wpcom_block_editor_nux() {
+	require_once __DIR__ . '/wpcom-block-editor-nux/class-wpcom-block-editor-nux.php';
+}
+add_action( 'plugins_loaded', __NAMESPACE__ . '\load_wpcom_block_editor_nux' );
diff --git a/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/images.js b/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/images.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/wpcom-nux.js b/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/wpcom-nux.js
@@ -4,12 +4,23 @@
  * External dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { Guide, GuidePage } from '@wordpress/components';
+import { ExternalLink, Guide, GuidePage } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, __experimentalCreateInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
 
+/**
+ * Internal dependencies
+ */
+import {
+	CanvasImage,
+	EditorImage,
+	BlockLibraryImage,
+	DocumentationImage,
+	InserterIconImage,
+} from './images';
+
 function WpcomNux() {
 	const isWpcomNuxEnabled = useSelect( select => select( 'automattic/nux' ).isWpcomNuxEnabled() );
 	const { setWpcomNuxStatus } = useDispatch( 'automattic/nux' );
@@ -32,51 +43,70 @@ function WpcomNux() {
 
 	const dismissWpcomNux = () => setWpcomNuxStatus( { isNuxEnabled: false } );
 
+	/**
+	 * Currently, the Guide content is mostly copied from Gutenberg. This can be
+	 * updated if/as we have new designs for the NUX on wpcom.
+	 */
 	return (
 		<Guide
 			className="edit-post-welcome-guide"
+			contentLabel={ __( 'Welcome to the WordPress editor' ) }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ dismissWpcomNux }
 		>
 			<GuidePage className="edit-post-welcome-guide__page">
 				<h1 className="edit-post-welcome-guide__heading">
-					{ __( 'Welcome to the Block Editor' ) }
+					{ __( 'Welcome to the WordPress editor' ) }
 				</h1>
+				<CanvasImage className="edit-post-welcome-guide__image" />
 				<p className="edit-post-welcome-guide__text">
 					{ __(
 						'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.'
 					) }
 				</p>
 			</GuidePage>
+
 			<GuidePage className="edit-post-welcome-guide__page">
 				<h1 className="edit-post-welcome-guide__heading">{ __( 'Make each block your own' ) }</h1>
+				<EditorImage className="edit-post-welcome-guide__image" />
 				<p className="edit-post-welcome-guide__text">
 					{ __(
 						'Each block comes with its own set of controls for changing things like color, width, and alignment. These will show and hide automatically when you have a block selected.'
 					) }
 				</p>
 			</GuidePage>
+
 			<GuidePage className="edit-post-welcome-guide__page">
 				<h1 className="edit-post-welcome-guide__heading">
-					{ __( 'Get to know the Block Library' ) }
+					{ __( 'Get to know the block library' ) }
 				</h1>
+				<BlockLibraryImage className="edit-post-welcome-guide__image" />
 				<p className="edit-post-welcome-guide__text">
 					{ __experimentalCreateInterpolateElement(
 						__(
-							'All of the blocks available to you live in the Block Library. You’ll find it wherever you see the <InserterIconImage /> icon.'
+							'All of the blocks available to you live in the block library. You’ll find it wherever you see the <InserterIconImage /> icon.'
 						),
 						{
 							InserterIconImage: (
-								<img
-									alt={ __( 'inserter' ) }
-									src="data:image/svg+xml;charset=utf8,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.824 0C3.97 0 0 3.97 0 8.824c0 4.853 3.97 8.824 8.824 8.824 4.853 0 8.824-3.971 8.824-8.824S13.677 0 8.824 0zM7.94 5.294v2.647H5.294v1.765h2.647v2.647h1.765V9.706h2.647V7.941H9.706V5.294H7.941zm-6.176 3.53c0 3.882 3.176 7.059 7.059 7.059 3.882 0 7.059-3.177 7.059-7.06 0-3.882-3.177-7.058-7.06-7.058-3.882 0-7.058 3.176-7.058 7.059z' fill='%234A4A4A'/%3E%3Cmask id='a' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.824 0C3.97 0 0 3.97 0 8.824c0 4.853 3.97 8.824 8.824 8.824 4.853 0 8.824-3.971 8.824-8.824S13.677 0 8.824 0zM7.94 5.294v2.647H5.294v1.765h2.647v2.647h1.765V9.706h2.647V7.941H9.706V5.294H7.941zm-6.176 3.53c0 3.882 3.176 7.059 7.059 7.059 3.882 0 7.059-3.177 7.059-7.06 0-3.882-3.177-7.058-7.06-7.058-3.882 0-7.058 3.176-7.058 7.059z' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23444' d='M0 0h17.644v17.644H0z'/%3E%3C/g%3E%3C/svg%3E"
-									className="edit-post-welcome-guide__inserter-icon"
-								/>
+								<InserterIconImage className="edit-post-welcome-guide__inserter-icon" />
 							),
 						}
 					) }
 				</p>
 			</GuidePage>
+
+			<GuidePage className="edit-post-welcome-guide__page">
+				<h1 className="edit-post-welcome-guide__heading">
+					{ __( 'Learn how to use the WordPress editor' ) }
+				</h1>
+				<DocumentationImage className="edit-post-welcome-guide__image" />
+				<p className="edit-post-welcome-guide__text">
+					{ __( 'New to the WordPress editor? Want to learn more about using it? ' ) }
+					<ExternalLink href={ __( 'https://support.wordpress.com/wordpress-editor/' ) }>
+						{ __( "Here's a detailed guide." ) }
+					</ExternalLink>
+				</p>
+			</GuidePage>
 		</Guide>
 	);
 }