WordPress · noisysocks · Oct 31, 2018 · Nov 28, 2018 · Dec 6, 2018 · Dec 6, 2018
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -15,6 +15,7 @@ import {
 	NavigableToolbar,
 	BlockNavigationDropdown,
 } from '@wordpress/editor';
+import { rawShortcut, displayShortcut, shortcutAriaLabel } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -34,9 +35,19 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter } ) {
 			aria-label={ toolbarAriaLabel }
 		>
 			<FullscreenModeClose />
-			<div>
+			<div className="edit-post-header-toolbar__inserter-button-wrapper">
 				<Inserter disabled={ ! showInserter } position="bottom right" />
-				<DotTip tipId="core/editor.inserter">
+				<DotTip
+					tipId="core/editor.inserter"
+					className="edit-post-header-toolbar__inserter-button-tip"
+					isCollapsible
+					title="Add block"
+					shortcut={ {
+						raw: rawShortcut.access( 't' ),
+						display: displayShortcut.access( 't' ),
+						ariaLabel: shortcutAriaLabel.access( 't' ),
+					} }
+				>
 					{ __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kinds of content: you can insert text, headings, images, lists, and lots more!' ) }
 				</DotTip>
 			</div>

diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -22,6 +22,17 @@
 	}
 }
 
+.edit-post-header-toolbar__inserter-button-wrapper {
+	align-items: center;
+	display: flex;
+	position: relative;
+}
+
+.edit-post-header-toolbar__inserter-button-tip {
+	position: absolute;
+	right: -17px;
+}
+
 // Block toolbar when fixed to the top of the screen.
 .edit-post-header-toolbar__block-toolbar {
 	// Stack toolbar below Editor Bar.

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -59,7 +59,7 @@ function Header( {
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }
 				/>
-				<div>
+				<div className="edit-post-header__settings-button-wrapper">
 					<IconButton
 						icon="admin-generic"
 						label={ __( 'Settings' ) }
@@ -68,7 +68,7 @@ function Header( {
 						aria-expanded={ isEditorSidebarOpened }
 						shortcut={ shortcuts.toggleSidebar }
 					/>
-					<DotTip tipId="core/editor.settings">
+					<DotTip tipId="core/editor.settings" className="edit-post-header__settings-button-tip">
 						{ __( 'You’ll find more settings for your page and blocks in the sidebar. Click “Settings” to open it.' ) }
 					</DotTip>
 				</div>

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -63,11 +63,21 @@
 
 @include editor-left(".edit-post-header");
 
-.edit-post-header__settings {
+.edit-post-header__settings,
+.edit-post-header__settings-button-wrapper {
 	display: inline-flex;
 	align-items: center;
 }
 
+.edit-post-header__settings-button-wrapper {
+	position: relative;
+}
+
+.edit-post-header__settings-button-tip {
+	left: -17px;
+	position: absolute;
+}
+
 .edit-post-header .components-button {
 	// Header toggle buttons.
 	&.is-toggled {

diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
@@ -182,7 +182,7 @@ export class PostPreviewButton extends Component {
 						__( '(opens in a new tab)' )
 					}
 				</span>
-				<DotTip tipId="core/editor.preview">
+				<DotTip tipId="core/editor.preview" className="editor-post-preview__tip">
 					{ __( 'Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.' ) }
 				</DotTip>
 			</Button>

diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
@@ -0,0 +1,10 @@
+.editor-post-preview {
+	align-items: center;
+	display: flex;
+	position: relative;
+}
+
+.editor-post-preview__tip {
+	left: -17px;
+	position: absolute;
+}
diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
@@ -15,11 +15,12 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`]
   >
     (opens in a new tab)
   </span>
-  <WithSelect(WithDispatch(DotTip))
+  <WithSelect(WithDispatch(WithSpokenMessages(DotTip)))
+    className="editor-post-preview__tip"
     tipId="core/editor.preview"
   >
     Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
-  </WithSelect(WithDispatch(DotTip))>
+  </WithSelect(WithDispatch(WithSpokenMessages(DotTip)))>
 </Button>
 `;
 
@@ -38,10 +39,11 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] =
   >
     (opens in a new tab)
   </span>
-  <WithSelect(WithDispatch(DotTip))
+  <WithSelect(WithDispatch(WithSpokenMessages(DotTip)))
+    className="editor-post-preview__tip"
     tipId="core/editor.preview"
   >
     Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
-  </WithSelect(WithDispatch(DotTip))>
+  </WithSelect(WithDispatch(WithSpokenMessages(DotTip)))>
 </Button>
 `;
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
@@ -107,7 +107,7 @@ export class PostPublishButton extends Component {
 				{ ...componentProps }
 			>
 				{ componentChildren }
-				<DotTip tipId="core/editor.publish">
+				<DotTip tipId="core/editor.publish" className="editor-post-publish-panel__toggle-tip">
 					{ __( 'Finished writing? That’s great, let’s get this published right now. Just click “Publish” and you’re good to go.' ) }
 				</DotTip>
 			</Button>

diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
@@ -40,6 +40,15 @@
 	padding: 16px;
 }
 
+.editor-post-publish-panel__toggle {
+	position: relative;
+}
+
+.editor-post-publish-panel__toggle-tip {
+	left: -17px;
+	position: absolute;
+}
+
 .components-button.editor-post-publish-panel__toggle.is-primary {
 	display: inline-flex;
 	align-items: center;

diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
@@ -33,6 +33,7 @@
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-permalink/style.scss";
+@import "./components/post-preview-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
 @import "./components/post-taxonomies/style.scss";

diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 4.0.0 (Unreleased)
+
+### New Features
+
+- `DotTip`s can now be made collapsible using the `isCollapsible` prop.
+
+### Breaking Changes
+
+- `DotTip` will no longer automatically position its indicator next to the parent component. Instead, users of `DotTip` should manually position the indicator by applying a `className` or styling `.nux-dot-tip`.
+
 ## 3.0.4 (2018-11-30)
 
 ## 3.0.3 (2018-11-22)
@@ -28,7 +38,7 @@
 
 ### Deprecations
 
-- The id prop of DotTip has been deprecated. Please use the tipId prop instead.
+- The `id` prop of `DotTip` has been deprecated. Please use the `tipId` prop instead.
 
 ## 2.0.6 (2018-10-22)
 
@@ -38,6 +48,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 - Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
diff --git a/packages/nux/src/components/dot-tip/README.md b/packages/nux/src/components/dot-tip/README.md
@@ -29,3 +29,44 @@ A string that uniquely identifies the tip. Identifiers should be prefixed with t
 ### children
 
 Any React element or elements can be passed as children. They will be rendered within the tip bubble.
+
+### isCollapsible
+
+Marks a tip as being collapsible. Collapsible tips show a pulsating indicator and nothing else. Clicking on the indicator will expand or collapse the tip.
+
+Defaults to `false`.
+
+- Type: `boolean`
+- Required: No
+
+### title
+
+A short string which describes the tip. This is used to label the button which expands or collapses the tip if it is collapsible.
+
+```jsx
+<DotTip tipId="acme/add-to-cart" title="Add to Cart">
+	Click here to add the product to your shopping cart.
+</DotTip>
+```
+
+- Type: `string`
+- Required: No
+
+### shortcut
+
+An object which, if specified, configures a keyboard shortcut which will expand or collapse the tip if it is collapsible.
+
+The object must contain a `raw` property which is the keyboard shortcut to bind to.
+
+Optionally, the object can contain a `display` property which is a textual description of the shortcut used for the button tooltip.
+
+Optionally, the object can contain an `ariaLabel` property which is a textual description of the shortcut used for screen readers.
+
+```jsx
+<DotTip tipId="acme/add-to-cart" shortcut={ { raw: 'ctrl+alt+t' } }>
+	Click here to add the product to your shopping cart.
+</DotTip>
+```
+
+- Type: `Object`
+- Required: No