From a2c8480a6145ee3f158fb32af336b9ccec117907 Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Thu, 5 Nov 2020 23:49:01 +0100 Subject: [PATCH] Try: Make site editor responsive. (#26021) * Make the site editor visible on mobile. * Hide pinned until after medium breakpoint. * Collapse Update Design label on mobile. * Limit tools on mobile. * Add desktop affordances to site editor header Flex bases of 335px were added to the left and right site editor header toolbars to prevent their children from collapsing when shrinking the viewport. This, however, did not account for tbehavior at smaller screen widths (tablet / mobile), and caused layout issues. To address this, we use breakpoints to define the 335px flex bases as desktop specific affordances. * Refactor LeftSidebar rendering logic for InterfaceSkeleton The InterfaceSkeleton component coordinates the general layout and styling of the site editor and post editor pages. It expects specific behavior from its props. For example, if the LeftSidebar is open, InterfaceSkeleton expects to be passed JSX markup as the leftSidebar prop. Otherwise, if the LeftSidebar isn't open, InterfaceSkeleton expects a null or falsey leftSidebar prop. InterfaceSkeleton styling depends on this behavior. In edit site, the LeftSidebar prop passed into InterfaceSkeleton was always a truthy value. As a result, InterfaceSkeleton was improperly accounting for a LeftSidebar, even when it was unmounted from the screen. These changes move the logic to determine when the sidebar should "open" up from the LeftSidebar component itself to its parent. This allows us to pass JSX markup to the InterfaceSkeleton when the inserter is open, and a falsey value when the inserter is closed. Co-authored-by: Jeremy Yip --- .../edit-site/src/components/editor/index.js | 40 ++++++++++++++- .../src/components/editor/style.scss | 26 ++++++++++ .../edit-site/src/components/header/index.js | 12 +++-- .../src/components/header/style.scss | 51 ++++++++++++++----- .../src/components/left-sidebar/index.js | 32 ------------ .../left-sidebar/inserter-panel/index.js | 31 ----------- .../left-sidebar/inserter-panel/style.scss | 25 --------- .../src/components/save-button/index.js | 5 +- packages/edit-site/src/style.scss | 1 - .../components/interface-skeleton/style.scss | 2 +- 10 files changed, 114 insertions(+), 111 deletions(-) delete mode 100644 packages/edit-site/src/components/left-sidebar/index.js delete mode 100644 packages/edit-site/src/components/left-sidebar/inserter-panel/index.js delete mode 100644 packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 9d2bb47d17a90..f9b2f996e8792 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -17,6 +17,7 @@ import { BlockBreadcrumb, __unstableEditorStyles as EditorStyles, __experimentalUseResizeCanvas as useResizeCanvas, + __experimentalLibrary as Library, } from '@wordpress/block-editor'; import { FullscreenMode, @@ -26,6 +27,8 @@ import { import { EntitiesSavedStates, UnsavedChangesWarning } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { PluginArea } from '@wordpress/plugins'; +import { close } from '@wordpress/icons'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -36,7 +39,6 @@ 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'; import NavigationSidebar from '../navigation-sidebar'; const interfaceLabels = { @@ -47,6 +49,7 @@ const interfaceLabels = { function Editor() { const { isFullscreenActive, + isInserterOpen, deviceType, sidebarIsOpened, settings, @@ -59,6 +62,7 @@ function Editor() { } = useSelect( ( _select ) => { const { isFeatureActive, + isInserterOpened, __experimentalGetPreviewDeviceType, getSettings, getTemplateId, @@ -79,6 +83,7 @@ function Editor() { } return { + isInserterOpen: isInserterOpened(), isFullscreenActive: isFeatureActive( 'fullscreenMode' ), deviceType: __experimentalGetPreviewDeviceType(), sidebarIsOpened: !! _select( @@ -164,6 +169,8 @@ function Editor() { } }, [ isNavigationOpen ] ); + const isMobile = useViewportMatch( 'medium', '<' ); + return ( <> @@ -215,7 +222,36 @@ function Editor() { } leftSidebar={ - + isInserterOpen ? ( +
+
+
+
+ { + if ( + isMobile + ) { + setIsInserterOpened( + false + ); + } + } } + /> +
+
+ ) : null } sidebar={ sidebarIsOpened && ( diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index ca94a01191267..66c0a582f5760 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -23,3 +23,29 @@ .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 35a218feecad9..00c26276700f3 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -92,10 +92,14 @@ export default function Header( { openEntitiesSavedStates } ) { 'Generic label for block inserter button' ) } /> - - - - + { isLargeViewport && ( + <> + + + + + + ) } { displayBlockToolbar && (
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index 07976094393db..8d08537805bb5 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -6,10 +6,12 @@ box-sizing: border-box; width: 100%; - padding-left: 60px; - transition: padding-left 20ms linear; - transition-delay: 80ms; - @include reduce-motion("transition"); + @include break-medium() { + padding-left: 60px; + transition: padding-left 20ms linear; + transition-delay: 80ms; + @include reduce-motion("transition"); + } .edit-site-header_start, .edit-site-header_end { @@ -17,10 +19,18 @@ display: flex; } - .edit-site-header_start { - // Flex basis prevents the header_start toolbar - // from collapsing when shrinking the viewport. - flex-basis: calc(#{$header-toolbar-min-width} - #{$header-height}); + @include break-medium() { + .edit-site-header_start { + // Flex basis prevents the header_start toolbar + // from collapsing when shrinking the viewport. + flex-basis: calc(#{$header-toolbar-min-width} - #{$header-height}); + } + + .edit-site-header_end { + // Flex basis prevents the header_end toolbar + // from collapsing when shrinking the viewport + flex-basis: $header-toolbar-min-width; + } } .edit-site-header_center { @@ -36,9 +46,6 @@ } .edit-site-header_end { - // Flex basis prevents the header_end toolbar - // from collapsing when shrinking the viewport - flex-basis: $header-toolbar-min-width; justify-content: flex-end; } } @@ -58,8 +65,16 @@ body.is-navigation-sidebar-open { .edit-site-header__toolbar { display: flex; - padding-left: $grid-unit-30; align-items: center; + padding-left: $grid-unit-10; + + @include break-small() { + padding-left: $grid-unit-30; + } + + @include break-wide() { + padding-right: $grid-unit-10; + } .edit-site-header-toolbar__inserter-toggle { margin-right: $grid-unit-10; @@ -89,6 +104,14 @@ body.is-navigation-sidebar-open { flex-wrap: wrap; padding-right: $grid-unit-05; + .interface-pinned-items { + display: none; + + @include break-medium() { + display: block; + } + } + // Adjust button paddings to scale better to mobile. .editor-post-saved-state, .components-button.components-button { @@ -101,7 +124,7 @@ body.is-navigation-sidebar-open { .editor-post-saved-state, .components-button.is-tertiary { - padding: 0 #{ $grid-unit-15 / 2 }; + padding: 0 #{$grid-unit-15 / 2}; } .edit-site-more-menu .components-button, @@ -109,7 +132,7 @@ body.is-navigation-sidebar-open { margin-right: 0; } - @include break-small () { + @include break-small() { padding-right: $grid-unit-20; } } diff --git a/packages/edit-site/src/components/left-sidebar/index.js b/packages/edit-site/src/components/left-sidebar/index.js deleted file mode 100644 index bb5ed6a0cb533..0000000000000 --- a/packages/edit-site/src/components/left-sidebar/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import InserterPanel from './inserter-panel'; - -const LeftSidebar = () => { - const { isInserterOpen } = useSelect( ( select ) => { - const { isInserterOpened } = select( 'core/edit-site' ); - return { - isInserterOpen: isInserterOpened(), - }; - } ); - - const { setIsInserterOpened } = useDispatch( 'core/edit-site' ); - - if ( isInserterOpen ) { - return ( - setIsInserterOpened( false ) } - /> - ); - } - - 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 deleted file mode 100644 index 5fb427f19f0a7..0000000000000 --- a/packages/edit-site/src/components/left-sidebar/inserter-panel/index.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * 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 deleted file mode 100644 index 6a3f030c4bd3d..0000000000000 --- a/packages/edit-site/src/components/left-sidebar/inserter-panel/style.scss +++ /dev/null @@ -1,25 +0,0 @@ -.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/save-button/index.js b/packages/edit-site/src/components/save-button/index.js index 38dd4467d689e..4c8b4038ea3ca 100644 --- a/packages/edit-site/src/components/save-button/index.js +++ b/packages/edit-site/src/components/save-button/index.js @@ -9,6 +9,7 @@ import { some } from 'lodash'; import { useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { useViewportMatch } from '@wordpress/compose'; export default function SaveButton( { openEntitiesSavedStates } ) { const { isDirty, isSaving } = useSelect( ( select ) => { @@ -26,6 +27,8 @@ export default function SaveButton( { openEntitiesSavedStates } ) { } ); const disabled = ! isDirty || isSaving; + const isMobile = useViewportMatch( 'medium', '<' ); + return ( <> ); diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 8350c69c9942d..59eb3fb4f4dde 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -5,7 +5,6 @@ @import "./components/header/document-actions/style.scss"; @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/header/more-menu/style.scss"; -@import "./components/left-sidebar/inserter-panel/style.scss"; @import "./components/navigation-sidebar/navigation-toggle/style.scss"; @import "./components/navigation-sidebar/navigation-panel/style.scss"; @import "./components/notices/style.scss"; diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index a4c56e5a09d81..319b9cc9661a3 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -88,7 +88,6 @@ html.interface-interface-skeleton__html-container { .interface-interface-skeleton__left-sidebar, .interface-interface-skeleton__sidebar { display: block; - width: auto; // Keep the sidebar width flexible. flex-shrink: 0; position: absolute; z-index: z-index(".interface-interface-skeleton__sidebar"); @@ -103,6 +102,7 @@ html.interface-interface-skeleton__html-container { @include break-medium() { position: relative !important; z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}"); + width: auto; // Keep the sidebar width flexible. } }