@@ -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 );
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index 2fdb6d04b44aa..1633e262da340 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/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;
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 12d119ce4ab51..ba96236f7f22b 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/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 && (
+
+ { __( 'There are Blocks for most types of content: text, headings, images, lists, and lots more!' ) }
+ { ' ' }
+
+ { __( 'Learn more' ) }
+
+
+ ) }
+
{
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 87b9a79f12fa4..b8deee07553be 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/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;
}
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index 1f91e29c7e2f5..f4f9a4815ab0d 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/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,
};
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
index 99d5f9968f111..6a945cd8c7e50 100644
--- a/packages/components/src/notice/index.js
+++ b/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 = { children };
diff --git a/packages/e2e-test-utils/src/create-new-post.js b/packages/e2e-test-utils/src/create-new-post.js
index 91a95bf5216a4..8616f55143a12 100644
--- a/packages/e2e-test-utils/src/create-new-post.js
+++ b/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();
- }
}
diff --git a/packages/e2e-tests/specs/nux.test.js b/packages/e2e-tests/specs/nux.test.js
index 40c980fac079c..f5f5c7e355aa2 100644
--- a/packages/e2e-tests/specs/nux.test.js
+++ b/packages/e2e-tests/specs/nux.test.js
@@ -2,179 +2,89 @@
* WordPress dependencies
*/
import {
- clickBlockAppender,
- clickOnMoreMenuItem,
createNewPost,
- saveDraft,
+ insertBlock,
+ openGlobalBlockInserter,
toggleScreenOption,
} from '@wordpress/e2e-test-utils';
-describe( 'New User Experience (NUX)', () => {
- async function clickAllTips( page ) {
- // Click through all available tips.
- const tips = await getTips( page );
- const numberOfTips = tips.tipIds.length;
-
- for ( let i = 1; i < numberOfTips; i++ ) {
- await page.click( '.nux-dot-tip .components-button.is-link' );
- }
-
- return { numberOfTips, tips };
- }
-
- async function getTips( page ) {
- return await page.evaluate( () => {
- return wp.data.select( 'core/nux' ).getAssociatedGuide( 'core/editor.inserter' );
- } );
- }
-
- async function getTipsEnabled( page ) {
- return await page.evaluate( () => {
- return wp.data.select( 'core/nux' ).areTipsEnabled();
- } );
- }
+/**
+ * Queries the data store and returns whether or not NUX tips are enabled.
+ *
+ * @return {boolean} Whether or not NUX tips are enabled.
+ */
+async function areTipsEnabled() {
+ return await page.evaluate( () => wp.data.select( 'core/nux' ).areTipsEnabled() );
+}
+describe( 'New User Experience (NUX)', () => {
beforeEach( async () => {
await createNewPost( { enableTips: true } );
} );
- it( 'should show tips to a first-time user', async () => {
- const firstTipText = await page.$eval( '.nux-dot-tip', ( element ) => element.innerText );
- expect( firstTipText ).toContain( 'Welcome to the wonderful world of blocks!' );
-
- const [ nextTipButton ] = await page.$x( "//button[contains(text(), 'See next tip')]" );
- await nextTipButton.click();
+ it( 'should show a tip in the inserter', async () => {
+ // Open up the inserter.
+ await openGlobalBlockInserter();
- const secondTipText = await page.$eval( '.nux-dot-tip', ( element ) => element.innerText );
- expect( secondTipText ).toContain( 'You’ll find more settings for your page and blocks in the sidebar.' );
+ // Check there's a tip in the inserter.
+ const inserterTip = await page.$( '.block-editor-inserter__tip' );
+ expect( inserterTip ).not.toBeNull();
} );
- it( 'should show "Got it" once all tips have been displayed', async () => {
- await clickAllTips( page );
+ it( 'should show a tip in the block inspector', async () => {
+ // Insert any old block.
+ await insertBlock( 'Paragraph' );
- // Make sure "Got it" button appears on the last tip.
- const gotItButton = await page.$x( "//button[contains(text(), 'Got it')]" );
- expect( gotItButton ).toHaveLength( 1 );
-
- // Click the "Got it button".
- await page.click( '.nux-dot-tip .components-button.is-link' );
-
- // Verify no more tips are visible on the page.
- const nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 0 );
-
- // Tips should not be marked as disabled, but when the user has seen all
- // of the available tips, they will not appear.
- const areTipsEnabled = await getTipsEnabled( page );
- expect( areTipsEnabled ).toEqual( true );
+ // Check there's a tip in the block inspector.
+ const blockInspectorTip = await page.$( '.block-editor-block-inspector__tip' );
+ expect( blockInspectorTip ).not.toBeNull();
} );
- it( 'should hide and disable tips if "disable tips" button is clicked', async () => {
- await page.click( '.nux-dot-tip__disable' );
+ it( 'should dismiss a single tip if X button is clicked and confirmation is dismissed', async () => {
+ // Open up the inserter.
+ await openGlobalBlockInserter();
- // Verify no more tips are visible on the page.
- let nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 0 );
+ // Click the tip's X button.
+ await page.click( '.block-editor-inserter__tip button[aria-label="Dismiss this notice"]' );
- // We should be disabling the tips so they don't appear again.
- const areTipsEnabled = await getTipsEnabled( page );
- expect( areTipsEnabled ).toEqual( false );
+ // Dismiss the confirmation modal.
+ const [ noButton ] = await page.$x( '//*[contains(@class, "nux-hide-tips-confirmation")]//button[text()="No"]' );
+ await noButton.click();
- // Refresh the page; tips should not show because they were disabled.
- await page.reload();
+ // The tip should be gone.
+ const inserterTip = await page.$( '.block-editor-inserter__tip' );
+ expect( inserterTip ).toBeNull();
- nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 0 );
+ // Tips should still be enabled.
+ expect( await areTipsEnabled() ).toBe( true );
} );
- it( 'should enable tips when the "Enable tips" option is toggled on', async () => {
- // Start by disabling tips.
- await page.click( '.nux-dot-tip__disable' );
-
- // Verify no more tips are visible on the page.
- let nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 0 );
-
- // Tips should be disabled in localStorage as well.
- let areTipsEnabled = await getTipsEnabled( page );
- expect( areTipsEnabled ).toEqual( false );
+ it( 'should disable all tips if X button is clicked and confirmation is confirmed', async () => {
+ // Open up the inserter.
+ await openGlobalBlockInserter();
- // Toggle the 'Enable Tips' option to enable.
- await toggleScreenOption( 'Enable Tips' );
+ // Click the tip's X button.
+ await page.click( '.block-editor-inserter__tip button[aria-label="Dismiss this notice"]' );
- // Tips should once again appear.
- nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 1 );
+ // Accept the confirmation modal.
+ const [ disableTipsButton ] = await page.$x( '//*[contains(@class, "nux-hide-tips-confirmation")]//button[text()="Disable Tips"]' );
+ await disableTipsButton.click();
- // Tips should be enabled in localStorage as well.
- areTipsEnabled = await getTipsEnabled( page );
- expect( areTipsEnabled ).toEqual( true );
- } );
-
- // TODO: This test should be enabled once
- // https://github.com/WordPress/gutenberg/issues/7458 is fixed.
- it.skip( 'should show tips as disabled if all tips have been shown', async () => {
- await clickAllTips( page );
-
- // Open the "More" menu to check the "Show Tips" element.
- await page.click( '.edit-post-more-menu [aria-label="More tools & options"]' );
- const showTipsButton = await page.$x( '//button[contains(text(), "Show Tips")][@aria-pressed="false"]' );
+ // The tip should be gone.
+ const inserterTip = await page.$( '.block-editor-inserter__tip' );
+ expect( inserterTip ).toBeNull();
- expect( showTipsButton ).toHaveLength( 1 );
+ // Tips should now be disabled.
+ expect( await areTipsEnabled() ).toBe( false );
} );
- // TODO: This test should be enabled once
- // https://github.com/WordPress/gutenberg/issues/7458 is fixed.
- it.skip( 'should reset tips if all tips have been shown and show tips was unchecked', async () => {
- const { numberOfTips } = await clickAllTips( page );
-
- // Click again to re-enable tips; they should appear.
- await clickOnMoreMenuItem( 'Show Tips' );
-
- // Open the "More" menu to check the "Show Tips" element.
- await page.click( '.edit-post-more-menu [aria-label="More tools & options"]' );
- const showTipsButton = await page.$x( '//button[contains(text(), "Show Tips")][@aria-pressed="true"]' );
-
- expect( showTipsButton ).toHaveLength( 1 );
-
- // Tips should re-appear on the page.
- const nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 1 );
-
- // Tips should be enabled again.
- const areTipsEnabled = await getTipsEnabled( page );
- expect( areTipsEnabled ).toEqual( true );
-
- // Dismissed tips should be reset and ready to be shown again.
- const resetTips = await getTips( page );
- const newNumberOfTips = resetTips.tipIds.length;
- expect( newNumberOfTips ).toHaveLength( numberOfTips );
- } );
+ it( 'should enable and disable tips when option is toggled', async () => {
+ // Toggling the option off should disable tips.
+ await toggleScreenOption( 'Enable Tips', false );
+ expect( await areTipsEnabled() ).toBe( false );
- // TODO: This test should be enabled once
- // https://github.com/WordPress/gutenberg/issues/7753 is fixed.
- // See: https://github.com/WordPress/gutenberg/issues/7753#issuecomment-403952816
- it.skip( 'should show tips if "Show tips" was disabled on a draft and then enabled', async () => {
- // Click the "Show tips" button (enabled by default) to disable tips.
- await clickOnMoreMenuItem( 'Show Tips' );
-
- // Let's type something so there's content in this post.
- await page.click( '.editor-post-title__input' );
- await page.keyboard.type( 'Post title' );
- await clickBlockAppender();
- await page.keyboard.type( 'Post content goes here.' );
- await saveDraft();
-
- // Refresh the page; tips should be disabled.
- await page.reload();
- let nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 0 );
-
- // Clicking should re-enable tips.
- await clickOnMoreMenuItem( 'Show Tips' );
-
- // Tips should re-appear on the page.
- nuxTipElements = await page.$$( '.nux-dot-tip' );
- expect( nuxTipElements ).toHaveLength( 1 );
+ // Toggling the option on should enable tips.
+ await toggleScreenOption( 'Enable Tips', true );
+ expect( await areTipsEnabled() ).toBe( true );
} );
} );
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 09cebd91d061b..08f46e37086fa 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -36,7 +36,6 @@
"@wordpress/hooks": "file:../hooks",
"@wordpress/i18n": "file:../i18n",
"@wordpress/keycodes": "file:../keycodes",
- "@wordpress/nux": "file:../nux",
"@wordpress/plugins": "file:../plugins",
"@wordpress/url": "file:../url",
"@wordpress/viewport": "file:../viewport",
diff --git a/packages/edit-post/src/components/editor-initialization/index.js b/packages/edit-post/src/components/editor-initialization/index.js
index 51cb90681f8ae..f7ab4d7f5b008 100644
--- a/packages/edit-post/src/components/editor-initialization/index.js
+++ b/packages/edit-post/src/components/editor-initialization/index.js
@@ -1,9 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-
/**
* Internal dependencies
*/
@@ -24,14 +18,5 @@ export default function( { postId } ) {
useAdjustSidebarListener( postId );
useBlockSelectionListener( postId );
useUpdatePostLinkListener( postId );
- const { triggerGuide } = useDispatch( 'core/nux' );
- useEffect( () => {
- triggerGuide( [
- 'core/editor.inserter',
- 'core/editor.settings',
- 'core/editor.preview',
- 'core/editor.publish',
- ] );
- }, [ triggerGuide ] );
return null;
}
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 8ff5e2209594d..ca75a3fa3303b 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -4,7 +4,6 @@
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { withViewportMatch } from '@wordpress/viewport';
-import { DotTip } from '@wordpress/nux';
import { __ } from '@wordpress/i18n';
import {
Inserter,
@@ -30,12 +29,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText
className="edit-post-header-toolbar"
aria-label={ toolbarAriaLabel }
>
-
-
-
- { __( '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!' ) }
-
-
+
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index dff5622593603..b6817580b48d6 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -9,7 +9,6 @@ import {
} from '@wordpress/editor';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
-import { DotTip } from '@wordpress/nux';
/**
* Internal dependencies
@@ -63,19 +62,14 @@ function Header( {
forceIsDirty={ hasActiveMetaboxes }
forceIsSaving={ isSaving }
/>
-
-
-
- { __( 'You’ll find more settings for your page and blocks in the sidebar. Click the cog icon to toggle the sidebar open and closed.' ) }
-
-
+
diff --git a/packages/edit-post/src/components/options-modal/options/deferred.js b/packages/edit-post/src/components/options-modal/options/deferred.js
deleted file mode 100644
index 2a0f84348d23b..0000000000000
--- a/packages/edit-post/src/components/options-modal/options/deferred.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BaseOption from './base';
-
-class DeferredOption extends Component {
- constructor( { isChecked } ) {
- super( ...arguments );
- this.state = {
- isChecked,
- };
- }
-
- componentWillUnmount() {
- if ( this.state.isChecked !== this.props.isChecked ) {
- this.props.onChange( this.state.isChecked );
- }
- }
-
- render() {
- return (
-