From 8dad8c8687c86c20b46c3ac682eab8c1c682069e Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 19 May 2021 17:05:54 +0400 Subject: [PATCH] Add a welcome guide to the template editor. (#31330) Co-authored-by: Daniel Richards --- .../post-editor-template-mode.test.js | 100 +++++++++------ .../src/components/welcome-guide/default.js | 111 +++++++++++++++++ .../src/components/welcome-guide/index.js | 115 +++--------------- .../src/components/welcome-guide/template.js | 42 +++++++ .../plugins/welcome-guide-menu-item/index.js | 14 ++- packages/edit-post/src/store/defaults.js | 1 + 6 files changed, 245 insertions(+), 138 deletions(-) create mode 100644 packages/edit-post/src/components/welcome-guide/default.js create mode 100644 packages/edit-post/src/components/welcome-guide/template.js diff --git a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js index d1f7bc1e7def2d..9d37bc9dc18c2f 100644 --- a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js +++ b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js @@ -18,6 +18,68 @@ const openSidebarPanelWithTitle = async ( title ) => { await panel.click(); }; +const disableTemplateWelcomeGuide = async () => { + // Turn off the welcome guide if it's visible. + const isWelcomeGuideActive = await page.evaluate( () => + wp.data + .select( 'core/edit-post' ) + .isFeatureActive( 'welcomeGuideTemplate' ) + ); + if ( isWelcomeGuideActive ) { + await page.evaluate( () => + wp.data + .dispatch( 'core/edit-post' ) + .toggleFeature( 'welcomeGuideTemplate' ) + ); + } +}; + +const switchToTemplateMode = async () => { + // Switch to template mode. + await openDocumentSettingsSidebar(); + await openSidebarPanelWithTitle( 'Template' ); + const editTemplateXPath = + "//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'Edit')]"; + const switchLink = await page.waitForXPath( editTemplateXPath ); + await switchLink.click(); + + // Check that we switched properly to edit mode. + await page.waitForXPath( + '//*[contains(@class, "components-snackbar")]/*[text()="Editing template. Changes made here affect all posts and pages that use the template."]' + ); + const title = await page.$eval( + '.edit-post-template-title', + ( el ) => el.innerText + ); + expect( title ).toContain( 'Editing template:' ); + + await disableTemplateWelcomeGuide(); +}; + +const createNewTemplate = async ( templateName ) => { + // Create a new custom template. + await openDocumentSettingsSidebar(); + await openSidebarPanelWithTitle( 'Template' ); + const newTemplateXPath = + "//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'New')]"; + const newButton = await page.waitForXPath( newTemplateXPath ); + await newButton.click(); + + // Fill the template title and submit. + const templateNameInputSelector = + '.edit-post-template__modal .components-text-control__input'; + await page.click( templateNameInputSelector ); + await page.keyboard.type( templateName ); + await page.keyboard.press( 'Enter' ); + + // Check that we switched properly to edit mode. + await page.waitForXPath( + '//*[contains(@class, "components-snackbar")]/*[text()="Custom template created. You\'re in template mode now."]' + ); + + await disableTemplateWelcomeGuide(); +}; + describe( 'Post Editor Template mode', () => { beforeAll( async () => { await trashAllPosts( 'wp_template' ); @@ -47,23 +109,7 @@ describe( 'Post Editor Template mode', () => { await saveDraft(); await page.reload(); - // Switch to template mode. - await openDocumentSettingsSidebar(); - await openSidebarPanelWithTitle( 'Template' ); - const editTemplateXPath = - "//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'Edit')]"; - const switchLink = await page.waitForXPath( editTemplateXPath ); - await switchLink.click(); - - // Check that we switched properly to edit mode. - await page.waitForXPath( - '//*[contains(@class, "components-snackbar")]/*[text()="Editing template. Changes made here affect all posts and pages that use the template."]' - ); - const title = await page.$eval( - '.edit-post-template-title', - ( el ) => el.innerText - ); - expect( title ).toContain( 'Editing template:' ); + await switchToTemplateMode(); // Edit the template await insertBlock( 'Paragraph' ); @@ -107,25 +153,7 @@ describe( 'Post Editor Template mode', () => { await saveDraft(); await page.reload(); - // Create a new custom template. - await openDocumentSettingsSidebar(); - await openSidebarPanelWithTitle( 'Template' ); - const newTemplateXPath = - "//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'New')]"; - const newButton = await page.waitForXPath( newTemplateXPath ); - await newButton.click(); - - // Fill the template title and submit. - const templateNameInputSelector = - '.edit-post-template__modal .components-text-control__input'; - await page.click( templateNameInputSelector ); - await page.keyboard.type( 'Blank Template' ); - await page.keyboard.press( 'Enter' ); - - // Check that we switched properly to edit mode. - await page.waitForXPath( - '//*[contains(@class, "components-snackbar")]/*[text()="Custom template created. You\'re in template mode now."]' - ); + await createNewTemplate( 'Blank Template' ); // Edit the template await insertBlock( 'Paragraph' ); diff --git a/packages/edit-post/src/components/welcome-guide/default.js b/packages/edit-post/src/components/welcome-guide/default.js new file mode 100644 index 00000000000000..f5f854420daa01 --- /dev/null +++ b/packages/edit-post/src/components/welcome-guide/default.js @@ -0,0 +1,111 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { ExternalLink, Guide } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { createInterpolateElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +/** + * Internal dependencies + */ +import { + CanvasImage, + EditorImage, + BlockLibraryImage, + DocumentationImage, + InserterIconImage, +} from './images'; +import { store as editPostStore } from '../../store'; + +export default function WelcomeGuideDefault() { + const { toggleFeature } = useDispatch( editPostStore ); + + return ( + toggleFeature( 'welcomeGuide' ) } + pages={ [ + { + image: , + content: ( + <> +

+ { __( 'Welcome to the block editor' ) } +

+

+ { __( + 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' + ) } +

+ + ), + }, + { + image: , + content: ( + <> +

+ { __( 'Make each block your own' ) } +

+

+ { __( + '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.' + ) } +

+ + ), + }, + { + image: , + content: ( + <> +

+ { __( 'Get to know the block library' ) } +

+

+ { createInterpolateElement( + __( + 'All of the blocks available to you live in the block library. You’ll find it wherever you see the icon.' + ), + { + InserterIconImage: ( + + ), + } + ) } +

+ + ), + }, + { + image: , + content: ( + <> +

+ { __( 'Learn how to use the block editor' ) } +

+

+ { __( + 'New to the block editor? Want to learn more about using it? ' + ) } + + { __( "Here's a detailed guide." ) } + +

+ + ), + }, + ] } + /> + ); +} diff --git a/packages/edit-post/src/components/welcome-guide/index.js b/packages/edit-post/src/components/welcome-guide/index.js index 78481c9467f86d..3be635c81e316e 100644 --- a/packages/edit-post/src/components/welcome-guide/index.js +++ b/packages/edit-post/src/components/welcome-guide/index.js @@ -1,117 +1,32 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { ExternalLink, Guide } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { createInterpolateElement } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { - CanvasImage, - EditorImage, - BlockLibraryImage, - DocumentationImage, - InserterIconImage, -} from './images'; +import WelcomeGuideDefault from './default'; +import WelcomeGuideTemplate from './template'; import { store as editPostStore } from '../../store'; export default function WelcomeGuide() { - const isActive = useSelect( - ( select ) => select( editPostStore ).isFeatureActive( 'welcomeGuide' ), - [] - ); + const { isActive, isTemplateMode } = useSelect( ( select ) => { + const { isFeatureActive, isEditingTemplate } = select( editPostStore ); + const _isTemplateMode = isEditingTemplate(); + const feature = _isTemplateMode + ? 'welcomeGuideTemplate' + : 'welcomeGuide'; - const { toggleFeature } = useDispatch( editPostStore ); + return { + isActive: isFeatureActive( feature ), + isTemplateMode: _isTemplateMode, + }; + }, [] ); if ( ! isActive ) { return null; } - return ( - toggleFeature( 'welcomeGuide' ) } - pages={ [ - { - image: , - content: ( - <> -

- { __( 'Welcome to the block editor' ) } -

-

- { __( - 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' - ) } -

- - ), - }, - { - image: , - content: ( - <> -

- { __( 'Make each block your own' ) } -

-

- { __( - '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.' - ) } -

- - ), - }, - { - image: , - content: ( - <> -

- { __( 'Get to know the block library' ) } -

-

- { createInterpolateElement( - __( - 'All of the blocks available to you live in the block library. You’ll find it wherever you see the icon.' - ), - { - InserterIconImage: ( - - ), - } - ) } -

- - ), - }, - { - image: , - content: ( - <> -

- { __( 'Learn how to use the block editor' ) } -

-

- { __( - 'New to the block editor? Want to learn more about using it? ' - ) } - - { __( "Here's a detailed guide." ) } - -

- - ), - }, - ] } - /> - ); + return isTemplateMode ? : ; } diff --git a/packages/edit-post/src/components/welcome-guide/template.js b/packages/edit-post/src/components/welcome-guide/template.js new file mode 100644 index 00000000000000..4cd6380a6fdd1f --- /dev/null +++ b/packages/edit-post/src/components/welcome-guide/template.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { Guide } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { DocumentationImage } from './images'; +import { store as editPostStore } from '../../store'; + +export default function WelcomeGuideTemplate() { + const { toggleFeature } = useDispatch( editPostStore ); + + return ( + toggleFeature( 'welcomeGuideTemplate' ) } + pages={ [ + { + image: , + content: ( + <> +

+ { __( 'Welcome to the template editor' ) } +

+

+ { __( + 'Templates express the layout of the site. Customize all aspects of your posts and pages using the tools of blocks and patterns.' + ) } +

+ + ), + }, + ] } + /> + ); +} diff --git a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js index 1969311e6c2461..2c0a6b02fc3df9 100644 --- a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js +++ b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -11,10 +11,20 @@ import { __ } from '@wordpress/i18n'; import { store as editPostStore } from '../../store'; export default function WelcomeGuideMenuItem() { + const isTemplateMode = useSelect( + ( select ) => select( editPostStore ).isEditingTemplate(), + [] + ); const { toggleFeature } = useDispatch( editPostStore ); return ( - toggleFeature( 'welcomeGuide' ) }> + + toggleFeature( + isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' + ) + } + > { __( 'Welcome Guide' ) } ); diff --git a/packages/edit-post/src/store/defaults.js b/packages/edit-post/src/store/defaults.js index 04c5b86a0a5925..05cb4c8e1957a3 100644 --- a/packages/edit-post/src/store/defaults.js +++ b/packages/edit-post/src/store/defaults.js @@ -12,6 +12,7 @@ export const PREFERENCES_DEFAULTS = { showIconLabels: false, themeStyles: true, showBlockBreadcrumbs: true, + welcomeGuideTemplate: true, }, hiddenBlockTypes: [], preferredStyleVariations: {},