-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bb0529f
commit bab8f7b
Showing
20 changed files
with
361 additions
and
120 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
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
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
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
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
36 changes: 0 additions & 36 deletions
36
packages/edit-post/src/components/options-modal/options/deferred.js
This file was deleted.
Oops, something went wrong.
27 changes: 0 additions & 27 deletions
27
packages/edit-post/src/components/options-modal/options/enable-tips.js
This file was deleted.
Oops, something went wrong.
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
89 changes: 89 additions & 0 deletions
89
packages/edit-post/src/components/welcome-guide-modal/guide.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,89 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useState, Children } from '@wordpress/element'; | ||
| import { KeyboardShortcuts, IconButton, Button } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import PageControl from './page-control'; | ||
| import { BackButtonIcon, ForwardButtonIcon } from './vectors'; | ||
|
|
||
| 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 = () => { | ||
| if ( canGoBack ) { | ||
| setCurrentPage( currentPage - 1 ); | ||
| } | ||
| }; | ||
|
|
||
| const goForward = () => { | ||
| if ( canGoForward ) { | ||
| setCurrentPage( currentPage + 1 ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="edit-post-welcome-guide-modal__guide"> | ||
| <KeyboardShortcuts key={ currentPage } shortcuts={ { | ||
| left: goBack, | ||
| right: goForward, | ||
| } } /> | ||
| { children[ currentPage ] } | ||
| <div className="edit-post-welcome-guide-modal__footer"> | ||
| { canGoBack && ( | ||
| <IconButton | ||
| className="edit-post-welcome-guide-modal__back-button" | ||
| icon={ <BackButtonIcon /> } | ||
| onClick={ goBack } | ||
| > | ||
| { __( 'Previous' ) } | ||
| </IconButton> | ||
| ) } | ||
| <PageControl | ||
| currentPage={ currentPage } | ||
| numberOfPages={ numberOfPages } | ||
| setCurrentPage={ setCurrentPage } | ||
| /> | ||
| { canGoForward && ( | ||
| <IconButton | ||
| className="edit-post-welcome-guide-modal__forward-button" | ||
| icon={ <ForwardButtonIcon /> } | ||
| onClick={ goForward } | ||
| > | ||
| { __( 'Next' ) } | ||
| </IconButton> | ||
| ) } | ||
| { ! canGoForward && ( | ||
| <Button | ||
| className="edit-post-welcome-guide-modal__start-button" | ||
| isPrimary | ||
| isLarge | ||
| onClick={ onRequestClose } | ||
| > | ||
| { __( 'Get started' ) } | ||
| </Button> | ||
| ) } | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function Page( { children } ) { | ||
| return ( | ||
| <div className="edit-post-welcome-guide-modal__page"> | ||
| { children } | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| Guide.Page = Page; | ||
|
|
||
| export default Guide; |
65 changes: 65 additions & 0 deletions
65
packages/edit-post/src/components/welcome-guide-modal/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 |
|---|---|---|
| @@ -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 { CanvasImage, EditorImage, BlockLibraryImage, inserterIconHTML } from './vectors'; | ||
|
|
||
| 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 className="edit-post-welcome-guide-modal" onRequestClose={ closeModal }> | ||
| <Guide onRequestClose={ closeModal }> | ||
| <Guide.Page> | ||
| <CanvasImage /> | ||
| <div className="edit-post-welcome-guide-modal__text"> | ||
| <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> | ||
| <EditorImage /> | ||
| <div className="edit-post-welcome-guide-modal__text"> | ||
| <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> | ||
| <BlockLibraryImage /> | ||
| <div className="edit-post-welcome-guide-modal__text"> | ||
| <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> | ||
| ); | ||
| } |
28 changes: 28 additions & 0 deletions
28
packages/edit-post/src/components/welcome-guide-modal/page-control.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,28 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { times } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { IconButton } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { PageControlIcon } from './vectors'; | ||
|
|
||
| export default function PageControl( { currentPage, numberOfPages, setCurrentPage } ) { | ||
| return ( | ||
| <div className="edit-post-welcome-guide-modal__page-control"> | ||
| { times( numberOfPages, ( page ) => ( | ||
| <IconButton | ||
| key={ page } | ||
| icon={ <PageControlIcon isSelected={ page === currentPage } /> } | ||
| onClick={ () => setCurrentPage( page ) } | ||
| /> | ||
| ) ) } | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.