-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a welcome guide to the template editor. (#31330)
Co-authored-by: Daniel Richards <[email protected]>
- Loading branch information
Showing
6 changed files
with
245 additions
and
138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 111 additions & 0 deletions
111
packages/edit-post/src/components/welcome-guide/default.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Guide | ||
| className="edit-post-welcome-guide" | ||
| contentLabel={ __( 'Welcome to the block editor' ) } | ||
| finishButtonText={ __( 'Get started' ) } | ||
| onFinish={ () => toggleFeature( 'welcomeGuide' ) } | ||
| pages={ [ | ||
| { | ||
| image: <CanvasImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Welcome to the block editor' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { __( | ||
| 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' | ||
| ) } | ||
| </p> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| image: <EditorImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Make each block your own' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { __( | ||
| '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> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| image: <BlockLibraryImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Get to know the block library' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { createInterpolateElement( | ||
| __( | ||
| 'All of the blocks available to you live in the block library. You’ll find it wherever you see the <InserterIconImage /> icon.' | ||
| ), | ||
| { | ||
| InserterIconImage: ( | ||
| <InserterIconImage className="edit-post-welcome-guide__inserter-icon" /> | ||
| ), | ||
| } | ||
| ) } | ||
| </p> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| image: <DocumentationImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Learn how to use the block editor' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { __( | ||
| 'New to the block editor? Want to learn more about using it? ' | ||
| ) } | ||
| <ExternalLink | ||
| href={ __( | ||
| 'https://wordpress.org/support/article/wordpress-editor/' | ||
| ) } | ||
| > | ||
| { __( "Here's a detailed guide." ) } | ||
| </ExternalLink> | ||
| </p> | ||
| </> | ||
| ), | ||
| }, | ||
| ] } | ||
| /> | ||
| ); | ||
| } |
115 changes: 15 additions & 100 deletions
115
packages/edit-post/src/components/welcome-guide/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Guide | ||
| className="edit-post-welcome-guide" | ||
| contentLabel={ __( 'Welcome to the block editor' ) } | ||
| finishButtonText={ __( 'Get started' ) } | ||
| onFinish={ () => toggleFeature( 'welcomeGuide' ) } | ||
| pages={ [ | ||
| { | ||
| image: <CanvasImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Welcome to the block editor' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { __( | ||
| 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' | ||
| ) } | ||
| </p> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| image: <EditorImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Make each block your own' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { __( | ||
| '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> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| image: <BlockLibraryImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Get to know the block library' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { createInterpolateElement( | ||
| __( | ||
| 'All of the blocks available to you live in the block library. You’ll find it wherever you see the <InserterIconImage /> icon.' | ||
| ), | ||
| { | ||
| InserterIconImage: ( | ||
| <InserterIconImage className="edit-post-welcome-guide__inserter-icon" /> | ||
| ), | ||
| } | ||
| ) } | ||
| </p> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| image: <DocumentationImage />, | ||
| content: ( | ||
| <> | ||
| <h1 className="edit-post-welcome-guide__heading"> | ||
| { __( 'Learn how to use the block editor' ) } | ||
| </h1> | ||
| <p className="edit-post-welcome-guide__text"> | ||
| { __( | ||
| 'New to the block editor? Want to learn more about using it? ' | ||
| ) } | ||
| <ExternalLink | ||
| href={ __( | ||
| 'https://wordpress.org/support/article/wordpress-editor/' | ||
| ) } | ||
| > | ||
| { __( "Here's a detailed guide." ) } | ||
| </ExternalLink> | ||
| </p> | ||
| </> | ||
| ), | ||
| }, | ||
| ] } | ||
| /> | ||
| ); | ||
| return isTemplateMode ? <WelcomeGuideTemplate /> : <WelcomeGuideDefault />; | ||
| } |
Oops, something went wrong.