Everything except styling

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 } ) {
 	useBlockSelectionListener( postId );
 	useAdjustSidebarListener( 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;
 }

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 }
 		>
-			<div>
-				<Inserter disabled={ ! showInserter } position="bottom right" showInserterHelpPanel />
-				<DotTip tipId="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 kinds of content: you can insert text, headings, images, lists, and lots more!' ) }
-				</DotTip>
-			</div>
+			<Inserter disabled={ ! showInserter } position="bottom right" showInserterHelpPanel />
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
 			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />

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 }
 				/>
-				<div>
-					<IconButton
-						icon="admin-generic"
-						label={ __( 'Settings' ) }
-						onClick={ toggleGeneralSidebar }
-						isToggled={ isEditorSidebarOpened }
-						aria-expanded={ isEditorSidebarOpened }
-						shortcut={ shortcuts.toggleSidebar }
-					/>
-					<DotTip tipId="core/editor.settings">
-						{ __( 'You’ll find more settings for your page and blocks in the sidebar. Click the cog icon to toggle the sidebar open and closed.' ) }
-					</DotTip>
-				</div>
+				<IconButton
+					icon="admin-generic"
+					label={ __( 'Settings' ) }
+					onClick={ toggleGeneralSidebar }
+					isToggled={ isEditorSidebarOpened }
+					aria-expanded={ isEditorSidebarOpened }
+					shortcut={ shortcuts.toggleSidebar }
+				/>
 				<PinnedPlugins.Slot />
 				<MoreMenu />
 			</div>

packages/edit-post/src/components/layout/index.js

@@ -43,6 +43,7 @@ import Sidebar from '../sidebar';
 import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
 import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
 import FullscreenMode from '../fullscreen-mode';
+import WelcomeGuideModal from '../welcome-guide-modal';
 
 function Layout( {
 	mode,
@@ -91,6 +92,7 @@ function Layout( {
 				<KeyboardShortcutHelpModal />
 				<ManageBlocksModal />
 				<OptionsModal />
+				<WelcomeGuideModal />
 				{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
 				{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
 				<div className="edit-post-layout__metaboxes">

packages/edit-post/src/components/options-modal/index.js

@@ -25,7 +25,6 @@ import Section from './section';
 import {
 	EnablePluginDocumentSettingPanelOption,
 	EnablePublishSidebarOption,
-	EnableTipsOption,
 	EnablePanelOption,
 	EnableFeature,
 } from './options';
@@ -47,7 +46,6 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
 		>
 			<Section title={ __( 'General' ) }>
 				<EnablePublishSidebarOption label={ __( 'Pre-publish Checks' ) } />
-				<EnableTipsOption label={ __( 'Tips' ) } />
 				<EnableFeature feature="showInserterHelpPanel" label={ __( 'Inserter Help Panel' ) } />
 			</Section>
 			<Section title={ __( 'Document Panels' ) }>

packages/edit-post/src/components/options-modal/options/index.js

@@ -2,5 +2,4 @@ export { default as EnableCustomFieldsOption } from './enable-custom-fields';
 export { default as EnablePanelOption } from './enable-panel';
 export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel';
 export { default as EnablePublishSidebarOption } from './enable-publish-sidebar';
-export { default as EnableTipsOption } from './enable-tips';
 export { default as EnableFeature } from './enable-feature';

packages/edit-post/src/components/welcome-guide-modal/guide.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, Children } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PageControl from './page-control';
+
+function Guide( { onRequestClose, children } ) {
+	const [ currentPage, setCurrentPage ] = useState( 0 );
+
+	const numberOfPages = Children.count( children );
+	const canGoBack = currentPage > 0;
+	const canGoForward = currentPage < numberOfPages - 1;
+
+	const goBack = () => {
+		setCurrentPage( currentPage - 1 );
+	};
+
+	const goForward = () => {
+		setCurrentPage( currentPage + 1 );
+	};
+
+	return (
+		<>
+			{ children[ currentPage ] }
+			<div>
+				{ canGoBack && (
+					<Button onClick={ goBack }>{ __( 'Previous' ) }</Button>
+				) }
+				<PageControl
+					currentPage={ currentPage }
+					numberOfPages={ numberOfPages }
+					setCurrentPage={ setCurrentPage }
+				/>
+				{ canGoForward && (
+					<Button onClick={ goForward }>{ __( 'Next' ) }</Button>
+				) }
+				{ ! canGoForward && (
+					<Button onClick={ onRequestClose }>{ __( 'Get started' ) }</Button>
+				) }
+			</div>
+		</>
+	);
+}
+
+function Page( { children } ) {
+	return (
+		<div>
+			{ children }
+		</div>
+	);
+}
+
+Guide.Page = Page;
+
+export default Guide;

packages/edit-post/src/components/welcome-guide-modal/images.js

@@ -0,0 +1,13 @@
+export function BlockEditorSVG() {
+	return null;
+}
+
+export function BlockSVG() {
+	return null;
+}
+
+export function BlockLibrarySVG() {
+	return null;
+}
+
+export const inserterIconHTML = '';

packages/edit-post/src/components/welcome-guide-modal/index.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Modal } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Guide from './guide';
+import { BlockEditorSVG, BlockSVG, BlockLibrarySVG, inserterIconHTML } from './images';
+
+export default function WelcomeGuideModal() {
+	const isOpen = useSelect( ( select ) =>
+		select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ) );
+
+	const { toggleFeature } = useDispatch( 'core/edit-post' );
+
+	if ( ! isOpen ) {
+		return null;
+	}
+
+	const closeModal = () => {
+		toggleFeature( 'welcomeGuide' );
+	};
+
+	return (
+		<Modal title={ __( 'Welcome to the block editor' ) } onRequestClose={ closeModal }>
+			<Guide onRequestClose={ closeModal }>
+				<Guide.Page>
+					<BlockEditorSVG />
+					<div>
+						<h1>{ __( 'Welcome to the block editor' ) }</h1>
+						<p>
+							{ __( 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' ) }
+						</p>
+					</div>
+				</Guide.Page>
+				<Guide.Page>
+					<BlockSVG />
+					<div>
+						<h1>{ __( 'Make each block your own' ) }</h1>
+						<p>
+							{ __( 'Each block comes with its own set of controls for changing things like color, width, and alignment. These will show and hide automatically when you have a block selected.' ) }
+						</p>
+					</div>
+				</Guide.Page>
+				<Guide.Page>
+					<BlockLibrarySVG />
+					<div>
+						<h1>{ __( 'Get to know the block library' ) }</h1>
+						<p dangerouslySetInnerHTML={ {
+							__html: sprintf(
+								/* translators: %s: HTML which displays the inserter icon. */
+								__( 'All of the blocks available to you live in the Block Library. You’ll find it wherever you see the %s icon.' ),
+								inserterIconHTML
+							),
+						} } />
+					</div>
+				</Guide.Page>
+			</Guide>
+		</Modal>
+	);
+}

packages/edit-post/src/components/welcome-guide-modal/page-control.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { times } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { IconButton } from '@wordpress/components';
+
+export default function PageControl( { currentPage, numberOfPages, setCurrentPage } ) {
+	return (
+		<div>
+			{ times( numberOfPages, ( page ) => (
+				<IconButton
+					key={ page }
+					icon={ page === currentPage ? 'foo' : 'bar' }
+					onClick={ () => setCurrentPage( page ) }
+				/>
+			) ) }
+		</div>
+	);
+}

packages/edit-post/src/plugins/index.js

@@ -13,6 +13,7 @@ import CopyContentMenuItem from './copy-content-menu-item';
 import ManageBlocksMenuItem from './manage-blocks-menu-item';
 import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 
 registerPlugin( 'edit-post', {
 	render() {
@@ -29,6 +30,7 @@ registerPlugin( 'edit-post', {
 								{ __( 'Manage All Reusable Blocks' ) }
 							</MenuItem>
 							<KeyboardShortcutsHelpMenuItem onSelect={ onClose } />
+							<WelcomeGuideMenuItem onSelect={ onClose } />
 							<CopyContentMenuItem />
 						</>
 					) }

packages/edit-post/src/plugins/welcome-guide-menu-item/index.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function WelcomeGuideMenuItem() {
+	const { toggleFeature } = useDispatch( 'core/edit-post' );
+
+	return (
+		<MenuItem onClick={ () => toggleFeature( 'welcomeGuide' ) }>
+			{ __( 'Welcome Guide' ) }
+		</MenuItem>
+	);
+}

packages/edit-post/src/store/defaults.js

@@ -8,6 +8,7 @@ export const PREFERENCES_DEFAULTS = {
 	},
 	features: {
 		fixedToolbar: false,
+		welcomeGuide: true,
 		showInserterHelpPanel: true,
 	},
 	pinnedPluginItems: {},