-
Notifications
You must be signed in to change notification settings - Fork 4k
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
a661b27
commit bc79748
Showing
20 changed files
with
456 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
93 changes: 93 additions & 0 deletions
93
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,93 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useState, Children } from '@wordpress/element'; | ||
| import { KeyboardShortcuts, IconButton } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import PageControl from './page-control'; | ||
| import { BackButtonIcon, ForwardButtonIcon } from './vectors'; | ||
| import StartButton from './start-button'; | ||
|
|
||
| function Guide( { onFinish, children } ) { | ||
| const isMobile = useSelect( ( select ) => | ||
| select( 'core/viewport' ).isViewportMatch( '< small' ) ); | ||
|
|
||
| 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 ] } | ||
| { isMobile && ! canGoForward && ( | ||
| <StartButton onClick={ onFinish } /> | ||
| ) } | ||
| <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> | ||
| ) } | ||
| { ! isMobile && ! canGoForward && ( | ||
| <StartButton | ||
| className="edit-post-welcome-guide-modal__start-button" | ||
| onClick={ onFinish } | ||
| /> | ||
| ) } | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function Page( { children } ) { | ||
| return ( | ||
| <div className="edit-post-welcome-guide-modal__page"> | ||
| { children } | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| Guide.Page = Page; | ||
|
|
||
| export default Guide; |
70 changes: 70 additions & 0 deletions
70
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,70 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect, useDispatch } from '@wordpress/data'; | ||
| import { Modal } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { __experimentalCreateInterpolateElement } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Guide from './guide'; | ||
| import { CanvasImage, EditorImage, BlockLibraryImage, InserterIconImage } from './vectors'; | ||
|
|
||
| export default function WelcomeGuideModal() { | ||
| const areTipsEnabled = useSelect( ( select ) => select( 'core/nux' ).areTipsEnabled() ); | ||
|
|
||
| const { disableTips } = useDispatch( 'core/nux' ); | ||
|
|
||
| if ( ! areTipsEnabled ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Modal | ||
| className="edit-post-welcome-guide-modal" | ||
| shouldCloseOnClickOutside={ false } | ||
| onRequestClose={ disableTips } | ||
| > | ||
| <Guide onFinish={ disableTips }> | ||
| <Guide.Page> | ||
| <h1 className="edit-post-welcome-guide-modal__heading"> | ||
| { __( 'Welcome to the block editor' ) } | ||
| </h1> | ||
| <CanvasImage className="edit-post-welcome-guide-modal__image" /> | ||
| <p className="edit-post-welcome-guide-modal__text"> | ||
| { __( 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.' ) } | ||
| </p> | ||
| </Guide.Page> | ||
| <Guide.Page> | ||
| <h1 className="edit-post-welcome-guide-modal__heading"> | ||
| { __( 'Make each block your own' ) } | ||
| </h1> | ||
| <EditorImage className="edit-post-welcome-guide-modal__image" /> | ||
| <p className="edit-post-welcome-guide-modal__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> | ||
| </Guide.Page> | ||
| <Guide.Page> | ||
| <h1 className="edit-post-welcome-guide-modal__heading"> | ||
| { __( 'Get to know the block library' ) } | ||
| </h1> | ||
| <BlockLibraryImage className="edit-post-welcome-guide-modal__image" /> | ||
| <p className="edit-post-welcome-guide-modal__text"> | ||
| { __experimentalCreateInterpolateElement( | ||
| __( '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-modal__inserter-icon" | ||
| /> | ||
| ), | ||
| } | ||
| ) } | ||
| </p> | ||
| </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.