diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 2ba44ab5345cb..74f0dbc5fabcc 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -17,9 +17,7 @@ import { BlockBreadcrumb, __unstableEditorStyles as EditorStyles, __experimentalUseResizeCanvas as useResizeCanvas, - __experimentalLibrary as Library, } from '@wordpress/block-editor'; -import { useViewportMatch } from '@wordpress/compose'; import { FullscreenMode, InterfaceSkeleton, @@ -28,7 +26,6 @@ import { import { EntitiesSavedStates, UnsavedChangesWarning } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { PluginArea } from '@wordpress/plugins'; -import { close } from '@wordpress/icons'; /** * Internal dependencies @@ -39,14 +36,14 @@ import { SidebarComplementaryAreaFills } from '../sidebar'; import BlockEditor from '../block-editor'; import KeyboardShortcuts from '../keyboard-shortcuts'; import GlobalStylesProvider from './global-styles-provider'; +import LeftSidebar from '../left-sidebar'; const interfaceLabels = { leftSidebar: __( 'Block Library' ), }; function Editor() { - const [ isInserterOpen, setIsInserterOpen ] = useState( false ); - const isMobile = useViewportMatch( 'medium', '<' ); + const [ leftSidebarContent, setLeftSidebarContent ] = useState( null ); const { isFullscreenActive, @@ -156,6 +153,9 @@ function Editor() { [ page?.context ] ); + const toggleLeftSidebarContent = ( value ) => + setLeftSidebarContent( leftSidebarContent === value ? null : value ); + return ( <> @@ -191,36 +191,14 @@ function Editor() { -
-
-
- { - if ( - isMobile - ) { - setIsInserterOpen( - false - ); - } - } } - /> -
- - ) + } sidebar={ sidebarIsOpened && ( @@ -233,11 +211,21 @@ function Editor() { openEntitiesSavedStates } isInserterOpen={ - isInserterOpen + leftSidebarContent === + 'inserter' } onToggleInserter={ () => - setIsInserterOpen( - ! isInserterOpen + toggleLeftSidebarContent( + 'inserter' + ) + } + isNavigationOpen={ + leftSidebarContent === + 'navigation' + } + onToggleNavigation={ () => + toggleLeftSidebarContent( + 'navigation' ) } /> @@ -251,8 +239,14 @@ function Editor() { { template && ( + setLeftSidebarContent( + isInserterOpen + ? 'inserter' + : null + ) } /> ) } diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 390a2a4b3a665..3ec502fc5ef48 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -25,29 +25,3 @@ .edit-site-visual-editor { 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/header/index.js b/packages/edit-site/src/components/header/index.js index 563a60602dae7..9f1b861b190d0 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -26,13 +26,15 @@ import TemplateSwitcher from '../template-switcher'; import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; -import FullscreenModeClose from './fullscreen-mode-close'; import DocumentActions from './document-actions'; +import NavigationToggle from './navigation-toggle'; export default function Header( { openEntitiesSavedStates, isInserterOpen, onToggleInserter, + isNavigationOpen, + onToggleNavigation, } ) { const { deviceType, @@ -89,7 +91,10 @@ export default function Header( {
- +
+ + { isOpen && ( +
+ { siteTitle } +
+ ) } +
+ ); +} + +export default NavigationToggle; diff --git a/packages/edit-site/src/components/header/navigation-toggle/style.scss b/packages/edit-site/src/components/header/navigation-toggle/style.scss new file mode 100644 index 0000000000000..d09ba381b481e --- /dev/null +++ b/packages/edit-site/src/components/header/navigation-toggle/style.scss @@ -0,0 +1,47 @@ +.edit-site-navigation-toggle { + display: none; + + @include break-medium() { + display: flex; + align-items: center; + background-color: #1e1e1e; + height: 61px; + border-radius: 0; + } +} + +.edit-site-navigation-toggle.is-open { + width: 300px; +} + +.edit-site-navigation-toggle__button { + color: #fff; + margin-left: 14px; + margin-right: 14px; + + &:hover { + color: #ddd; + } +} + +.edit-site-navigation-toggle.components-button.has-icon { + justify-content: flex-start; + padding: 0; + height: 32px; + width: 32px; + min-width: 32px; +} + +.edit-site-navigation-toggle__site-title { + font-style: normal; + font-weight: 600; + font-size: 13px; + line-height: 16px; + color: #ddd; + margin-right: 14px; + + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} diff --git a/packages/edit-site/src/components/header/navigation-toggle/test/index.js b/packages/edit-site/src/components/header/navigation-toggle/test/index.js new file mode 100644 index 0000000000000..45473c7ba02b8 --- /dev/null +++ b/packages/edit-site/src/components/header/navigation-toggle/test/index.js @@ -0,0 +1,66 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import NavigationToggle from '..'; + +jest.mock( '@wordpress/data/src/components/use-select', () => { + // This allows us to tweak the returned value on each test + const mock = jest.fn(); + return mock; +} ); + +jest.mock( '@wordpress/core-data' ); + +describe( 'NavigationToggle', () => { + describe( 'when in full screen mode', () => { + it( 'should display a user uploaded site icon if it exists', () => { + useSelect.mockImplementation( ( cb ) => { + return cb( () => ( { + isResolving: () => false, + isFeatureActive: () => true, + getEntityRecord: () => ( { + site_icon_url: 'https://fakeUrl.com', + } ), + } ) ); + } ); + + const { container } = render( ); + const siteIcon = container.querySelector( + '.edit-site-navigation-toggle__site-icon' + ); + + expect( siteIcon ).toBeTruthy(); + } ); + + it( 'should display a default site icon if no user uploaded site icon exists', () => { + useSelect.mockImplementation( ( cb ) => { + return cb( () => ( { + isResolving: () => false, + isFeatureActive: () => true, + getEntityRecord: () => ( { + site_icon_url: '', + } ), + } ) ); + } ); + + const { container } = render( ); + const siteIcon = container.querySelector( + '.edit-site-navigation-toggle__site-icon' + ); + const defaultIcon = container.querySelector( 'svg' ); + + expect( siteIcon ).toBeFalsy(); + expect( defaultIcon ).toBeTruthy(); + } ); + } ); +} ); diff --git a/packages/edit-site/src/components/left-sidebar/index.js b/packages/edit-site/src/components/left-sidebar/index.js new file mode 100644 index 0000000000000..409f8bf63deaf --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/index.js @@ -0,0 +1,19 @@ +/** + * Internal dependencies + */ +import InserterPanel from './inserter-panel'; +import NavigationPanel from './navigation-panel'; + +const LeftSidebar = ( { content, setContent } ) => { + if ( content === 'navigation' ) { + return ; + } + + if ( content === 'inserter' ) { + return setContent( null ) } />; + } + + return null; +}; + +export default LeftSidebar; diff --git a/packages/edit-site/src/components/left-sidebar/inserter-panel/index.js b/packages/edit-site/src/components/left-sidebar/inserter-panel/index.js new file mode 100644 index 0000000000000..5fb427f19f0a7 --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/inserter-panel/index.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { __experimentalLibrary as Library } from '@wordpress/block-editor'; +import { Button } from '@wordpress/components'; +import { useViewportMatch } from '@wordpress/compose'; +import { close } from '@wordpress/icons'; + +const InserterPanel = ( { closeInserter } ) => { + const isMobile = useViewportMatch( 'medium', '<' ); + + return ( +
+
+
+
+ { + if ( isMobile ) { + closeInserter(); + } + } } + /> +
+
+ ); +}; + +export default InserterPanel; diff --git a/packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss b/packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss new file mode 100644 index 0000000000000..6a3f030c4bd3d --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss @@ -0,0 +1,25 @@ +.edit-site-inserter-panel { + height: 100%; + display: flex; + flex-direction: column; +} + +.edit-site-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-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/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js new file mode 100644 index 0000000000000..9f3e2c5c120ac --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; +import { + __experimentalNavigation as Navigation, + __experimentalNavigationGroup as NavigationGroup, + __experimentalNavigationItem as NavigationItem, + __experimentalNavigationMenu as NavigationMenu, +} from '@wordpress/components'; +import { getBlockType, getBlockFromExample } from '@wordpress/blocks'; +import { BlockPreview } from '@wordpress/block-editor'; + +const NavigationPanel = () => { + const [ showPreview, setShowPreview ] = useState( false ); + + return ( +
+ + + + + + setShowPreview( true ) } + onMouseLeave={ () => setShowPreview( false ) } + /> + + + + + { showPreview && ( +
+ +
+ ) } +
+ ); +}; + +export default NavigationPanel; diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss new file mode 100644 index 0000000000000..59a115aee48f1 --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss @@ -0,0 +1,26 @@ +.edit-site-navigation-panel { + position: relative; + height: 100%; + width: 300px; + + .components-navigation { + height: 100%; + } +} + +.edit-site-navigation-panel__preview { + display: none; + border: $border-width solid $gray-400; + width: 300px; + padding: $grid-unit-20; + background: $white; + box-shadow: $shadow-popover; + border-radius: $radius-block-ui; + position: absolute; + top: $grid-unit-15; + left: calc(100% + #{$grid-unit-15}); + + @include break-medium { + display: block; + } +} diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 5ded981a29c71..a34d4c242423b 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -67,3 +67,4 @@ export function initialize( id, settings ) { } export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close'; +export { default as __experimentalNavigationToggle } from './components/header/navigation-toggle'; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 4bc2803965b47..a503424588b91 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -5,6 +5,9 @@ @import "./components/header/document-actions/style.scss"; @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/header/more-menu/style.scss"; +@import "./components/header/navigation-toggle/style.scss"; +@import "./components/left-sidebar/inserter-panel/style.scss"; +@import "./components/left-sidebar/navigation-panel/style.scss"; @import "./components/notices/style.scss"; @import "./components/page-switcher/style.scss"; @import "./components/sidebar/style.scss";