From 22529957a59751a404aee068a3468b0cb98b2770 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 21 Sep 2020 15:43:23 +0200 Subject: [PATCH 01/18] Add navigation sidebar --- .../edit-site/src/components/editor/index.js | 87 +++++---- .../src/components/editor/style.scss | 5 + .../edit-site/src/components/header/index.js | 9 +- .../header/navigation-button/index.js | 77 ++++++++ .../header/navigation-button/style.scss | 38 ++++ .../components/navigation-sidebar/index.js | 180 ++++++++++++++++++ .../components/navigation-sidebar/style.scss | 16 ++ packages/edit-site/src/style.scss | 2 + 8 files changed, 379 insertions(+), 35 deletions(-) create mode 100644 packages/edit-site/src/components/header/navigation-button/index.js create mode 100644 packages/edit-site/src/components/header/navigation-button/style.scss create mode 100644 packages/edit-site/src/components/navigation-sidebar/index.js create mode 100644 packages/edit-site/src/components/navigation-sidebar/style.scss diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 2ba44ab5345cb..269b1adb27f10 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -39,15 +39,33 @@ import { SidebarComplementaryAreaFills } from '../sidebar'; import BlockEditor from '../block-editor'; import KeyboardShortcuts from '../keyboard-shortcuts'; import GlobalStylesProvider from './global-styles-provider'; +import NavigationSidebar from '../navigation-sidebar'; const interfaceLabels = { leftSidebar: __( 'Block Library' ), }; function Editor() { - const [ isInserterOpen, setIsInserterOpen ] = useState( false ); + const [ isInserterOpen, _setIsInserterOpen ] = useState( false ); + const [ isNavigationOpen, _setIsNavigationOpen ] = useState( false ); const isMobile = useViewportMatch( 'medium', '<' ); + const setIsInserterOpen = ( value ) => { + if ( isNavigationOpen && value ) { + _setIsNavigationOpen( false ); + } + + _setIsInserterOpen( value ); + }; + + const setIsNavigationOpen = ( value ) => { + if ( isInserterOpen && value ) { + _setIsInserterOpen( false ); + } + + _setIsNavigationOpen( value ); + }; + const { isFullscreenActive, deviceType, @@ -156,6 +174,32 @@ function Editor() { [ page?.context ] ); + let leftSidebar = null; + if ( isNavigationOpen ) { + leftSidebar = ; + } else if ( isInserterOpen ) { + leftSidebar = ( +
+
+
+
+ { + if ( isMobile ) { + setIsInserterOpen( false ); + } + } } + /> +
+
+ ); + } + return ( <> @@ -190,38 +234,7 @@ function Editor() { -
-
-
- { - if ( - isMobile - ) { - setIsInserterOpen( - false - ); - } - } } - /> -
- - ) - } + leftSidebar={ leftSidebar } sidebar={ sidebarIsOpened && ( @@ -240,6 +253,14 @@ function Editor() { ! isInserterOpen ) } + isNavigationOpen={ + isNavigationOpen + } + onToggleNavigation={ () => + setIsNavigationOpen( + ! isNavigationOpen + ) + } /> } content={ diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 390a2a4b3a665..adc167292f4a6 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -51,3 +51,8 @@ height: 100%; } } + +.interface-interface-skeleton__left-sidebar .components-navigation { + width: 300px; + height: 100%; +} diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 563a60602dae7..0ee90845fa38b 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 NavigationButton from './navigation-button'; export default function Header( { openEntitiesSavedStates, isInserterOpen, onToggleInserter, + isNavigationOpen, + onToggleNavigation, } ) { const { deviceType, @@ -89,7 +91,10 @@ export default function Header( {
- +
+ + { isOpen && ( +
{ siteTitle }
+ ) } +
+ ); +} + +export default NavigationButton; diff --git a/packages/edit-site/src/components/header/navigation-button/style.scss b/packages/edit-site/src/components/header/navigation-button/style.scss new file mode 100644 index 0000000000000..66e241d660799 --- /dev/null +++ b/packages/edit-site/src/components/header/navigation-button/style.scss @@ -0,0 +1,38 @@ +.edit-site-navigation-button_wrapper { + display: flex; + align-items: center; + background-color: #1e1e1e; + height: 61px; + border-radius: 0; +} + +.edit-site-navigation-button { + color: #fff; + margin-left: 14px; + margin-right: 14px; +} + +.edit-site-navigation-button.components-button.has-icon { + justify-content: flex-start; + padding: 0; + height: 32px; + width: 32px; +} + +.edit-site-navigation-button_wrapper.is-open { + width: 300px; +} + +.edit-site-navigation-name { + 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/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js new file mode 100644 index 0000000000000..6fbac231d9ae8 --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/index.js @@ -0,0 +1,180 @@ +/** + * 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 NavigationSidebar = () => { + const [ activeItem, setActiveItem ] = useState( 'item-1' ); + const [ activeMenu, setActiveMenu ] = useState( 'root' ); + const [ showPreview, setShowPreview ] = useState( false ); + + return ( + <> +
+ + + + setShowPreview( true ) } + onMouseLeave={ () => setShowPreview( false ) } + /> + + + + + + + + { + event.preventDefault(); + setActiveItem( 'item-5' ); + } } + > + WordPress Logo + + + + + + + setActiveItem( 'child-1' ) } + /> + setActiveItem( 'child-2' ) } + /> + + + + + + + setActiveItem( 'sub-child-1' ) } + /> + setActiveItem( 'sub-child-2' ) } + /> + + + + + + + + + + + + + + { showPreview && ( +
+ +
+ ) } +
+ + ); +}; + +export default NavigationSidebar; diff --git a/packages/edit-site/src/components/navigation-sidebar/style.scss b/packages/edit-site/src/components/navigation-sidebar/style.scss new file mode 100644 index 0000000000000..2f4aa191b2bb9 --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/style.scss @@ -0,0 +1,16 @@ +.edit-site-navigation-sidebar_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/style.scss b/packages/edit-site/src/style.scss index 4bc2803965b47..99469acc38b5e 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -5,11 +5,13 @@ @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-button/style.scss"; @import "./components/notices/style.scss"; @import "./components/page-switcher/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/template-switcher/style.scss"; @import "./components/editor/style.scss"; +@import "./components/navigation-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. From 2fe5b93bd061911577791cbbe9381c4d27e03f9d Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 22 Sep 2020 13:44:03 +0200 Subject: [PATCH 02/18] Replace is*Open states with a single state --- .../edit-site/src/components/editor/index.js | 54 +++++++++---------- 1 file changed, 24 insertions(+), 30 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 269b1adb27f10..fe598f491a604 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -46,26 +46,9 @@ const interfaceLabels = { }; function Editor() { - const [ isInserterOpen, _setIsInserterOpen ] = useState( false ); - const [ isNavigationOpen, _setIsNavigationOpen ] = useState( false ); + const [ leftSidebarContent, setLeftSidebarContent ] = useState( null ); const isMobile = useViewportMatch( 'medium', '<' ); - const setIsInserterOpen = ( value ) => { - if ( isNavigationOpen && value ) { - _setIsNavigationOpen( false ); - } - - _setIsInserterOpen( value ); - }; - - const setIsNavigationOpen = ( value ) => { - if ( isInserterOpen && value ) { - _setIsInserterOpen( false ); - } - - _setIsNavigationOpen( value ); - }; - const { isFullscreenActive, deviceType, @@ -174,16 +157,19 @@ function Editor() { [ page?.context ] ); + const toggleLeftSidebarContent = ( value ) => + setLeftSidebarContent( leftSidebarContent === value ? null : value ); + let leftSidebar = null; - if ( isNavigationOpen ) { + if ( leftSidebarContent === 'navigation' ) { leftSidebar = ; - } else if ( isInserterOpen ) { + } else if ( leftSidebarContent === 'inserter' ) { leftSidebar = (
@@ -191,7 +177,7 @@ function Editor() { showInserterHelpPanel onSelect={ () => { if ( isMobile ) { - setIsInserterOpen( false ); + setLeftSidebarContent( null ); } } } /> @@ -246,19 +232,21 @@ function Editor() { openEntitiesSavedStates } isInserterOpen={ - isInserterOpen + leftSidebarContent === + 'inserter' } onToggleInserter={ () => - setIsInserterOpen( - ! isInserterOpen + toggleLeftSidebarContent( + 'inserter' ) } isNavigationOpen={ - isNavigationOpen + leftSidebarContent === + 'navigation' } onToggleNavigation={ () => - setIsNavigationOpen( - ! isNavigationOpen + toggleLeftSidebarContent( + 'navigation' ) } /> @@ -272,8 +260,14 @@ function Editor() { { template && ( + setLeftSidebarContent( + isInserterOpen + ? 'inserter' + : null + ) } /> ) } From ea17f5e2701ce61c30d2f93adcdcdde7ee65ee8d Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 22 Sep 2020 15:37:32 +0200 Subject: [PATCH 03/18] Extract left sidebar components --- .../edit-site/src/components/editor/index.js | 43 +++++-------------- .../src/components/editor/style.scss | 26 ----------- .../src/components/left-sidebar/index.js | 21 +++++++++ .../left-sidebar/inserter-panel/index.js | 31 +++++++++++++ .../left-sidebar/inserter-panel/style.scss | 25 +++++++++++ .../navigation-panel}/index.js | 4 +- .../navigation-panel}/style.scss | 0 packages/edit-site/src/style.scss | 3 +- 8 files changed, 92 insertions(+), 61 deletions(-) create mode 100644 packages/edit-site/src/components/left-sidebar/index.js create mode 100644 packages/edit-site/src/components/left-sidebar/inserter-panel/index.js create mode 100644 packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss rename packages/edit-site/src/components/{navigation-sidebar => left-sidebar/navigation-panel}/index.js (98%) rename packages/edit-site/src/components/{navigation-sidebar => left-sidebar/navigation-panel}/style.scss (100%) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index fe598f491a604..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,7 +36,7 @@ import { SidebarComplementaryAreaFills } from '../sidebar'; import BlockEditor from '../block-editor'; import KeyboardShortcuts from '../keyboard-shortcuts'; import GlobalStylesProvider from './global-styles-provider'; -import NavigationSidebar from '../navigation-sidebar'; +import LeftSidebar from '../left-sidebar'; const interfaceLabels = { leftSidebar: __( 'Block Library' ), @@ -47,7 +44,6 @@ const interfaceLabels = { function Editor() { const [ leftSidebarContent, setLeftSidebarContent ] = useState( null ); - const isMobile = useViewportMatch( 'medium', '<' ); const { isFullscreenActive, @@ -160,32 +156,6 @@ function Editor() { const toggleLeftSidebarContent = ( value ) => setLeftSidebarContent( leftSidebarContent === value ? null : value ); - let leftSidebar = null; - if ( leftSidebarContent === 'navigation' ) { - leftSidebar = ; - } else if ( leftSidebarContent === 'inserter' ) { - leftSidebar = ( -
-
-
-
- { - if ( isMobile ) { - setLeftSidebarContent( null ); - } - } } - /> -
-
- ); - } - return ( <> @@ -220,7 +190,16 @@ function Editor() { + } sidebar={ sidebarIsOpened && ( diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index adc167292f4a6..41d7f0760c8a3 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -26,32 +26,6 @@ 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%; - } -} - .interface-interface-skeleton__left-sidebar .components-navigation { width: 300px; height: 100%; 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..7edc915faa421 --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/index.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import InserterPanel from './inserter-panel'; +import NavigationPanel from './navigation-panel'; + +const LeftSidebar = ( { content, setContent } ) => { + let leftSidebar = null; + + if ( content === 'navigation' ) { + leftSidebar = ; + } else if ( content === 'inserter' ) { + leftSidebar = ( + setContent( null ) } /> + ); + } + + return leftSidebar; +}; + +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..5781a5a348bb5 --- /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..2bd042d780415 --- /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/navigation-sidebar/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js similarity index 98% rename from packages/edit-site/src/components/navigation-sidebar/index.js rename to packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 6fbac231d9ae8..f45becc191dc3 100644 --- a/packages/edit-site/src/components/navigation-sidebar/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -11,7 +11,7 @@ import { import { getBlockType, getBlockFromExample } from '@wordpress/blocks'; import { BlockPreview } from '@wordpress/block-editor'; -const NavigationSidebar = () => { +const NavigationPanel = () => { const [ activeItem, setActiveItem ] = useState( 'item-1' ); const [ activeMenu, setActiveMenu ] = useState( 'root' ); const [ showPreview, setShowPreview ] = useState( false ); @@ -177,4 +177,4 @@ const NavigationSidebar = () => { ); }; -export default NavigationSidebar; +export default NavigationPanel; diff --git a/packages/edit-site/src/components/navigation-sidebar/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss similarity index 100% rename from packages/edit-site/src/components/navigation-sidebar/style.scss rename to packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 99469acc38b5e..bdffc8c2ba94e 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -6,12 +6,13 @@ @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/header/more-menu/style.scss"; @import "./components/header/navigation-button/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"; @import "./components/template-switcher/style.scss"; @import "./components/editor/style.scss"; -@import "./components/navigation-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. From c96a2cda85f211731b165511f4aecd77847cf006 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 22 Sep 2020 15:37:52 +0200 Subject: [PATCH 04/18] Add back to dashboard item --- .../src/components/left-sidebar/navigation-panel/index.js | 6 ++++++ 1 file changed, 6 insertions(+) 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 index f45becc191dc3..840b5a251878f 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -25,6 +25,12 @@ const NavigationPanel = () => { onActivateMenu={ setActiveMenu } > + + Date: Tue, 22 Sep 2020 15:44:53 +0200 Subject: [PATCH 05/18] Change NavigationButton and FullscreenModalClose to DashboardButton --- .../index.js | 14 ++--- .../style.scss | 24 ++++--- .../test/index.js | 12 ++-- .../header/fullscreen-mode-close/index.js | 63 ------------------- .../header/fullscreen-mode-close/style.scss | 33 ---------- .../edit-site/src/components/header/index.js | 4 +- packages/edit-site/src/style.scss | 3 +- 7 files changed, 30 insertions(+), 123 deletions(-) rename packages/edit-site/src/components/header/{navigation-button => dashboard-button}/index.js (80%) rename packages/edit-site/src/components/header/{navigation-button => dashboard-button}/style.scss (51%) rename packages/edit-site/src/components/header/{fullscreen-mode-close => dashboard-button}/test/index.js (82%) delete mode 100644 packages/edit-site/src/components/header/fullscreen-mode-close/index.js delete mode 100644 packages/edit-site/src/components/header/fullscreen-mode-close/style.scss diff --git a/packages/edit-site/src/components/header/navigation-button/index.js b/packages/edit-site/src/components/header/dashboard-button/index.js similarity index 80% rename from packages/edit-site/src/components/header/navigation-button/index.js rename to packages/edit-site/src/components/header/dashboard-button/index.js index 9aa08aa5369ee..096ddbff42ca5 100644 --- a/packages/edit-site/src/components/header/navigation-button/index.js +++ b/packages/edit-site/src/components/header/dashboard-button/index.js @@ -6,7 +6,7 @@ import { Button, Icon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { wordpress } from '@wordpress/icons'; -function NavigationButton( { icon, isOpen, onClick } ) { +function DashboardButton( { icon, isOpen, onClick } ) { const { isActive, isRequestingSiteIcon, @@ -41,7 +41,7 @@ function NavigationButton( { icon, isOpen, onClick } ) { buttonIcon = ( { ); @@ -54,13 +54,13 @@ function NavigationButton( { icon, isOpen, onClick } ) { return (
{ isOpen && ( -
{ siteTitle }
+
{ siteTitle }
) }
); } -export default NavigationButton; +export default DashboardButton; diff --git a/packages/edit-site/src/components/header/navigation-button/style.scss b/packages/edit-site/src/components/header/dashboard-button/style.scss similarity index 51% rename from packages/edit-site/src/components/header/navigation-button/style.scss rename to packages/edit-site/src/components/header/dashboard-button/style.scss index 66e241d660799..49062d9c25c70 100644 --- a/packages/edit-site/src/components/header/navigation-button/style.scss +++ b/packages/edit-site/src/components/header/dashboard-button/style.scss @@ -1,29 +1,33 @@ -.edit-site-navigation-button_wrapper { - display: flex; - align-items: center; - background-color: #1e1e1e; - height: 61px; - border-radius: 0; +.edit-site-dashboard-button_wrapper { + display: none; + + @include break-medium() { + display: flex; + align-items: center; + background-color: #1e1e1e; + height: 61px; + border-radius: 0; + } } -.edit-site-navigation-button { +.edit-site-dashboard-button { color: #fff; margin-left: 14px; margin-right: 14px; } -.edit-site-navigation-button.components-button.has-icon { +.edit-site-dashboard-button.components-button.has-icon { justify-content: flex-start; padding: 0; height: 32px; width: 32px; } -.edit-site-navigation-button_wrapper.is-open { +.edit-site-dashboard-button_wrapper.is-open { width: 300px; } -.edit-site-navigation-name { +.edit-site-dashboard-name { font-style: normal; font-weight: 600; font-size: 13px; diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/test/index.js b/packages/edit-site/src/components/header/dashboard-button/test/index.js similarity index 82% rename from packages/edit-site/src/components/header/fullscreen-mode-close/test/index.js rename to packages/edit-site/src/components/header/dashboard-button/test/index.js index ee9eddcaf163e..a26ab2cd19c6e 100644 --- a/packages/edit-site/src/components/header/fullscreen-mode-close/test/index.js +++ b/packages/edit-site/src/components/header/dashboard-button/test/index.js @@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import FullscreenModeClose from '../'; +import DashboardButton from '../'; jest.mock( '@wordpress/data/src/components/use-select', () => { // This allows us to tweak the returned value on each test @@ -21,7 +21,7 @@ jest.mock( '@wordpress/data/src/components/use-select', () => { jest.mock( '@wordpress/core-data' ); -describe( 'FullscreenModeClose', () => { +describe( 'DashboardButton', () => { describe( 'when in full screen mode', () => { it( 'should display a user uploaded site icon if it exists', () => { useSelect.mockImplementation( ( cb ) => { @@ -34,9 +34,9 @@ describe( 'FullscreenModeClose', () => { } ) ); } ); - const { container } = render( ); + const { container } = render( ); const siteIcon = container.querySelector( - '.edit-site-fullscreen-mode-close_site-icon' + '.edit-site-dashboard-button_site-icon' ); expect( siteIcon ).toBeTruthy(); @@ -53,9 +53,9 @@ describe( 'FullscreenModeClose', () => { } ) ); } ); - const { container } = render( ); + const { container } = render( ); const siteIcon = container.querySelector( - '.edit-site-fullscreen-mode-close_site-icon' + '.edit-site-dashboard-button_site-icon' ); const defaultIcon = container.querySelector( 'svg' ); diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js deleted file mode 100644 index 83a0708958049..0000000000000 --- a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { Button, Icon } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { wordpress } from '@wordpress/icons'; - -function FullscreenModeClose( { icon } ) { - const { isActive, isRequestingSiteIcon, siteIconUrl } = useSelect( - ( select ) => { - const { isFeatureActive } = select( 'core/edit-site' ); - const { getEntityRecord } = select( 'core' ); - const { isResolving } = select( 'core/data' ); - const siteData = - getEntityRecord( 'root', '__unstableBase', undefined ) || {}; - - return { - isActive: isFeatureActive( 'fullscreenMode' ), - isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [ - 'root', - '__unstableBase', - undefined, - ] ), - siteIconUrl: siteData.site_icon_url, - }; - }, - [] - ); - - if ( ! isActive ) { - return null; - } - - let buttonIcon = ; - - if ( siteIconUrl ) { - buttonIcon = ( - { - ); - } else if ( isRequestingSiteIcon ) { - buttonIcon = null; - } else if ( icon ) { - buttonIcon = ; - } - - return ( - - ); -} - -export default FullscreenModeClose; diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss deleted file mode 100644 index 01e648374d8ab..0000000000000 --- a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss +++ /dev/null @@ -1,33 +0,0 @@ -.edit-site-fullscreen-mode-close.has-icon { - // Do not show the toolbar icon on small screens, - // when Fullscreen Mode is not an option in the "More" menu. - display: none; - - @include break-medium() { - display: flex; - align-items: center; - align-self: stretch; - border: none; - background: #23282e; // WP-admin gray. - color: $white; - border-radius: 0; - height: $header-height; - min-width: $header-height; - - &.has-icon { - &:hover { - background: #32373d; // WP-admin light-gray. - } - &:active { - color: $white; - } - &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 3px $white; - } - } - } -} - -.edit-site-fullscreen-mode-close_site-icon { - width: 36px; -} diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 0ee90845fa38b..9205dda5c23fc 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -27,7 +27,7 @@ import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; import DocumentActions from './document-actions'; -import NavigationButton from './navigation-button'; +import DashboardButton from './dashboard-button'; export default function Header( { openEntitiesSavedStates, @@ -91,7 +91,7 @@ export default function Header( {
- diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index bdffc8c2ba94e..7eb4cd7fdab1e 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -2,10 +2,9 @@ @import "./components/block-editor/style.scss"; @import "./components/header/style.scss"; +@import "./components/header/dashboard-button/style.scss"; @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-button/style.scss"; @import "./components/left-sidebar/inserter-panel/style.scss"; @import "./components/left-sidebar/navigation-panel/style.scss"; @import "./components/notices/style.scss"; From 894a8484d3c6a6c731aec353c6fdddc82b263a79 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 22 Sep 2020 15:49:13 +0200 Subject: [PATCH 06/18] Fix export --- packages/edit-site/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 5ded981a29c71..36e8a9ccac382 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -66,4 +66,4 @@ export function initialize( id, settings ) { render( , document.getElementById( id ) ); } -export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close'; +export { default as __experimentalDashboardButton } from './components/header/dashboard-button'; From 0531cf906884b91ec932ed3dca60051b1a92f322 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 22 Sep 2020 18:02:35 +0200 Subject: [PATCH 07/18] Remove variable --- .../edit-site/src/components/left-sidebar/index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/index.js b/packages/edit-site/src/components/left-sidebar/index.js index 7edc915faa421..409f8bf63deaf 100644 --- a/packages/edit-site/src/components/left-sidebar/index.js +++ b/packages/edit-site/src/components/left-sidebar/index.js @@ -5,17 +5,15 @@ import InserterPanel from './inserter-panel'; import NavigationPanel from './navigation-panel'; const LeftSidebar = ( { content, setContent } ) => { - let leftSidebar = null; - if ( content === 'navigation' ) { - leftSidebar = ; - } else if ( content === 'inserter' ) { - leftSidebar = ( - setContent( null ) } /> - ); + return ; + } + + if ( content === 'inserter' ) { + return setContent( null ) } />; } - return leftSidebar; + return null; }; export default LeftSidebar; From cbd44610e44482a647f993284ace0aa596397cd7 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 12:47:26 +0200 Subject: [PATCH 08/18] Fix CSS naming --- .../src/components/left-sidebar/inserter-panel/index.js | 4 ++-- .../src/components/left-sidebar/inserter-panel/style.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 index 5781a5a348bb5..5fb427f19f0a7 100644 --- a/packages/edit-site/src/components/left-sidebar/inserter-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/inserter-panel/index.js @@ -11,10 +11,10 @@ const InserterPanel = ( { closeInserter } ) => { return (
-
+
-
+
{ 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 index 2bd042d780415..6a3f030c4bd3d 100644 --- a/packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss +++ b/packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss @@ -4,7 +4,7 @@ flex-direction: column; } -.edit-site-inserter-panel_header { +.edit-site-inserter-panel__header { padding-top: $grid-unit-10; padding-right: $grid-unit-10; display: flex; @@ -15,7 +15,7 @@ } } -.edit-site-inserter-panel_content { +.edit-site-inserter-panel__content { // Leave space for the close button height: calc(100% - #{$button-size} - #{$grid-unit-10}); From 32027e41366b3082209840c21552094688df0c13 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 12:49:35 +0200 Subject: [PATCH 09/18] Cleanup navigation content --- .../left-sidebar/navigation-panel/index.js | 133 +----------------- 1 file changed, 2 insertions(+), 131 deletions(-) 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 index 840b5a251878f..c244f0ab15fd3 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -12,18 +12,12 @@ import { getBlockType, getBlockFromExample } from '@wordpress/blocks'; import { BlockPreview } from '@wordpress/block-editor'; const NavigationPanel = () => { - const [ activeItem, setActiveItem ] = useState( 'item-1' ); - const [ activeMenu, setActiveMenu ] = useState( 'root' ); const [ showPreview, setShowPreview ] = useState( false ); return ( <>
- + { href="index.php" /> - + setShowPreview( true ) } onMouseLeave={ () => setShowPreview( false ) } /> - - - - - - - { - event.preventDefault(); - setActiveItem( 'item-5' ); - } } - > - WordPress Logo - - - - - - - setActiveItem( 'child-1' ) } - /> - setActiveItem( 'child-2' ) } - /> - - - - - - - setActiveItem( 'sub-child-1' ) } - /> - setActiveItem( 'sub-child-2' ) } - /> - - - - - - - - - - From 9bab4e96ede9dbfb44f223384c77f6d6ca20b70f Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 12:52:29 +0200 Subject: [PATCH 10/18] Cleanup CSS --- packages/edit-site/src/components/editor/style.scss | 5 ----- .../left-sidebar/navigation-panel/index.js | 4 ++-- .../left-sidebar/navigation-panel/style.scss | 12 +++++++++++- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 41d7f0760c8a3..3ec502fc5ef48 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -25,8 +25,3 @@ .edit-site-visual-editor { background-color: $white; } - -.interface-interface-skeleton__left-sidebar .components-navigation { - width: 300px; - 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 index c244f0ab15fd3..d169f83131157 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -16,7 +16,7 @@ const NavigationPanel = () => { return ( <> -
+
{ { showPreview && ( -
+
Date: Wed, 23 Sep 2020 12:55:05 +0200 Subject: [PATCH 11/18] Fix width of navigation button --- .../edit-site/src/components/header/dashboard-button/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/header/dashboard-button/style.scss b/packages/edit-site/src/components/header/dashboard-button/style.scss index 49062d9c25c70..5bf3f53cbd058 100644 --- a/packages/edit-site/src/components/header/dashboard-button/style.scss +++ b/packages/edit-site/src/components/header/dashboard-button/style.scss @@ -21,6 +21,7 @@ padding: 0; height: 32px; width: 32px; + min-width: 32px; } .edit-site-dashboard-button_wrapper.is-open { From dbd550729b0e555e7263d3dbab4f68008c8d3177 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 12:55:25 +0200 Subject: [PATCH 12/18] Change hover color --- .../src/components/header/dashboard-button/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/header/dashboard-button/style.scss b/packages/edit-site/src/components/header/dashboard-button/style.scss index 5bf3f53cbd058..34edbdbedae2e 100644 --- a/packages/edit-site/src/components/header/dashboard-button/style.scss +++ b/packages/edit-site/src/components/header/dashboard-button/style.scss @@ -14,6 +14,10 @@ color: #fff; margin-left: 14px; margin-right: 14px; + + &:hover { + color: #ddd; + } } .edit-site-dashboard-button.components-button.has-icon { From 925fb278b16b1cfee2be7ec7e18545a9aa12355c Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 12:56:01 +0200 Subject: [PATCH 13/18] Remove fragment --- .../left-sidebar/navigation-panel/index.js | 64 +++++++++---------- 1 file changed, 31 insertions(+), 33 deletions(-) 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 index d169f83131157..9f3e2c5c120ac 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -15,42 +15,40 @@ const NavigationPanel = () => { const [ showPreview, setShowPreview ] = useState( false ); return ( - <> -
- - +
+ + + + + setShowPreview( true ) } + onMouseLeave={ () => setShowPreview( false ) } /> + + + - - setShowPreview( true ) } - onMouseLeave={ () => setShowPreview( false ) } - /> - - - - - { showPreview && ( -
- -
- ) } -
- + { showPreview && ( +
+ +
+ ) } +
); }; From 1b21475c3155d6761d01868b3649c24d89f7a71b Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 13:28:10 +0200 Subject: [PATCH 14/18] Rename DashboardButton to NavigationToggle --- .../edit-site/src/components/header/index.js | 4 ++-- .../index.js | 15 ++++++++------- .../style.scss | 16 ++++++++-------- .../test/index.js | 12 ++++++------ packages/edit-site/src/style.scss | 2 +- 5 files changed, 25 insertions(+), 24 deletions(-) rename packages/edit-site/src/components/header/{dashboard-button => navigation-toggle}/index.js (79%) rename packages/edit-site/src/components/header/{dashboard-button => navigation-toggle}/style.scss (72%) rename packages/edit-site/src/components/header/{dashboard-button => navigation-toggle}/test/index.js (83%) diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 9205dda5c23fc..9f1b861b190d0 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -27,7 +27,7 @@ import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; import DocumentActions from './document-actions'; -import DashboardButton from './dashboard-button'; +import NavigationToggle from './navigation-toggle'; export default function Header( { openEntitiesSavedStates, @@ -91,7 +91,7 @@ export default function Header( {
- diff --git a/packages/edit-site/src/components/header/dashboard-button/index.js b/packages/edit-site/src/components/header/navigation-toggle/index.js similarity index 79% rename from packages/edit-site/src/components/header/dashboard-button/index.js rename to packages/edit-site/src/components/header/navigation-toggle/index.js index 096ddbff42ca5..bbab4397bdf22 100644 --- a/packages/edit-site/src/components/header/dashboard-button/index.js +++ b/packages/edit-site/src/components/header/navigation-toggle/index.js @@ -6,7 +6,7 @@ import { Button, Icon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { wordpress } from '@wordpress/icons'; -function DashboardButton( { icon, isOpen, onClick } ) { +function NavigationToggle( { icon, isOpen, onClick } ) { const { isActive, isRequestingSiteIcon, @@ -41,7 +41,7 @@ function DashboardButton( { icon, isOpen, onClick } ) { buttonIcon = ( { ); @@ -54,12 +54,11 @@ function DashboardButton( { icon, isOpen, onClick } ) { return (
); } -export default DashboardButton; +export default NavigationToggle; diff --git a/packages/edit-site/src/components/header/dashboard-button/style.scss b/packages/edit-site/src/components/header/navigation-toggle/style.scss similarity index 72% rename from packages/edit-site/src/components/header/dashboard-button/style.scss rename to packages/edit-site/src/components/header/navigation-toggle/style.scss index 34edbdbedae2e..d09ba381b481e 100644 --- a/packages/edit-site/src/components/header/dashboard-button/style.scss +++ b/packages/edit-site/src/components/header/navigation-toggle/style.scss @@ -1,4 +1,4 @@ -.edit-site-dashboard-button_wrapper { +.edit-site-navigation-toggle { display: none; @include break-medium() { @@ -10,7 +10,11 @@ } } -.edit-site-dashboard-button { +.edit-site-navigation-toggle.is-open { + width: 300px; +} + +.edit-site-navigation-toggle__button { color: #fff; margin-left: 14px; margin-right: 14px; @@ -20,7 +24,7 @@ } } -.edit-site-dashboard-button.components-button.has-icon { +.edit-site-navigation-toggle.components-button.has-icon { justify-content: flex-start; padding: 0; height: 32px; @@ -28,11 +32,7 @@ min-width: 32px; } -.edit-site-dashboard-button_wrapper.is-open { - width: 300px; -} - -.edit-site-dashboard-name { +.edit-site-navigation-toggle__site-title { font-style: normal; font-weight: 600; font-size: 13px; diff --git a/packages/edit-site/src/components/header/dashboard-button/test/index.js b/packages/edit-site/src/components/header/navigation-toggle/test/index.js similarity index 83% rename from packages/edit-site/src/components/header/dashboard-button/test/index.js rename to packages/edit-site/src/components/header/navigation-toggle/test/index.js index a26ab2cd19c6e..45473c7ba02b8 100644 --- a/packages/edit-site/src/components/header/dashboard-button/test/index.js +++ b/packages/edit-site/src/components/header/navigation-toggle/test/index.js @@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import DashboardButton from '../'; +import NavigationToggle from '..'; jest.mock( '@wordpress/data/src/components/use-select', () => { // This allows us to tweak the returned value on each test @@ -21,7 +21,7 @@ jest.mock( '@wordpress/data/src/components/use-select', () => { jest.mock( '@wordpress/core-data' ); -describe( 'DashboardButton', () => { +describe( 'NavigationToggle', () => { describe( 'when in full screen mode', () => { it( 'should display a user uploaded site icon if it exists', () => { useSelect.mockImplementation( ( cb ) => { @@ -34,9 +34,9 @@ describe( 'DashboardButton', () => { } ) ); } ); - const { container } = render( ); + const { container } = render( ); const siteIcon = container.querySelector( - '.edit-site-dashboard-button_site-icon' + '.edit-site-navigation-toggle__site-icon' ); expect( siteIcon ).toBeTruthy(); @@ -53,9 +53,9 @@ describe( 'DashboardButton', () => { } ) ); } ); - const { container } = render( ); + const { container } = render( ); const siteIcon = container.querySelector( - '.edit-site-dashboard-button_site-icon' + '.edit-site-navigation-toggle__site-icon' ); const defaultIcon = container.querySelector( 'svg' ); diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 7eb4cd7fdab1e..37bd749bc1b85 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -2,9 +2,9 @@ @import "./components/block-editor/style.scss"; @import "./components/header/style.scss"; -@import "./components/header/dashboard-button/style.scss"; @import "./components/header/document-actions/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"; From 1b5133a6d558fc2706d13f633a640d7f1ad5530e Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 13:29:12 +0200 Subject: [PATCH 15/18] Change label --- .../edit-site/src/components/header/navigation-toggle/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/header/navigation-toggle/index.js b/packages/edit-site/src/components/header/navigation-toggle/index.js index bbab4397bdf22..8a382823fe550 100644 --- a/packages/edit-site/src/components/header/navigation-toggle/index.js +++ b/packages/edit-site/src/components/header/navigation-toggle/index.js @@ -59,7 +59,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) { > + ); +} + +export default FullscreenModeClose; diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss new file mode 100644 index 0000000000000..01e648374d8ab --- /dev/null +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss @@ -0,0 +1,33 @@ +.edit-site-fullscreen-mode-close.has-icon { + // Do not show the toolbar icon on small screens, + // when Fullscreen Mode is not an option in the "More" menu. + display: none; + + @include break-medium() { + display: flex; + align-items: center; + align-self: stretch; + border: none; + background: #23282e; // WP-admin gray. + color: $white; + border-radius: 0; + height: $header-height; + min-width: $header-height; + + &.has-icon { + &:hover { + background: #32373d; // WP-admin light-gray. + } + &:active { + color: $white; + } + &:focus { + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 3px $white; + } + } + } +} + +.edit-site-fullscreen-mode-close_site-icon { + width: 36px; +} diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/test/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/test/index.js new file mode 100644 index 0000000000000..ee9eddcaf163e --- /dev/null +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/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 FullscreenModeClose 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( 'FullscreenModeClose', () => { + 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-fullscreen-mode-close_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-fullscreen-mode-close_site-icon' + ); + const defaultIcon = container.querySelector( 'svg' ); + + expect( siteIcon ).toBeFalsy(); + expect( defaultIcon ).toBeTruthy(); + } ); + } ); +} ); diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 0976b881d1251..a34d4c242423b 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -66,4 +66,5 @@ export function initialize( id, settings ) { render( , document.getElementById( id ) ); } +export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close'; export { default as __experimentalNavigationToggle } from './components/header/navigation-toggle'; From 76d897b45d86078ca9b04d3afc6f43f3734ee20d Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 23 Sep 2020 13:33:43 +0200 Subject: [PATCH 18/18] Add missing style --- packages/edit-site/src/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 37bd749bc1b85..a503424588b91 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -3,6 +3,7 @@ @import "./components/block-editor/style.scss"; @import "./components/header/style.scss"; @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";