NUX: bootstrap a NUX module

.eslintrc.json

@@ -118,6 +118,10 @@
 				"selector": "ImportDeclaration[source.value=/^data$/]",
 				"message": "Use @wordpress/data as import path instead."
 			},
+			{
+				"selector": "ImportDeclaration[source.value=/^nux$/]",
+				"message": "Use @wordpress/nux as import path instead."
+			},
 			{
 				"selector": "ImportDeclaration[source.value=/^utils$/]",
 				"message": "Use @wordpress/utils as import path instead."

bin/build-plugin-zip.sh

@@ -105,6 +105,7 @@ zip -r gutenberg.zip \
 	hooks/build/*.{js,map} \
 	i18n/build/*.{js,map} \
 	data/build/*.{js,map} \
+	nux/build/*.{js,map} \
 	utils/build/*.{js,map} \
 	blocks/build/*.css \
 	components/build/*.css \

data/index.js

@@ -4,6 +4,11 @@
 import { createStore, combineReducers } from 'redux';
 import { flowRight } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+export { withRehydratation, loadAndPersist } from './persist';
+
 /**
  * Module constants
  */

editor/store/persist.js → data/persist.js

@@ -8,15 +8,16 @@ import { get } from 'lodash';
  *
  * @param {Function}   reducer     The reducer to enhance
  * @param {String}     reducerKey  The reducer key to persist
+ * @param {String}     storageKey  The storage key to use
  *
  * @return {Function}              Enhanced reducer
  */
-export function withRehydratation( reducer, reducerKey ) {
+export function withRehydratation( reducer, reducerKey, storageKey ) {
 	// EnhancedReducer with auto-rehydration
 	const enhancedReducer = ( state, action ) => {
 		const nextState = reducer( state, action );
 
-		if ( action.type === 'REDUX_REHYDRATE' ) {
+		if ( action.type === 'REDUX_REHYDRATE' && action.storageKey === storageKey ) {
 			return {
 				...nextState,
 				[ reducerKey ]: action.payload,
@@ -51,6 +52,7 @@ export function loadAndPersist( store, reducerKey, storageKey, defaults = {} ) {
 		store.dispatch( {
 			type: 'REDUX_REHYDRATE',
 			payload: persistedState,
+			storageKey,
 		} );
 	}
 

editor/store/test/persist.js → data/test/persist.js

@@ -17,7 +17,7 @@ describe( 'loadAndPersist', () => {
 				preferences: { ribs: true },
 			};
 		};
-		const store = createStore( withRehydratation( reducer, 'preferences' ) );
+		const store = createStore( withRehydratation( reducer, 'preferences', storageKey ) );
 		loadAndPersist(
 			store,
 			'preferences',
@@ -39,7 +39,7 @@ describe( 'loadAndPersist', () => {
 				preferences: { ribs: true },
 			};
 		};
-		const store = createStore( withRehydratation( reducer, 'preferences' ) );
+		const store = createStore( withRehydratation( reducer, 'preferences', storageKey ) );
 		loadAndPersist(
 			store,
 			'preferences',
@@ -68,7 +68,7 @@ describe( 'loadAndPersist', () => {
 		// store preferences without the `counter` default
 		window.localStorage.setItem( storageKey, JSON.stringify( {} ) );
 
-		const store = createStore( withRehydratation( reducer, 'preferences' ) );
+		const store = createStore( withRehydratation( reducer, 'preferences', storageKey ) );
 		loadAndPersist(
 			store,
 			'preferences',
@@ -100,7 +100,7 @@ describe( 'loadAndPersist', () => {
 
 		window.localStorage.setItem( storageKey, JSON.stringify( { counter: 1 } ) );
 
-		const store = createStore( withRehydratation( reducer, 'preferences' ) );
+		const store = createStore( withRehydratation( reducer, 'preferences', storageKey ) );
 
 		loadAndPersist(
 			store,

editor/assets/stylesheets/_z-index.scss

@@ -44,6 +44,7 @@ $z-layers: (
 	// #adminmenuwrap { z-index: 9990 }
 	'.components-popover': 1000000,
 	'.components-autocomplete__results': 1000000,
+	'.nux-dot-tip': 1000000,
 	'.blocks-url-input__suggestions': 9999,
 );
 

editor/components/provider/index.js

@@ -15,6 +15,7 @@ import {
 	DropZoneProvider,
 	SlotFillProvider,
 } from '@wordpress/components';
+import { Provider as NuxProvider } from '@wordpress/nux';
 
 /**
  * Internal Dependencies
@@ -120,6 +121,11 @@ class EditorProvider extends Component {
 			[
 				DropZoneProvider,
 			],
+
+			// Nux provider
+			[
+				NuxProvider,
+			],
 		];
 
 		const createEditorElement = flow(

editor/edit-post/modes/visual-editor/inserter.js

@@ -12,6 +12,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { IconButton, withContext } from '@wordpress/components';
 import { Component, compose } from '@wordpress/element';
 import { createBlock, BlockIcon } from '@wordpress/blocks';
+import { DotTip } from '@wordpress/nux';
 
 /**
  * Internal dependencies
@@ -65,7 +66,11 @@ export class VisualEditorInserter extends Component {
 			>
 				<Inserter
 					insertIndex={ blockCount }
-					position="top right" />
+					position="top right"
+				/>
+				<DotTip id="core/editor.inserter">
+					{ __( 'This the inserter, click the "plus" button to open the inserter and add content blocks' ) }
+				</DotTip>
 				{ mostFrequentlyUsedBlocks && mostFrequentlyUsedBlocks.map( ( block ) => (
 					<IconButton
 						key={ 'frequently_used_' + block.name }

editor/edit-post/modes/visual-editor/style.scss

@@ -56,6 +56,7 @@
 	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
 	margin: 0 auto;
 	clear: both;
+	position: relative;
 
 	padding: $block-padding;
 	padding-left: $block-padding - 8px; // Offset by left button's own padding
@@ -85,6 +86,12 @@
 			@include button-style__disabled;
 		}
 	}
+
+	.nux-dot-tip {
+		position: absolute;
+		top: 10px;
+		left: 70px;
+	}
 }
 
 .editor-visual-editor__inserter-block-icon {

editor/store/index.js

@@ -1,26 +1,26 @@
 /**
  * WordPress Dependencies
  */
-import { registerReducer } from '@wordpress/data';
+import { registerReducer, withRehydratation, loadAndPersist } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { PREFERENCES_DEFAULTS } from './defaults';
 import reducer from './reducer';
-import { withRehydratation, loadAndPersist } from './persist';
 import enhanceWithBrowserSize from './browser';
 import applyMiddlewares from './middlewares';
 
 /**
  * Module Constants
  */
 const STORAGE_KEY = `GUTENBERG_PREFERENCES_${ window.userSettings.uid }`;
+const REDUCER_KEY = 'preferences';
 
 const store = applyMiddlewares(
-	registerReducer( 'core/editor', withRehydratation( reducer, 'preferences' ) )
+	registerReducer( 'core/editor', withRehydratation( reducer, REDUCER_KEY, STORAGE_KEY ) )
 );
-loadAndPersist( store, 'preferences', STORAGE_KEY, PREFERENCES_DEFAULTS );
+loadAndPersist( store, REDUCER_KEY, STORAGE_KEY, PREFERENCES_DEFAULTS );
 enhanceWithBrowserSize( store );
 
 export default store;

lib/client-assets.php

@@ -144,6 +144,12 @@ function gutenberg_register_scripts_and_styles() {
 		array( 'wp-element', 'wp-i18n', 'wp-utils', 'wp-hooks', 'wp-api-request' ),
 		filemtime( gutenberg_dir_path() . 'components/build/index.js' )
 	);
+	wp_register_script(
+		'wp-nux',
+		gutenberg_url( 'nux/build/index.js' ),
+		array( 'wp-element', 'wp-components', 'wp-data', 'wp-i18n' ),
+		filemtime( gutenberg_dir_path() . 'nux/build/index.js' )
+	);
 	wp_register_script(
 		'wp-blocks',
 		gutenberg_url( 'blocks/build/index.js' ),
@@ -168,6 +174,14 @@ function gutenberg_register_scripts_and_styles() {
 	);
 	wp_style_add_data( 'wp-components', 'rtl', 'replace' );
 
+	wp_register_style(
+		'wp-nux',
+		gutenberg_url( 'nux/build/style.css' ),
+		array( 'wp-components' ),
+		filemtime( gutenberg_dir_path() . 'nux/build/style.css' )
+	);
+	wp_style_add_data( 'wp-nux', 'rtl', 'replace' );
+
 	wp_register_style(
 		'wp-blocks',
 		gutenberg_url( 'blocks/build/style.css' ),
@@ -649,7 +663,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	wp_enqueue_script(
 		'wp-editor',
 		gutenberg_url( 'editor/build/index.js' ),
-		array( 'jquery', 'wp-api', 'wp-data', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components', 'wp-utils', 'word-count', 'editor', 'heartbeat' ),
+		array( 'jquery', 'wp-api', 'wp-data', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components', 'wp-utils', 'wp-nux', 'word-count', 'editor', 'heartbeat' ),
 		filemtime( gutenberg_dir_path() . 'editor/build/index.js' ),
 		true // enqueue in the footer.
 	);
@@ -859,7 +873,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	wp_enqueue_style(
 		'wp-editor',
 		gutenberg_url( 'editor/build/style.css' ),
-		array( 'wp-components', 'wp-blocks', 'wp-edit-blocks' ),
+		array( 'wp-components', 'wp-blocks', 'wp-edit-blocks', 'wp-nux' ),
 		filemtime( gutenberg_dir_path() . 'editor/build/style.css' )
 	);
 	wp_style_add_data( 'wp-editor', 'rtl', 'replace' );

nux/components/dot-tip/index.js

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Button, Popover } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { tipHasBeenShown } from '../../store/selectors';
+import { markAsShown } from '../../store/actions';
+
+class DotTip extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			opened: false,
+		};
+		this.showTip = this.showTip.bind( this );
+		this.closeTip = this.closeTip.bind( this );
+	}
+
+	showTip() {
+		this.setState( { opened: true } );
+		this.props.markAsShown( this.props.id );
+	}
+
+	closeTip() {
+		this.setState( { opened: false } );
+	}
+
+	render() {
+		const { hasBeenShown, children } = this.props;
+		const { opened } = this.state;
+
+		if ( hasBeenShown && ! opened ) {
+			return null;
+		}
+
+		return (
+			<div className="nux-dot-tip">
+				<Button className="nux-dot-tip__button-container" onClick={ this.showTip }>
+					<div className="nux-dot-tip__button">{ __( 'Show Tip' ) }</div>
+				</Button>
+				<Popover
+					className="nux-dot-tip__content"
+					isOpen={ opened }
+					onClose={ this.closeTip }
+					position="center right"
+				>
+					{ children }
+				</Popover>
+			</div>
+		);
+	}
+}
+
+export default connect(
+	( state, ownProps ) => ( {
+		hasBeenShown: tipHasBeenShown( state, ownProps.id ),
+	} ),
+	{ markAsShown },
+	undefined,
+	{ storeKey: 'core/nux' }
+)( DotTip );

nux/components/dot-tip/style.scss

@@ -0,0 +1,56 @@
+.nux-dot-tip {
+	position: relative;
+	z-index: z-index( '.nux-dot-tip' )
+}
+
+.nux-dot-tip__button-container {
+	padding: 4px;
+	margin: 0;
+	position: absolute;
+
+	top: 0;
+	left: 0;
+}
+
+.nux-dot-tip__button {
+	background-color: $blue-medium-300;
+	width: 8px;
+	height: 8px;
+	text-indent: -9999px;
+	cursor: pointer;
+	overflow: hidden;
+	padding: 0;
+
+	position: relative;
+	transform: translate3d(0,0,0)  rotate(45deg);
+
+	border-radius: 4px;
+	box-shadow: 0 0 0 0 rgba( $blue-medium-300,  0.9);
+
+	animation: nuxdottip__pulse 1.6s infinite cubic-bezier(.17,.67,.92,.62);
+
+	&:off-after {
+		content: " ";
+		background: $blue-medium-300;
+		width: 4px;
+		height: 4px;
+
+		position: absolute;
+		transform: translate3d( 0, 0, 0 )  rotate( 45deg );
+
+		border-radius: 2px;
+		box-shadow: 0 0 0 0 rgba( 200, 215, 225,  0.7);
+
+		animation: nuxdottip__pulse 1.6s infinite cubic-bezier(.62,.2,.86,.53);
+	}
+}
+
+@keyframes nuxdottip__pulse {
+  100% {
+    box-shadow: 0 0 0 10px rgba( $blue-medium-300, 0);
+  }
+}
+
+.nux-dot-tip__content .components-popover__content {
+	padding: 10px;
+}

nux/components/index.js

@@ -0,0 +1,2 @@
+export { default as DotTip } from './dot-tip';
+export { default as Provider } from './provider';

nux/components/provider/index.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { createProvider } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import store from '../../store';
+
+/**
+ * Module constants
+ */
+const ReduxProvider = createProvider( 'core/nux' );
+
+function Provider( props ) {
+	return <ReduxProvider store={ store } { ...props } />;
+}
+
+export default Provider;

nux/index.js

@@ -0,0 +1 @@
+export * from './components';