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 index 6b932e1e667df..a1a93e7361773 100644 --- 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 new file mode 100644 index 0000000000000..22760d2739637 --- /dev/null +++ b/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/images.js @@ -0,0 +1,44 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +export const CanvasImage = props => ( + +); + +export const EditorImage = props => ( + +); + +export const BlockLibraryImage = props => ( + +); + +export const DocumentationImage = props => ( + +); + +export const InserterIconImage = props => ( + { +); 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 index 1ad4b35351d11..6705ceead522a 100644 --- 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 (

- { __( 'Welcome to the Block Editor' ) } + { __( 'Welcome to the WordPress editor' ) }

+

{ __( 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' ) }

+

{ __( 'Make each block your own' ) }

+

{ __( '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.' ) }

+

- { __( 'Get to know the Block Library' ) } + { __( 'Get to know the block library' ) }

+

{ __experimentalCreateInterpolateElement( __( - 'All of the blocks available to you live in the Block Library. You’ll find it wherever you see the icon.' + 'All of the blocks available to you live in the block library. You’ll find it wherever you see the icon.' ), { InserterIconImage: ( - { + ), } ) }

+ + +

+ { __( 'Learn how to use the WordPress editor' ) } +

+ +

+ { __( 'New to the WordPress editor? Want to learn more about using it? ' ) } + + { __( "Here's a detailed guide." ) } + +

+ ); }