NUX: Make tips appear inline

packages/block-editor/README.md

@@ -370,7 +370,8 @@ The default editor settings
  bodyPlaceholder                        string        Empty post placeholder
  titlePlaceholder                       string        Empty title placeholder
  codeEditingEnabled                     string        Whether or not the user can switch to the code editor
- \_\_experimentalCanUserUseUnfilteredHTML string        Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ **experimentalCanUserUseUnfilteredHTML string        Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ **experimentalEnableTips               boolean       Whether or not tips aimed at new users should appear in the UI.
 
 <a name="SkipToSelectedBlock" href="#SkipToSelectedBlock">#</a> **SkipToSelectedBlock**
 

packages/block-editor/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/nux": "file:../nux",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/token-list": "file:../token-list",
 		"@wordpress/url": "file:../url",

packages/block-editor/src/components/block-inspector/index.js

@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
+import { __experimentalInlineTip as InlineTip } from '@wordpress/nux';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ const BlockInspector = ( {
 	selectedBlockClientId,
 	selectedBlockName,
 	showNoBlockSelectedMessage = true,
+	enableTips,
 } ) => {
 	if ( count > 1 ) {
 		return <MultiSelectionInspector />;
@@ -51,6 +53,11 @@ const BlockInspector = ( {
 
 	return (
 		<>
+			{ enableTips && (
+				<InlineTip tipId="core/editor.blockInspector" className="block-editor-block-inspector__tip">
+					{ __( 'The block tab contains additional settings for the selected block.' ) }
+				</InlineTip>
+			) }
 			<div className="editor-block-inspector__card block-editor-block-inspector__card">
 				<BlockIcon icon={ blockType.icon } showColors />
 				<div className="editor-block-inspector__card-content block-editor-block-inspector__card-content">
@@ -91,18 +98,20 @@ const BlockInspector = ( {
 
 export default withSelect(
 	( select ) => {
-		const { getSelectedBlockClientId, getSelectedBlockCount, getBlockName } = select( 'core/block-editor' );
+		const { getSelectedBlockClientId, getSelectedBlockCount, getBlockName, getSettings } = select( 'core/block-editor' );
 		const { getBlockStyles } = select( 'core/blocks' );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const selectedBlockName = selectedBlockClientId && getBlockName( selectedBlockClientId );
 		const blockType = selectedBlockClientId && getBlockType( selectedBlockName );
 		const blockStyles = selectedBlockClientId && getBlockStyles( selectedBlockName );
+		const { __experimentalEnableTips: enableTips } = getSettings();
 		return {
 			count: getSelectedBlockCount(),
 			hasBlockStyles: blockStyles && blockStyles.length > 0,
 			selectedBlockName,
 			selectedBlockClientId,
 			blockType,
+			enableTips,
 		};
 	}
 )( BlockInspector );

packages/block-editor/src/components/block-inspector/style.scss

@@ -6,6 +6,9 @@
 	text-align: center;
 }
 
+.block-editor-block-inspector__tip {
+	margin: 0 0 16px 0;
+}
 
 .block-editor-block-inspector__card {
 	display: flex;

packages/block-editor/src/components/inserter/menu.js

@@ -22,7 +22,7 @@ import scrollIntoView from 'dom-scroll-into-view';
  */
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
-import { withSpokenMessages, PanelBody } from '@wordpress/components';
+import { withSpokenMessages, PanelBody, ExternalLink } from '@wordpress/components';
 import {
 	getCategories,
 	isReusableBlock,
@@ -33,6 +33,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { addQueryArgs } from '@wordpress/url';
+import { __experimentalInlineTip as InlineTip } from '@wordpress/nux';
 
 /**
  * Internal dependencies
@@ -247,7 +248,7 @@ export class InserterMenu extends Component {
 	}
 
 	render() {
-		const { instanceId, onSelect, rootClientId } = this.props;
+		const { instanceId, onSelect, rootClientId, enableTips } = this.props;
 		const {
 			childItems,
 			hoveredItem,
@@ -290,6 +291,16 @@ export class InserterMenu extends Component {
 					aria-label={ __( 'Available block types' ) }
 				>
 
+					{ enableTips && (
+						<InlineTip tipId="core/editor.inserter" className="block-editor-inserter__tip">
+							{ __( 'There are Blocks for most types of content: text, headings, images, lists, and lots more!' ) }
+							{ ' ' }
+							<ExternalLink href="https://wordpress.org/support/article/wordpress-editor/#blocks">
+								{ __( 'Learn more' ) }
+							</ExternalLink>
+						</InlineTip>
+					) }
+
 					<ChildBlocks
 						rootClientId={ rootClientId }
 						items={ childItems }
@@ -366,6 +377,7 @@ export default compose(
 			getBlockName,
 			getBlockRootClientId,
 			getBlockSelectionEnd,
+			getSettings,
 		} = select( 'core/block-editor' );
 		const {
 			getChildBlockNames,
@@ -379,11 +391,13 @@ export default compose(
 			}
 		}
 		const destinationRootBlockName = getBlockName( destinationRootClientId );
+		const { __experimentalEnableTips: enableTips } = getSettings();
 
 		return {
 			rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
 			items: getInserterItems( destinationRootClientId ),
 			destinationRootClientId,
+			enableTips,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

packages/block-editor/src/components/inserter/style.scss

@@ -105,6 +105,10 @@ $block-inserter-search-height: 38px;
 	}
 }
 
+.block-editor-inserter__tip {
+	margin: 0 0 $grid-size-large 0;
+}
+
 .block-editor-inserter__popover .block-editor-block-types-list {
 	margin: 0 -8px;
 }

packages/block-editor/src/store/defaults.js

@@ -28,9 +28,11 @@ export const PREFERENCES_DEFAULTS = {
  *  titlePlaceholder                       string        Empty title placeholder
  *  codeEditingEnabled                     string        Whether or not the user can switch to the code editor
  *  __experimentalCanUserUseUnfilteredHTML string        Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ *  __experimentalEnableTips               boolean       Whether or not tips aimed at new users should appear in the UI.
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
+
 	colors: [
 		{
 			name: __( 'Pale pink' ),
@@ -142,7 +144,11 @@ export const SETTINGS_DEFAULTS = {
 	allowedMimeTypes: null,
 
 	availableLegacyWidgets: {},
+
 	hasPermissionsToManageWidgets: false,
+
 	__experimentalCanUserUseUnfilteredHTML: false,
+
+	__experimentalEnableTips: false,
 };
 

packages/components/src/notice/index.js

@@ -24,9 +24,14 @@ function Notice( {
 	actions = [],
 	__unstableHTML,
 } ) {
-	const classes = classnames( className, 'components-notice', 'is-' + status, {
-		'is-dismissible': isDismissible,
-	} );
+	const classes = classnames(
+		className,
+		'components-notice',
+		status ? 'is-' + status : undefined,
+		{
+			'is-dismissible': isDismissible,
+		}
+	);
 
 	if ( __unstableHTML ) {
 		children = <RawHTML>{ children }</RawHTML>;

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

@@ -32,8 +32,4 @@ export async function createNewPost( {
 		const action = _enableTips ? 'enableTips' : 'disableTips';
 		wp.data.dispatch( 'core/nux' )[ action ]();
 	}, enableTips );
-
-	if ( enableTips ) {
-		await page.reload();
-	}
 }