Deprecate '@wordpress/nux' package (WordPress#18981)

Author: noisysocks

lib/client-assets.php

@@ -434,8 +434,6 @@ function gutenberg_register_packages_styles( &$styles ) {
  * @since 0.1.0
  */
 function gutenberg_enqueue_block_editor_assets() {
-	global $wp_scripts;
-
 	wp_add_inline_script(
 		'wp-api-fetch',
 		sprintf(
@@ -449,26 +447,6 @@ function gutenberg_enqueue_block_editor_assets() {
 		'after'
 	);
 
-	// TEMPORARY: Core does not (yet) provide persistence migration from the
-	// introduction of the block editor and still calls the data plugins.
-	// We unset the existing inline scripts first.
-	$wp_scripts->registered['wp-data']->extra['after'] = array();
-	wp_add_inline_script(
-		'wp-data',
-		implode(
-			"\n",
-			array(
-				'( function() {',
-				'	var userId = ' . get_current_user_ID() . ';',
-				'	var storageKey = "WP_DATA_USER_" + userId;',
-				'	wp.data',
-				'		.use( wp.data.plugins.persistence, { storageKey: storageKey } );',
-				'	wp.data.plugins.persistence.__unstableMigrate( { storageKey: storageKey } );',
-				'} )();',
-			)
-		)
-	);
-
 	if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) {
 		$live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD;
 

package-lock.json

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { merge, isPlainObject, get } from 'lodash';
+import { merge, isPlainObject, get, has } from 'lodash';
 
 /**
  * Internal dependencies
@@ -208,26 +208,40 @@ const persistencePlugin = function( registry, pluginOptions ) {
 };
 
 /**
- * Deprecated: Remove this function once WordPress 5.3 is released.
+ * Deprecated: Remove this function and the code in WordPress Core that calls
+ * it once WordPress 5.4 is released.
  */
 
 persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
 	const persistence = createPersistenceInterface( pluginOptions );
 
-	// Preferences migration to introduce the block editor module
-	const insertUsage = get( persistence.get(), [
-		'core/editor',
-		'preferences',
-		'insertUsage',
-	] );
+	const state = persistence.get();
 
+	// Migrate 'insertUsage' from 'core/editor' to 'core/block-editor'
+	const insertUsage = get( state, [ 'core/editor', 'preferences', 'insertUsage' ] );
 	if ( insertUsage ) {
 		persistence.set( 'core/block-editor', {
 			preferences: {
 				insertUsage,
 			},
 		} );
 	}
+
+	// Migrate 'areTipsEnabled' from 'core/nux' to 'showWelcomeGuide' in 'core/edit-post'
+	const areTipsEnabled = get( state, [ 'core/nux', 'preferences', 'areTipsEnabled' ] );
+	const hasWelcomeGuide = has( state, [ 'core/edit-post', 'preferences', 'features', 'welcomeGuide' ] );
+	if ( areTipsEnabled !== undefined && ! hasWelcomeGuide ) {
+		persistence.set(
+			'core/edit-post',
+			merge( state[ 'core/edit-post' ], {
+				preferences: {
+					features: {
+						welcomeGuide: areTipsEnabled,
+					},
+				},
+			} )
+		);
+	}
 };
 
 export default persistencePlugin;

packages/data/src/plugins/persistence/index.js

@@ -18,7 +18,7 @@ export async function createNewPost( {
 	title,
 	content,
 	excerpt,
-	enableTips = false,
+	showWelcomeGuide = false,
 } = {} ) {
 	const query = addQueryArgs( '', {
 		post_type: postType,
@@ -29,13 +29,12 @@ export async function createNewPost( {
 
 	await visitAdminPage( 'post-new.php', query );
 
-	const areTipsEnabled = await page.evaluate( () => wp.data.select( 'core/nux' ).areTipsEnabled() );
+	const isWelcomeGuideActive = await page.evaluate( () =>
+		wp.data.select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ) );
 
-	if ( enableTips !== areTipsEnabled ) {
-		await page.evaluate( ( _enableTips ) => {
-			const action = _enableTips ? 'enableTips' : 'disableTips';
-			wp.data.dispatch( 'core/nux' )[ action ]();
-		}, enableTips );
+	if ( showWelcomeGuide !== isWelcomeGuideActive ) {
+		await page.evaluate( () =>
+			wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' ) );
 
 		await page.reload();
 	}

packages/e2e-test-utils/src/create-new-post.js

@@ -8,7 +8,7 @@ describe( 'New User Experience (NUX)', () => {
 		let welcomeGuideText, welcomeGuide;
 
 		// Create a new post as a first-time user
-		await createNewPost( { enableTips: true } );
+		await createNewPost( { showWelcomeGuide: true } );
 
 		// Guide should be on page 1 of 3
 		welcomeGuideText = await page.$eval( '.edit-post-welcome-guide', ( element ) => element.innerText );
@@ -68,7 +68,7 @@ describe( 'New User Experience (NUX)', () => {
 		let welcomeGuide;
 
 		// Create a new post as a first-time user
-		await createNewPost( { enableTips: true } );
+		await createNewPost( { showWelcomeGuide: true } );
 
 		// Guide should be open
 		welcomeGuide = await page.$( '.edit-post-welcome-guide' );

packages/e2e-tests/specs/editor/various/nux.test.js

@@ -38,7 +38,6 @@
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
-		"@wordpress/nux": "file:../nux",
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",

packages/edit-post/package.json

@@ -12,19 +12,19 @@ import { __experimentalCreateInterpolateElement } from '@wordpress/element';
 import { CanvasImage, EditorImage, BlockLibraryImage, InserterIconImage } from './images';
 
 export default function WelcomeGuide() {
-	const areTipsEnabled = useSelect( ( select ) => select( 'core/nux' ).areTipsEnabled(), [] );
+	const isActive = useSelect( ( select ) => select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ), [] );
 
-	const { disableTips } = useDispatch( 'core/nux' );
+	const { toggleFeature } = useDispatch( 'core/edit-post' );
 
-	if ( ! areTipsEnabled ) {
+	if ( ! isActive ) {
 		return null;
 	}
 
 	return (
 		<Guide
 			className="edit-post-welcome-guide"
 			finishButtonText={ __( 'Get started' ) }
-			onFinish={ disableTips }
+			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
 		>
 
 			<GuidePage className="edit-post-welcome-guide__page">

packages/edit-post/src/components/welcome-guide/index.js

@@ -4,7 +4,6 @@
 import '@wordpress/core-data';
 import '@wordpress/block-editor';
 import '@wordpress/editor';
-import '@wordpress/nux';
 import '@wordpress/viewport';
 import '@wordpress/notices';
 import { registerCoreBlocks, __experimentalRegisterExperimentalCoreBlocks } from '@wordpress/block-library';

packages/edit-post/src/index.js

@@ -6,10 +6,10 @@ import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function WelcomeGuideMenuItem() {
-	const { enableTips } = useDispatch( 'core/nux' );
+	const { toggleFeature } = useDispatch( 'core/edit-post' );
 
 	return (
-		<MenuItem onClick={ enableTips }>
+		<MenuItem onClick={ () => toggleFeature( 'welcomeGuide' ) }>
 			{ __( 'Welcome Guide' ) }
 		</MenuItem>
 	);

packages/edit-post/src/plugins/welcome-guide-menu-item/index.js

@@ -9,6 +9,7 @@ export const PREFERENCES_DEFAULTS = {
 	features: {
 		fixedToolbar: false,
 		showInserterHelpPanel: true,
+		welcomeGuide: true,
 	},
 	pinnedPluginItems: {},
 	hiddenBlockTypes: [],

packages/edit-post/src/store/defaults.js

@@ -43,7 +43,6 @@
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
-		"@wordpress/nux": "file:../nux",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",

packages/editor/package.json

@@ -5,7 +5,6 @@ import '@wordpress/block-editor';
 import '@wordpress/blocks';
 import '@wordpress/core-data';
 import '@wordpress/notices';
-import '@wordpress/nux';
 import '@wordpress/rich-text';
 import '@wordpress/viewport';
 

packages/editor/src/index.js

@@ -1,3 +1,7 @@
+# 3.1.0 (Unreleased)
+
+- The `@wordpress/nux` package has been deprecated. Please use the `Guide` component in `@wordpress/components` to show a user guide.
+
 ## 3.0.6 (2019-01-03)
 
 ## 3.0.5 (2018-12-12)

packages/nux/CHANGELOG.md

@@ -25,6 +25,7 @@
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
+		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"lodash": "^4.17.15",

packages/nux/package.json

@@ -1,6 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * Internal dependencies
  */
 import './store';
 
 export { default as DotTip } from './components/dot-tip';
+
+deprecated( 'wp.nux', {
+	hint: 'wp.components.Guide can be used to show a user guide.',
+} );