NUX: Move first tip to the toolbar

edit-post/components/header/header-toolbar/index.js

@@ -4,6 +4,7 @@
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
+import { DotTip } from '@wordpress/nux';
 
 /**
  * WordPress dependencies
@@ -29,7 +30,11 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
 			className="edit-post-header-toolbar"
 			aria-label={ __( 'Editor Toolbar' ) }
 		>
-			<Inserter position="bottom right" />
+			<Inserter position="bottom right">
+				<DotTip id="core/editor.inserter">
+					{ __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!' ) }
+				</DotTip>
+			</Inserter>
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
 			<TableOfContents />

packages/components/src/popover/index.js

@@ -143,8 +143,7 @@ class Popover extends Component {
 		window.console.warn( `<Popover> component: focusOnMount argument "${ focusOnMount }" not recognized.` );
 	}
 
-	getAnchorRect() {
-		const anchor = this.anchorNode.current;
+	getAnchorRect( anchor ) {
 		if ( ! anchor || ! anchor.parentNode ) {
 			return;
 		}
@@ -185,7 +184,10 @@ class Popover extends Component {
 	computePopoverPosition( popoverSize ) {
 		const { getAnchorRect = this.getAnchorRect, position = 'top', expandOnMobile } = this.props;
 		const newPopoverPosition = computePopoverPosition(
-			getAnchorRect(), popoverSize || this.state.popoverSize, position, expandOnMobile
+			getAnchorRect( this.anchorNode.current ),
+			popoverSize || this.state.popoverSize,
+			position,
+			expandOnMobile
 		);
 
 		if (

packages/editor/src/components/default-block-appender/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { get } from 'lodash';
 
 /**
@@ -12,7 +11,6 @@ import { compose } from '@wordpress/compose';
 import { getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { DotTip } from '@wordpress/nux';
 
 /**
  * Internal dependencies
@@ -29,7 +27,6 @@ export function DefaultBlockAppender( {
 	placeholder,
 	layout,
 	rootClientId,
-	hasTip,
 } ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
@@ -51,11 +48,7 @@ export function DefaultBlockAppender( {
 	// See: https://gist.github.com/cvrebert/68659d0333a578d75372
 
 	return (
-		<div
-			data-root-client-id={ rootClientId || '' }
-			className={ classnames( 'editor-default-block-appender', {
-				'has-tip': hasTip,
-			} ) }>
+		<div data-root-client-id={ rootClientId || '' } className="editor-default-block-appender">
 			<BlockDropZone rootClientId={ rootClientId } layout={ layout } />
 			<input
 				role="button"
@@ -67,18 +60,13 @@ export function DefaultBlockAppender( {
 				value={ showPrompt ? value : '' }
 			/>
 			<InserterWithShortcuts rootClientId={ rootClientId } layout={ layout } />
-			<Inserter position="top right">
-				<DotTip id="core/editor.inserter">
-					{ __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!' ) }
-				</DotTip>
-			</Inserter>
+			<Inserter position="top right" />
 		</div>
 	);
 }
 export default compose(
 	withSelect( ( select, ownProps ) => {
 		const { getBlockCount, getBlock, getEditorSettings, getTemplateLock } = select( 'core/editor' );
-		const { isTipVisible } = select( 'core/nux' );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const lastBlock = getBlock( ownProps.lastBlockClientId );
@@ -90,7 +78,6 @@ export default compose(
 			showPrompt: isEmpty,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
 			placeholder: bodyPlaceholder,
-			hasTip: isTipVisible( 'core/editor.inserter' ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
@@ -99,11 +86,9 @@ export default compose(
 			startTyping,
 		} = dispatch( 'core/editor' );
 
-		const { dismissTip } = dispatch( 'core/nux' );
-
 		return {
 			onAppend() {
-				const { layout, rootClientId, hasTip } = ownProps;
+				const { layout, rootClientId } = ownProps;
 
 				let attributes;
 				if ( layout ) {
@@ -112,10 +97,6 @@ export default compose(
 
 				insertDefaultBlock( attributes, rootClientId );
 				startTyping();
-
-				if ( hasTip ) {
-					dismissTip( 'core/editor.inserter' );
-				}
 			},
 		};
 	} ),

packages/editor/src/components/default-block-appender/style.scss

@@ -40,17 +40,15 @@
 		}
 	}
 
-	&:hover .editor-inserter-with-shortcuts {
-		opacity: 1;
+	// Don't show the inserter until mousing over.
+	.editor-inserter__toggle:not([aria-expanded="true"]) {
+		opacity: 0;
 	}
-
-	// Show the inserter if mousing over or there is a tip.
-	&:not(.has-tip) {
-		.editor-inserter__toggle:not([aria-expanded="true"]) {
-			opacity: 0;
+	&:hover {
+		.editor-inserter-with-shortcuts {
+			opacity: 1;
 		}
-
-		&:hover .editor-inserter__toggle {
+		.editor-inserter__toggle {
 			opacity: 1;
 		}
 	}

packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -25,13 +25,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(WithDispatch(Inserter))
     position="top right"
-  >
-    <WithInstanceId(WithSelect(WithDispatch(DotTip)))
-      id="core/editor.inserter"
-    >
-      Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!
-    </WithInstanceId(WithSelect(WithDispatch(DotTip)))>
-  </WithSelect(WithDispatch(Inserter))>
+  />
 </div>
 `;
 
@@ -53,13 +47,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(WithDispatch(Inserter))
     position="top right"
-  >
-    <WithInstanceId(WithSelect(WithDispatch(DotTip)))
-      id="core/editor.inserter"
-    >
-      Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!
-    </WithInstanceId(WithSelect(WithDispatch(DotTip)))>
-  </WithSelect(WithDispatch(Inserter))>
+  />
 </div>
 `;
 
@@ -81,12 +69,6 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(WithDispatch(Inserter))
     position="top right"
-  >
-    <WithInstanceId(WithSelect(WithDispatch(DotTip)))
-      id="core/editor.inserter"
-    >
-      Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!
-    </WithInstanceId(WithSelect(WithDispatch(DotTip)))>
-  </WithSelect(WithDispatch(Inserter))>
+  />
 </div>
 `;

packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap

@@ -8,10 +8,10 @@ exports[`PostPreviewButton render() should match the snapshot 1`] = `
   onClick={[Function]}
 >
   Preview
-  <WithInstanceId(WithSelect(WithDispatch(DotTip)))
+  <WithSelect(WithDispatch(DotTip))
     id="core/editor.preview"
   >
     Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
-  </WithInstanceId(WithSelect(WithDispatch(DotTip)))>
+  </WithSelect(WithDispatch(DotTip))>
 </Button>
 `;

packages/nux/src/components/dot-tip/README.md

@@ -3,8 +3,6 @@ DotTip
 
 `DotTip` is a React component that renders a single _tip_ on the screen. The tip will point to the React element that `DotTip` is nested within. Each tip is uniquely identified by a string passed to `id`.
 
-When there are multiple instances of `DotTip` that reference the same tip identifier, only the first instance to have been mounted will be visible.
-
 ## Usage
 
 ```jsx
@@ -23,7 +21,7 @@ The component accepts the following props:
 
 ### id
 
-A string that uniquely identifies the tip. Identifiers should be prefixed with the name of the plugin, followed by a `/`. For example, `acme/add-to-cart`. Changing the identifier after the component has mounted is not supported.
+A string that uniquely identifies the tip. Identifiers should be prefixed with the name of the plugin, followed by a `/`. For example, `acme/add-to-cart`.
 
 - Type: `string`
 - Required: Yes

packages/nux/src/components/dot-tip/index.js

@@ -1,84 +1,74 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { compose, withInstanceId } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { Popover, Button, IconButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 
-export class DotTip extends Component {
-	componentDidMount() {
-		this.props.onRegister();
-	}
-
-	componentWillUnmount() {
-		this.props.onUnregister();
-	}
-
-	render() {
-		const { children, isVisible, hasNextTip, onDismiss, onDisable } = this.props;
+function getAnchorRect( anchor ) {
+	// The default getAnchorRect() excludes an element's top and bottom padding
+	// from its calculation. We want tips to point to the outer margin of an
+	// element, so we override getAnchorRect() to include all padding.
+	return anchor.parentNode.getBoundingClientRect();
+}
 
-		if ( ! isVisible ) {
-			return null;
-		}
+function onClick( event ) {
+	// Tips are often nested within buttons. We stop propagation so that clicking
+	// on a tip doesn't result in the button being clicked.
+	event.stopPropagation();
+}
 
-		return (
-			<Popover
-				className="nux-dot-tip"
-				position="middle right"
-				noArrow
-				focusOnMount="container"
-				role="dialog"
-				aria-label={ __( 'Gutenberg tips' ) }
-				onClick={ ( event ) => {
-					// Tips are often nested within buttons. We stop propagation so that clicking
-					// on a tip doesn't result in the button being clicked.
-					event.stopPropagation();
-				} }
-			>
-				<p>{ children }</p>
-				<p>
-					<Button isLink onClick={ onDismiss }>
-						{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
-					</Button>
-				</p>
-				<IconButton
-					className="nux-dot-tip__disable"
-					icon="no-alt"
-					label={ __( 'Disable tips' ) }
-					onClick={ onDisable }
-				/>
-			</Popover>
-		);
+export function DotTip( {
+	children,
+	isVisible,
+	hasNextTip,
+	onDismiss,
+	onDisable,
+} ) {
+	if ( ! isVisible ) {
+		return null;
 	}
+
+	return (
+		<Popover
+			className="nux-dot-tip"
+			position="middle right"
+			noArrow
+			focusOnMount="container"
+			getAnchorRect={ getAnchorRect }
+			role="dialog"
+			aria-label={ __( 'Gutenberg tips' ) }
+			onClick={ onClick }
+		>
+			<p>{ children }</p>
+			<p>
+				<Button isLink onClick={ onDismiss }>
+					{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
+				</Button>
+			</p>
+			<IconButton
+				className="nux-dot-tip__disable"
+				icon="no-alt"
+				label={ __( 'Disable tips' ) }
+				onClick={ onDisable }
+			/>
+		</Popover>
+	);
 }
 
 export default compose(
-	withInstanceId,
-	withSelect( ( select, { id, instanceId } ) => {
+	withSelect( ( select, { id } ) => {
 		const { isTipVisible, getAssociatedGuide } = select( 'core/nux' );
 		const associatedGuide = getAssociatedGuide( id );
 		return {
-			isVisible: isTipVisible( id, instanceId ),
+			isVisible: isTipVisible( id ),
 			hasNextTip: !! ( associatedGuide && associatedGuide.nextTipId ),
 		};
 	} ),
-	withDispatch( ( dispatch, { id, instanceId } ) => {
-		const {
-			registerTipInstance,
-			unregisterTipInstance,
-			dismissTip,
-			disableTips,
-		} = dispatch( 'core/nux' );
-
+	withDispatch( ( dispatch, { id } ) => {
+		const { dismissTip, disableTips } = dispatch( 'core/nux' );
 		return {
-			onRegister() {
-				registerTipInstance( id, instanceId );
-			},
-			onUnregister() {
-				unregisterTipInstance( id, instanceId );
-			},
 			onDismiss() {
 				dismissTip( id );
 			},

packages/nux/src/components/dot-tip/style.scss

@@ -51,10 +51,16 @@ $dot-scale: 3;  // How much the pulse animation should scale up by in size
 	}
 
 	// Position the dot right next to the edge of the button
-	&.is-left {
+	&.is-top {
+		margin-top: -$dot-size / 2;
+	}
+	&.is-bottom {
+		margin-top: $dot-size / 2;
+	}
+	&.is-middle.is-left {
 		margin-left: -$dot-size / 2;
 	}
-	&.is-right {
+	&.is-middle.is-right {
 		margin-left: $dot-size / 2;
 	}
 

packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap

@@ -5,6 +5,7 @@ exports[`DotTip should render correctly 1`] = `
   aria-label="Gutenberg tips"
   className="nux-dot-tip"
   focusOnMount="container"
+  getAnchorRect={[Function]}
   noArrow={true}
   onClick={[Function]}
   position="middle right"