From 3428949820bd8080458c87a85b55560f1eebd225 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 24 Mar 2020 16:27:31 -0400 Subject: [PATCH 01/24] A quick and dirty try at making the wp-admin sidebar accessible while in fullscreen-mode. --- .../header/fullscreen-mode-close/index.js | 14 +++----- .../header/fullscreen-mode-close/style.scss | 24 ++++++++++--- .../src/components/fullscreen-mode/style.scss | 36 ++++++++++++++++++- 3 files changed, 59 insertions(+), 15 deletions(-) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js index 27cadc4f67b36..ed28fc5be67cb 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js @@ -1,15 +1,9 @@ -/** - * External dependencies - */ -import { get } from 'lodash'; - /** * WordPress dependencies */ import { useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { addQueryArgs } from '@wordpress/url'; import { wordpress } from '@wordpress/icons'; function FullscreenModeClose() { @@ -33,10 +27,10 @@ function FullscreenModeClose() { className="edit-post-fullscreen-mode-close" icon={ wordpress } iconSize={ 36 } - href={ addQueryArgs( 'edit.php', { - post_type: postType.slug, - } ) } - label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) } + onClick={ function() { + document.body.classList.toggle( 'is-showing-admin-menu' ); + } } + label={ __( 'Show sidebar menu' ) } /> ); } diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index 2997e7745387b..bfc364e9df2db 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -8,14 +8,18 @@ align-items: center; align-self: stretch; border: none; - background: #23282e; // WP-admin gray. - color: $white; border-radius: 0; height: auto; width: $header-height; + svg { + fill: #23282e; + } + &:hover { - background: #32373d; // WP-admin light-gray. + svg { + fill: #32373d; + } } &:active { @@ -23,7 +27,19 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 ($border-width-focus + 1px) $white; + box-shadow: inset 0 0 0 2px color($theme-color); + } + + body.js.is-showing-admin-menu & { + background: #23282e; // WP-admin gray. + + svg { + fill: $white; + } + + &:hover { + background: #32373d; // WP-admin light-gray. + } } } } diff --git a/packages/interface/src/components/fullscreen-mode/style.scss b/packages/interface/src/components/fullscreen-mode/style.scss index 9489a9f6f9651..397a0a1c3b543 100644 --- a/packages/interface/src/components/fullscreen-mode/style.scss +++ b/packages/interface/src/components/fullscreen-mode/style.scss @@ -6,14 +6,48 @@ body.js.is-fullscreen-mode { margin-top: -$admin-bar-height; height: calc(100% + #{ $admin-bar-height }); - #adminmenumain, + // Hide the top adminbar toolbar. #wpadminbar { display: none; } + // Display the sidebar offscreen, and then transition in when needed. + #adminmenumain { + position: relative; + top: 60px; + left: -160px; + transition: left 0.12s ease-in-out; + } + + // This is all so stupid + #adminmenu { + position: relative; + bottom: auto; + } + + #adminmenuback { + top: 60px; + } + + .block-editor-editor-skeleton__body, + .block-editor-editor-skeleton__footer { + transition: margin-left 0.12s ease-in-out; + } + #wpcontent, #wpfooter { margin-left: 0; } } } + +body.js.is-showing-admin-menu { + #adminmenumain { + left: 0; + } + + .block-editor-editor-skeleton__body, + .block-editor-editor-skeleton__footer { + margin-left: 160px; + } +} From fa9c5ce0d4cb6f033717af8eb27d81a847b293cd Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 24 Mar 2020 16:49:35 -0400 Subject: [PATCH 02/24] Back to the dark background by default, and accounting for the `folded` state of the sidebar. --- .../header/fullscreen-mode-close/style.scss | 29 ++++++++++++------- .../src/components/fullscreen-mode/style.scss | 7 +++++ 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index bfc364e9df2db..c4c799cf4017e 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -10,15 +10,22 @@ border: none; border-radius: 0; height: auto; + margin-right: -8px; width: $header-height; + background: #23282e; // WP-admin gray. + transition: all 0.12s ease-in-out; svg { - fill: #23282e; + padding: 8px; + border-radius: 2px; + width: 44px; + height: 44px; + fill: $white; } &:hover { svg { - fill: #32373d; + opacity: 0.9; } } @@ -27,19 +34,19 @@ } &:focus { - box-shadow: inset 0 0 0 2px color($theme-color); - } - - body.js.is-showing-admin-menu & { - background: #23282e; // WP-admin gray. + box-shadow: none; svg { - fill: $white; + box-shadow: inset 0 0 0 2px color($theme-color); } + } - &:hover { - background: #32373d; // WP-admin light-gray. - } + body.js.is-showing-admin-menu & { + width: 160px; + } + + body.js.is-showing-admin-menu.folded & { + width: $header-height; } } } diff --git a/packages/interface/src/components/fullscreen-mode/style.scss b/packages/interface/src/components/fullscreen-mode/style.scss index 397a0a1c3b543..a089316e8abc7 100644 --- a/packages/interface/src/components/fullscreen-mode/style.scss +++ b/packages/interface/src/components/fullscreen-mode/style.scss @@ -51,3 +51,10 @@ body.js.is-showing-admin-menu { margin-left: 160px; } } + +body.js.is-showing-admin-menu.folded { + .block-editor-editor-skeleton__body, + .block-editor-editor-skeleton__footer { + margin-left: 36px; + } +} From ccfdb6e3dbc20a5581ce2bce6887cd5d44019344 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 25 Mar 2020 22:32:04 -0400 Subject: [PATCH 03/24] Making the WP logo just a little smaller. --- .../src/components/header/fullscreen-mode-close/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index c4c799cf4017e..d3c008bb76678 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -16,10 +16,10 @@ transition: all 0.12s ease-in-out; svg { - padding: 8px; + padding: 4px; border-radius: 2px; - width: 44px; - height: 44px; + width: 32px; + height: 32px; fill: $white; } From 3b04e76076a7ee535e2c8ad19f06a20e087b0951 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 1 Apr 2020 10:39:33 -0400 Subject: [PATCH 04/24] Improve interaction handling for Navigation menu logo Create custom React hook to encapsulate state, click, focus, and keyboard logic. --- .../header/fullscreen-mode-close/index.js | 104 +++++++++++++++++- 1 file changed, 101 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js index ed28fc5be67cb..82ca5296de98d 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js @@ -3,10 +3,15 @@ */ import { useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; +import { useRef, useEffect, useState } from '@wordpress/element'; +import { ESCAPE, DOWN } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { wordpress } from '@wordpress/icons'; function FullscreenModeClose() { + const buttonRef = useRef(); + const toggleAdminMenu = useToggleAdminMenu( { ref: buttonRef } ); + const { isActive, postType } = useSelect( ( select ) => { const { getCurrentPostType } = select( 'core/editor' ); const { isFeatureActive } = select( 'core/edit-post' ); @@ -27,12 +32,105 @@ function FullscreenModeClose() { className="edit-post-fullscreen-mode-close" icon={ wordpress } iconSize={ 36 } - onClick={ function() { - document.body.classList.toggle( 'is-showing-admin-menu' ); - } } + onClick={ toggleAdminMenu } label={ __( 'Show sidebar menu' ) } + ref={ buttonRef } /> ); } +function useToggleAdminMenu( { ref } ) { + const [ isActive, setIsActive ] = useState( false ); + + const navigationHeaderNode = document.querySelector( '.edit-post-header' ); + const adminMenuNode = document.querySelector( '#adminmenumain' ); + + const toggleClassName = 'is-showing-admin-menu'; + + const toggleAdminMenu = () => setIsActive( ! isActive ); + const closeAdminMenu = () => setIsActive( false ); + + const focusFirstAdminMenuItem = () => { + const buttonNode = ref.current; + if ( ! buttonNode ) return; + + const isButtonFocused = buttonNode.matches( ':focus' ); + const item = adminMenuNode.querySelector( '#adminmenu > li > a' ); + + if ( isButtonFocused && item ) { + item.focus(); + } + }; + + // Renders the open/closed UI for the admin menu + useEffect( () => { + if ( isActive ) { + document.body.classList.add( toggleClassName ); + } else { + document.body.classList.remove( toggleClassName ); + } + }, [ isActive ] ); + + // Handles closing the admin menu when clicking outside + useEffect( () => { + const handleOnClickOutside = ( event ) => { + const { target } = event; + + const didClickOutsideNavigationHeader = + ! navigationHeaderNode.contains( target ) && + target !== navigationHeaderNode; + + const didClickOutsideAdminMenu = + ! adminMenuNode.contains( target ) && target !== adminMenuNode; + + const didClickOutside = + didClickOutsideNavigationHeader && didClickOutsideAdminMenu; + + if ( didClickOutside ) { + closeAdminMenu(); + } + }; + + if ( isActive ) { + document.body.addEventListener( 'click', handleOnClickOutside ); + } + + return () => { + if ( isActive ) { + document.body.removeEventListener( + 'click', + handleOnClickOutside + ); + } + }; + }, [ isActive ] ); + + // Handles closing the admin menu when pressing ESCAPE or DOWN + useEffect( () => { + const handleOnKeyDown = ( event ) => { + const { keyCode } = event; + + if ( keyCode === ESCAPE ) { + closeAdminMenu(); + } + + if ( keyCode === DOWN ) { + focusFirstAdminMenuItem(); + } + }; + + if ( isActive ) { + document.body.addEventListener( 'keydown', handleOnKeyDown ); + } + + return () => { + if ( isActive ) { + document.body.removeEventListener( 'keydown', handleOnKeyDown ); + } + }; + }, [ isActive ] ); + + return toggleAdminMenu; +} + export default FullscreenModeClose; From 06925b2c6a38b8881f9da2262bb188ac53af27e4 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 1 Apr 2020 12:21:18 -0400 Subject: [PATCH 05/24] Adjust click outside to close logic --- .../header/fullscreen-mode-close/index.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js index 82ca5296de98d..e9b1163a1d6ed 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js @@ -41,8 +41,8 @@ function FullscreenModeClose() { function useToggleAdminMenu( { ref } ) { const [ isActive, setIsActive ] = useState( false ); + const buttonNode = ref?.current; - const navigationHeaderNode = document.querySelector( '.edit-post-header' ); const adminMenuNode = document.querySelector( '#adminmenumain' ); const toggleClassName = 'is-showing-admin-menu'; @@ -51,7 +51,6 @@ function useToggleAdminMenu( { ref } ) { const closeAdminMenu = () => setIsActive( false ); const focusFirstAdminMenuItem = () => { - const buttonNode = ref.current; if ( ! buttonNode ) return; const isButtonFocused = buttonNode.matches( ':focus' ); @@ -76,15 +75,8 @@ function useToggleAdminMenu( { ref } ) { const handleOnClickOutside = ( event ) => { const { target } = event; - const didClickOutsideNavigationHeader = - ! navigationHeaderNode.contains( target ) && - target !== navigationHeaderNode; - - const didClickOutsideAdminMenu = - ! adminMenuNode.contains( target ) && target !== adminMenuNode; - const didClickOutside = - didClickOutsideNavigationHeader && didClickOutsideAdminMenu; + ! adminMenuNode.contains( target ) && target !== buttonNode; if ( didClickOutside ) { closeAdminMenu(); @@ -103,7 +95,7 @@ function useToggleAdminMenu( { ref } ) { ); } }; - }, [ isActive ] ); + }, [ isActive, buttonNode ] ); // Handles closing the admin menu when pressing ESCAPE or DOWN useEffect( () => { From 76824a9d0c7ca2960e99dc9390206e70bb54f4b7 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 24 Mar 2020 16:27:31 -0400 Subject: [PATCH 06/24] A quick and dirty try at making the wp-admin sidebar accessible while in fullscreen-mode. --- .../src/components/header/fullscreen-mode-close/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index d3c008bb76678..6e31400e43d24 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -23,6 +23,10 @@ fill: $white; } + svg { + fill: #23282e; + } + &:hover { svg { opacity: 0.9; From e4350968809117e8fe1fe1d9365f2e5bcc8d089d Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 1 Apr 2020 12:38:32 -0400 Subject: [PATCH 07/24] Fix SVG color and pointer events --- .../src/components/header/fullscreen-mode-close/style.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index 6e31400e43d24..6384c7d2fd9bb 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -17,16 +17,13 @@ svg { padding: 4px; + pointer-events: none; border-radius: 2px; width: 32px; height: 32px; fill: $white; } - svg { - fill: #23282e; - } - &:hover { svg { opacity: 0.9; From d0cb8f3ff9bfc4b70f6675fdb8aaa0055e95701e Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 1 Apr 2020 12:45:29 -0400 Subject: [PATCH 08/24] Rename fullscreen-mode-close to admin-menu-toggle --- .../specs/editor/various/fullscreen-mode.test.js | 6 +++--- .../index.js | 12 ++++++------ .../style.scss | 0 packages/edit-post/src/components/header/index.js | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) rename packages/edit-post/src/components/header/{fullscreen-mode-close => admin-menu-toggle}/index.js (91%) rename packages/edit-post/src/components/header/{fullscreen-mode-close => admin-menu-toggle}/style.scss (100%) diff --git a/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js b/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js index 82e6c34719755..0ed5c336c110c 100644 --- a/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js +++ b/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js @@ -22,10 +22,10 @@ describe( 'Fullscreen Mode', () => { expect( isFullscreenEnabled ).toBe( true ); - const fullscreenCloseButton = await page.$( - '.edit-post-fullscreen-mode-close' + const fullscreenAdminMenuToggle = await page.$( + '.edit-post-fullscreen-admin-menu-toggle' ); - expect( fullscreenCloseButton ).not.toBeNull(); + expect( fullscreenAdminMenuToggle ).not.toBeNull(); } ); } ); diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/admin-menu-toggle/index.js similarity index 91% rename from packages/edit-post/src/components/header/fullscreen-mode-close/index.js rename to packages/edit-post/src/components/header/admin-menu-toggle/index.js index e9b1163a1d6ed..8eaa959a46582 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-post/src/components/header/admin-menu-toggle/index.js @@ -8,9 +8,9 @@ import { ESCAPE, DOWN } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { wordpress } from '@wordpress/icons'; -function FullscreenModeClose() { +function AdminMenuToggle() { const buttonRef = useRef(); - const toggleAdminMenu = useToggleAdminMenu( { ref: buttonRef } ); + const toggleMenu = useToggle( { ref: buttonRef } ); const { isActive, postType } = useSelect( ( select ) => { const { getCurrentPostType } = select( 'core/editor' ); @@ -29,17 +29,17 @@ function FullscreenModeClose() { return (