From cfc67aa549dbe2f30fe3b827863159a02fe3a3d9 Mon Sep 17 00:00:00 2001 From: Copons Date: Mon, 1 Feb 2021 16:25:31 +0000 Subject: [PATCH 01/34] Move the Inserter into its own component for readability --- .../edit-site/src/components/editor/index.js | 49 ++----------------- .../secondary-sidebar/inserter-sidebar.js | 38 ++++++++++++++ 2 files changed, 43 insertions(+), 44 deletions(-) create mode 100644 packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 1c056ab93be4bc..d8f7b7e2545ebc 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -10,11 +10,7 @@ import { Button, } from '@wordpress/components'; import { EntityProvider } from '@wordpress/core-data'; -import { - BlockContextProvider, - BlockBreadcrumb, - __experimentalLibrary as Library, -} from '@wordpress/block-editor'; +import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor'; import { FullscreenMode, InterfaceSkeleton, @@ -24,11 +20,6 @@ import { import { EntitiesSavedStates, UnsavedChangesWarning } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { PluginArea } from '@wordpress/plugins'; -import { close } from '@wordpress/icons'; -import { - useViewportMatch, - __experimentalUseDialog as useDialog, -} from '@wordpress/compose'; /** * Internal dependencies @@ -41,6 +32,7 @@ import KeyboardShortcuts from '../keyboard-shortcuts'; import GlobalStylesProvider from './global-styles-provider'; import NavigationSidebar from '../navigation-sidebar'; import URLQueryController from '../url-query-controller'; +import InserterSidebar from '../secondary-sidebar/inserter-sidebar'; import { store as editSiteStore } from '../../store'; const interfaceLabels = { @@ -155,12 +147,6 @@ function Editor( { initialSettings } ) { } }, [ isNavigationOpen ] ); - const isMobile = useViewportMatch( 'medium', '<' ); - - const [ inserterDialogRef, inserterDialogProps ] = useDialog( { - onClose: () => setIsInserterOpened( false ), - } ); - // Don't render the Editor until the settings are set and loaded if ( ! settings?.siteUrl ) { return null; @@ -198,34 +184,9 @@ function Editor( { initialSettings } ) { labels={ interfaceLabels } drawer={ } secondarySidebar={ - isInserterOpen ? ( -
-
-
-
- -
-
- ) : null + isInserterOpen && ( + + ) } sidebar={ sidebarIsOpened && ( diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js new file mode 100644 index 00000000000000..4cf913c1d326af --- /dev/null +++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { Button } from '@wordpress/components'; +import { __experimentalLibrary as Library } from '@wordpress/block-editor'; +import { close } from '@wordpress/icons'; +import { + useViewportMatch, + __experimentalUseDialog as useDialog, +} from '@wordpress/compose'; + +export default function InserterSidebar() { + const { setIsInserterOpened } = useDispatch( 'core/edit-site' ); + + const isMobile = useViewportMatch( 'medium', '<' ); + const [ inserterDialogRef, inserterDialogProps ] = useDialog( { + onClose: () => setIsInserterOpened( false ), + } ); + + return ( +
+
+
+
+ +
+
+ ); +} From a554ad62b5f401fdf0fc805a0b7ddd1ff9fd31b3 Mon Sep 17 00:00:00 2001 From: Copons Date: Mon, 1 Feb 2021 16:35:54 +0000 Subject: [PATCH 02/34] Also move the styles --- .../src/components/editor/style.scss | 26 -------------- .../components/secondary-sidebar/style.scss | 25 +++++++++++++ packages/edit-site/src/style.scss | 35 ++++++++++--------- 3 files changed, 43 insertions(+), 43 deletions(-) create mode 100644 packages/edit-site/src/components/secondary-sidebar/style.scss diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index b400e93cce2a98..65f41f0b82cacb 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -31,29 +31,3 @@ background-color: $white; } } - -.edit-site-editor__inserter-panel { - height: 100%; - display: flex; - flex-direction: column; -} - -.edit-site-editor__inserter-panel-header { - padding-top: $grid-unit-10; - padding-right: $grid-unit-10; - display: flex; - justify-content: flex-end; - - @include break-medium() { - display: none; - } -} - -.edit-site-editor__inserter-panel-content { - // Leave space for the close button - height: calc(100% - #{$button-size} - #{$grid-unit-10}); - - @include break-medium() { - height: 100%; - } -} diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss new file mode 100644 index 00000000000000..5c902db6b52f10 --- /dev/null +++ b/packages/edit-site/src/components/secondary-sidebar/style.scss @@ -0,0 +1,25 @@ +.edit-site-editor__inserter-panel { + height: 100%; + display: flex; + flex-direction: column; +} + +.edit-site-editor__inserter-panel-header { + padding-top: $grid-unit-10; + padding-right: $grid-unit-10; + display: flex; + justify-content: flex-end; + + @include break-medium() { + display: none; + } +} + +.edit-site-editor__inserter-panel-content { + // Leave space for the close button + height: calc(100% - #{$button-size} - #{$grid-unit-10}); + + @include break-medium() { + height: 100%; + } +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 636d278dc40e05..c10ce32ae5b0ae 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -1,18 +1,19 @@ -@import "../../interface/src/style.scss"; +@import '../../interface/src/style.scss'; -@import "./components/block-editor/style.scss"; -@import "./components/header/style.scss"; -@import "./components/header/document-actions/style.scss"; -@import "./components/header/more-menu/style.scss"; -@import "./components/navigation-sidebar/navigation-toggle/style.scss"; -@import "./components/navigation-sidebar/navigation-panel/style.scss"; -@import "./components/notices/style.scss"; -@import "./components/sidebar/style.scss"; -@import "./components/sidebar/settings-header/style.scss"; -@import "./components/sidebar/template-card/style.scss"; -@import "./components/editor/style.scss"; -@import "./components/template-details/style.scss"; -@import "./components/template-part-converter/style.scss"; +@import './components/block-editor/style.scss'; +@import './components/header/style.scss'; +@import './components/header/document-actions/style.scss'; +@import './components/header/more-menu/style.scss'; +@import './components/navigation-sidebar/navigation-toggle/style.scss'; +@import './components/navigation-sidebar/navigation-panel/style.scss'; +@import './components/notices/style.scss'; +@import './components/sidebar/style.scss'; +@import './components/sidebar/settings-header/style.scss'; +@import './components/sidebar/template-card/style.scss'; +@import './components/editor/style.scss'; +@import './components/template-details/style.scss'; +@import './components/template-part-converter/style.scss'; +@import './components/secondary-sidebar/style.scss'; // In order to use mix-blend-mode, this element needs to have an explicitly set background-color. // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations. @@ -21,7 +22,7 @@ html.wp-toolbar { } body.toplevel_page_gutenberg-edit-site { - @include wp-admin-reset(".edit-site"); + @include wp-admin-reset( '.edit-site' ); } .edit-site, @@ -36,7 +37,7 @@ body.toplevel_page_gutenberg-edit-site { @include break-small { bottom: 0; left: 0; - min-height: calc(100vh - #{$admin-bar-height-big}); + min-height: calc( 100vh - #{$admin-bar-height-big} ); position: absolute; right: 0; top: 0; @@ -44,7 +45,7 @@ body.toplevel_page_gutenberg-edit-site { // The WP header height changes at this breakpoint. @include break-medium { - min-height: calc(100vh - #{$admin-bar-height}); + min-height: calc( 100vh - #{$admin-bar-height} ); } // Todo: Remove this rule when edit site gets support From 2fb3657c405fb7d5537122a03127e67fdf1b4fbb Mon Sep 17 00:00:00 2001 From: Copons Date: Mon, 1 Feb 2021 16:42:45 +0000 Subject: [PATCH 03/34] Duplicate the inserter behaviour into a new secondary sidebar --- .../edit-site/src/components/editor/index.js | 15 +++++-- .../edit-site/src/components/header/index.js | 32 +++++++++++-- .../block-navigation-sidebar.js | 45 +++++++++++++++++++ .../components/secondary-sidebar/style.scss | 26 +++++++++++ packages/edit-site/src/store/actions.js | 13 ++++++ packages/edit-site/src/store/reducer.js | 33 ++++++++++++-- packages/edit-site/src/store/selectors.js | 11 +++++ 7 files changed, 165 insertions(+), 10 deletions(-) create mode 100644 packages/edit-site/src/components/secondary-sidebar/block-navigation-sidebar.js diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index d8f7b7e2545ebc..610f8186efe3d7 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -33,6 +33,7 @@ import GlobalStylesProvider from './global-styles-provider'; import NavigationSidebar from '../navigation-sidebar'; import URLQueryController from '../url-query-controller'; import InserterSidebar from '../secondary-sidebar/inserter-sidebar'; +import BlockNavigationSidebar from '../secondary-sidebar/block-navigation-sidebar'; import { store as editSiteStore } from '../../store'; const interfaceLabels = { @@ -51,6 +52,7 @@ function Editor( { initialSettings } ) { page, template, isNavigationOpen, + isBlockNavigationOpen, } = useSelect( ( select ) => { const { isFeatureActive, @@ -60,6 +62,7 @@ function Editor( { initialSettings } ) { getEditedPostId, getPage, isNavigationOpened, + isBlockNavigationOpened, } = select( editSiteStore ); const postType = getEditedPostType(); const postId = getEditedPostId(); @@ -87,6 +90,7 @@ function Editor( { initialSettings } ) { : null, entityId: postId, isNavigationOpen: isNavigationOpened(), + isBlockNavigationOpen: isBlockNavigationOpened(), }; }, [] ); const { updateEditorSettings } = useDispatch( 'core/editor' ); @@ -184,9 +188,14 @@ function Editor( { initialSettings } ) { labels={ interfaceLabels } drawer={ } secondarySidebar={ - isInserterOpen && ( - - ) + <> + { isInserterOpen && ( + + ) } + { isBlockNavigationOpen && ( + + ) } + } sidebar={ sidebarIsOpened && ( diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 4bf2886f020e04..ae43a1c270aa7c 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -4,16 +4,16 @@ import { useRef } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; import { - BlockNavigationDropdown, ToolSelector, BlockToolbar, __experimentalPreviewOptions as PreviewOptions, } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { PinnedItems } from '@wordpress/interface'; -import { _x } from '@wordpress/i18n'; +import { _x, __ } from '@wordpress/i18n'; import { plus } from '@wordpress/icons'; import { Button } from '@wordpress/components'; +import { SVG, Path } from '@wordpress/primitives'; /** * Internal dependencies @@ -26,6 +26,17 @@ import DocumentActions from './document-actions'; import TemplateDetails from '../template-details'; import { store as editSiteStore } from '../../store'; +const MenuIcon = ( + + + +); + export default function Header( { openEntitiesSavedStates } ) { const inserterButton = useRef(); const { @@ -35,6 +46,7 @@ export default function Header( { openEntitiesSavedStates } ) { template, templateType, isInserterOpen, + isBlockNavigationOpen, } = useSelect( ( select ) => { const { __experimentalGetPreviewDeviceType, @@ -42,6 +54,7 @@ export default function Header( { openEntitiesSavedStates } ) { getEditedPostType, getEditedPostId, isInserterOpened, + isBlockNavigationOpened, } = select( editSiteStore ); const { getEntityRecord } = select( 'core' ); const { __experimentalGetTemplateInfo: getTemplateInfo } = select( @@ -63,12 +76,14 @@ export default function Header( { openEntitiesSavedStates } ) { template: record, templateType: postType, isInserterOpen: isInserterOpened(), + isBlockNavigationOpen: isBlockNavigationOpened(), }; }, [] ); const { __experimentalSetPreviewDeviceType: setPreviewDeviceType, setIsInserterOpened, + setIsBlockNavigationOpened, } = useDispatch( editSiteStore ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -106,7 +121,18 @@ export default function Header( { openEntitiesSavedStates } ) { - +