Add the WPCOM Block Editor NUX (#38511)

* Add a new WPCOM NUX plugin * Simplify the API handling * Improve code readability * REST fixes * Improve the state persistence and use modern PHP array notation * added welcomeGuide check * added disable for welcomeGuide * commented out nux loader Co-authored-by: Addison Stavlo <[email protected]>
Automattic · Feb 18, 2020 · 6732750 · 6732750
1 parent f7feb65
commit 6732750
Show file tree

Hide file tree

Showing 8 changed files with 326 additions and 0 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
@@ -215,3 +215,12 @@ function load_blog_posts_block() {
 	require_once __DIR__ . '/blog-posts-block/index.php';
 }
 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' );
diff --git a/...-plugin/wpcom-block-editor-nux/class-wp-rest-wpcom-block-editor-nux-status-controller.php b/...-plugin/wpcom-block-editor-nux/class-wp-rest-wpcom-block-editor-nux-status-controller.php
@@ -0,0 +1,94 @@
+<?php
+/**
+ * WP_REST_WPCOM_Block_Editor_NUX_Status_Controller file.
+ *
+ * @package A8C\FSE
+ */
+
+namespace A8C\FSE;
+
+/**
+ * Class WP_REST_WPCOM_Block_Editor_NUX_Status_Controller.
+ */
+class WP_REST_WPCOM_Block_Editor_NUX_Status_Controller extends \WP_REST_Controller {
+	/**
+	 * WP_REST_WPCOM_Block_Editor_NUX_Status_Controller constructor.
+	 */
+	public function __construct() {
+		$this->namespace = 'wpcom/v2';
+		$this->rest_base = 'block-editor/nux';
+	}
+
+	/**
+	 * Register available routes.
+	 */
+	public function register_rest_route() {
+		register_rest_route(
+			$this->namespace,
+			$this->rest_base,
+			array(
+				array(
+					'methods'             => \WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_nux_status' ),
+					'permission_callback' => array( $this, 'permission_callback' ),
+				),
+				array(
+					'methods'             => \WP_REST_Server::EDITABLE,
+					'callback'            => array( $this, 'update_nux_status' ),
+					'permission_callback' => array( $this, 'permission_callback' ),
+				),
+			)
+		);
+	}
+
+	/**
+	 * Callback to determine whether the request can proceed.
+	 *
+	 * @return boolean
+	 */
+	public function permission_callback() {
+		return is_user_logged_in();
+	}
+
+	/**
+	 * Check if NUX is enabled.
+	 *
+	 * @param mixed $nux_status Can be "enabled", "dismissed", or undefined.
+	 * @return boolean
+	 */
+	public function is_nux_enabled( $nux_status ) {
+		return 'enabled' === $nux_status;
+	}
+
+	/**
+	 * Return the WPCOM NUX status
+	 *
+	 * @return WP_REST_Response
+	 */
+	public function get_nux_status() {
+		if ( has_filter( 'wpcom_block_editor_nux_get_status' ) ) {
+			$nux_status = apply_filters( 'wpcom_block_editor_nux_get_status', false );
+		} elseif ( ! metadata_exists( 'user', get_current_user_id(), 'wpcom_block_editor_nux_status' ) ) {
+			$nux_status = 'enabled';
+		} else {
+			$nux_status = get_user_meta( get_current_user_id(), 'wpcom_block_editor_nux_status', true );
+		}
+		return rest_ensure_response( array( 'is_nux_enabled' => $this->is_nux_enabled( $nux_status ) ) );
+	}
+
+	/**
+	 * Update the WPCOM NUX status
+	 *
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response
+	 */
+	public function update_nux_status( $request ) {
+		$params     = $request->get_json_params();
+		$nux_status = $params['isNuxEnabled'] ? 'enabled' : 'dismissed';
+		if ( has_action( 'wpcom_block_editor_nux_update_status' ) ) {
+			do_action( 'wpcom_block_editor_nux_update_status', $nux_status );
+		}
+		update_user_meta( get_current_user_id(), 'wpcom_block_editor_nux_status', $nux_status );
+		return rest_ensure_response( array( 'is_nux_enabled' => $this->is_nux_enabled( $nux_status ) ) );
+	}
+}
diff --git a/...-editing/full-site-editing-plugin/wpcom-block-editor-nux/class-wpcom-block-editor-nux.php b/...-editing/full-site-editing-plugin/wpcom-block-editor-nux/class-wpcom-block-editor-nux.php
@@ -0,0 +1,65 @@
+<?php
+/**
+ * WPCOM Block Editor NUX file.
+ *
+ * @package A8C\FSE
+ */
+
+namespace A8C\FSE;
+
+/**
+ * Class WPCOM_Block_Editor_NUX
+ */
+class WPCOM_Block_Editor_NUX {
+	/**
+	 * Class instance.
+	 *
+	 * @var WPCOM_Block_Editor_NUX
+	 */
+	private static $instance = null;
+
+	/**
+	 * WPCOM_Block_Editor_NUX constructor.
+	 */
+	public function __construct() {
+		add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_script_and_style' ), 100 );
+		add_action( 'rest_api_init', array( $this, 'register_rest_api' ) );
+	}
+
+	/**
+	 * Creates instance.
+	 *
+	 * @return \A8C\FSE\WPCOM_Block_Editor_NUX
+	 */
+	public static function init() {
+		if ( is_null( self::$instance ) ) {
+			self::$instance = new self();
+		}
+		return self::$instance;
+	}
+
+	/**
+	 * Enqueue block editor assets.
+	 */
+	public function enqueue_script_and_style() {
+		$asset_file          = include plugin_dir_path( __FILE__ ) . 'dist/wpcom-block-editor-nux.asset.php';
+		$script_dependencies = $asset_file['dependencies'];
+		wp_enqueue_script(
+			'wpcom-block-editor-nux-script',
+			plugins_url( 'dist/wpcom-block-editor-nux.js', __FILE__ ),
+			is_array( $script_dependencies ) ? $script_dependencies : array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'dist/wpcom-block-editor-nux.js' ),
+			true
+		);
+	}
+
+	/**
+	 * Register the WPCOM Block Editor NUX endpoints.
+	 */
+	public function register_rest_api() {
+		require_once __DIR__ . '/class-wp-rest-wpcom-block-editor-nux-status-controller.php';
+		$controller = new WP_REST_WPCOM_Block_Editor_NUX_Status_Controller();
+		$controller->register_rest_route();
+	}
+}
+add_action( 'init', array( __NAMESPACE__ . '\WPCOM_Block_Editor_NUX', 'init' ) );
diff --git a/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/index.js b/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/index.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './src/store';
+import './src/disable-core-nux';
+import './src/wpcom-nux';
diff --git a/...full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/disable-core-nux.js b/...full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/disable-core-nux.js
@@ -0,0 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/**
+ * External dependencies
+ */
+import { select, dispatch, subscribe } from '@wordpress/data';
+import '@wordpress/nux'; //ensure nux store loads
+
+// Disable nux and welcome guide features from core.
+const unsubscribe = subscribe( () => {
+	dispatch( 'core/nux' ).disableTips();
+	if ( select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ) ) {
+		dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' );
+	}
+	unsubscribe();
+} );
+
+// Listen for these features being triggered to call dotcom nux instead.
+subscribe( () => {
+	if ( select( 'core/nux' ).areTipsEnabled() ) {
+		dispatch( 'core/nux' ).disableTips();
+		dispatch( 'automattic/nux' ).setWpcomNuxStatus( { isNuxEnabled: true } );
+	}
+	if ( select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ) ) {
+		dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' );
+		dispatch( 'automattic/nux' ).setWpcomNuxStatus( { isNuxEnabled: true } );
+	}
+} );
diff --git a/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/store.js b/apps/full-site-editing/full-site-editing-plugin/wpcom-block-editor-nux/src/store.js
@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { registerStore } from '@wordpress/data';
+
+const reducer = ( state = {}, { type, isNuxEnabled } ) =>
+	'WPCOM_BLOCK_EDITOR_NUX_SET_STATUS' === type ? { ...state, isNuxEnabled } : state;
+
+const actions = {
+	setWpcomNuxStatus: ( { isNuxEnabled, bypassApi } ) => {
+		if ( ! bypassApi ) {
+			apiFetch( {
+				path: '/wpcom/v2/block-editor/nux',
+				method: 'POST',
+				data: { isNuxEnabled },
+			} );
+		}
+		return {
+			type: 'WPCOM_BLOCK_EDITOR_NUX_SET_STATUS',
+			isNuxEnabled,
+		};
+	},
+};
+
+const selectors = {
+	isWpcomNuxEnabled: state => state.isNuxEnabled,
+};
+
+registerStore( 'automattic/nux', {
+	reducer,
+	actions,
+	selectors,
+	persist: true,
+} );
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
@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { 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';
+
+function WpcomNux() {
+	const isWpcomNuxEnabled = useSelect( select => select( 'automattic/nux' ).isWpcomNuxEnabled() );
+	const { setWpcomNuxStatus } = useDispatch( 'automattic/nux' );
+
+	// On mount check if the WPCOM NUX status exists in state, otherwise fetch it from the API.
+	useEffect( () => {
+		if ( typeof isWpcomNuxEnabled !== 'undefined' ) {
+			return;
+		}
+		const fetchWpcomNuxStatus = async () => {
+			const response = await apiFetch( { path: '/wpcom/v2/block-editor/nux' } );
+			setWpcomNuxStatus( { isNuxEnabled: response.is_nux_enabled, bypassApi: true } );
+		};
+		fetchWpcomNuxStatus();
+	}, [ isWpcomNuxEnabled, setWpcomNuxStatus ] );
+
+	if ( ! isWpcomNuxEnabled ) {
+		return null;
+	}
+
+	const dismissWpcomNux = () => setWpcomNuxStatus( { isNuxEnabled: false } );
+
+	return (
+		<Guide
+			className="edit-post-welcome-guide"
+			finishButtonText={ __( 'Get started' ) }
+			onFinish={ dismissWpcomNux }
+		>
+			<GuidePage className="edit-post-welcome-guide__page">
+				<h1 className="edit-post-welcome-guide__heading">
+					{ __( 'Welcome to the Block Editor' ) }
+				</h1>
+				<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>
+				<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' ) }
+				</h1>
+				<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.'
+						),
+						{
+							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"
+								/>
+							),
+						}
+					) }
+				</p>
+			</GuidePage>
+		</Guide>
+	);
+}
+
+registerPlugin( 'wpcom-block-editor-nux', {
+	render: () => <WpcomNux />,
+} );
diff --git a/apps/full-site-editing/package.json b/apps/full-site-editing/package.json
@@ -33,6 +33,9 @@
 		"global-styles": "calypso-build --source='global-styles'",
 		"build:global-styles": "NODE_ENV=production npm run global-styles",
 		"dev:global-styles": "npm run global-styles",
+		"wpcom-block-editor-nux": "calypso-build --source='wpcom-block-editor-nux'",
+		"dev:wpcom-block-editor-nux": "npm run wpcom-block-editor-nux",
+		"build:wpcom-block-editor-nux": "NODE_ENV=production npm run wpcom-block-editor-nux",
 		"dev": "node bin/npm-run-build.js --dev",
 		"build": "node bin/npm-run-build.js --build",
 		"test:js": "npx wp-scripts test-unit-js --config='bin/js-unit-config.js'",