From aee7e4885f1ce66888070f1f40c6c41c4ffdbf31 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 21 Oct 2019 10:20:46 +0100 Subject: [PATCH 1/5] Refactor layout component --- packages/base-styles/_mixins.scss | 15 -- packages/base-styles/_z-index.scss | 2 +- .../higher-order/navigate-regions/style.scss | 2 + .../src/components/editor-regions/index.js | 72 ++++++ .../src/components/editor-regions/style.scss | 97 ++++++++ .../edit-post/src/components/header/index.js | 8 +- .../src/components/header/style.scss | 19 -- .../edit-post/src/components/layout/index.js | 215 ++++++++---------- .../src/components/layout/style.scss | 127 +---------- .../edit-post/src/components/sidebar/index.js | 9 +- .../sidebar/plugin-sidebar/index.js | 5 +- .../sidebar/settings-header/style.scss | 1 - .../sidebar/settings-sidebar/index.js | 7 +- .../src/components/sidebar/style.scss | 44 +--- .../src/components/visual-editor/style.scss | 9 + packages/edit-post/src/style.scss | 1 + 16 files changed, 290 insertions(+), 343 deletions(-) create mode 100644 packages/edit-post/src/components/editor-regions/index.js create mode 100644 packages/edit-post/src/components/editor-regions/style.scss diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index fda485a779275..d376b8aa78f38 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -312,21 +312,6 @@ } } -/** - * Applies editor right position to the selector passed as argument - */ - -@mixin editor-right($selector) { - #{ $selector } { - right: 0; - } - - .edit-post-layout.is-sidebar-opened #{ $selector } { - right: $sidebar-width; - } -} - - /** * Styles that are reused verbatim in a few places */ diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 36cc265a0b7f6..2381a35512b2e 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -102,7 +102,7 @@ $z-layers: ( ".components-autocomplete__results": 1000000, ".skip-to-selected-block": 100000, - ".edit-post-toggle-publish-panel": 100000, + ".edit-post-editor-regions__publish": 100000, // Show NUX tips above popovers, wp-admin menus, submenus, and sidebar: ".nux-dot-tip": 1000001, diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 4653a08ee3862..bd65bfb64135c 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -1,4 +1,6 @@ .components-navigate-regions.is-focusing-regions [role="region"] { + position: relative; + // For browsers that don't support outline-offset (IE11). &:focus::after { content: ""; diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js new file mode 100644 index 0000000000000..f208fed2cef5e --- /dev/null +++ b/packages/edit-post/src/components/editor-regions/index.js @@ -0,0 +1,72 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { navigateRegions } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +function EditorRegions( { footer, header, sidebar, content, publish, className } ) { + return ( +
+ { !! header && ( +
+ { header } +
+ ) } +
+
+ { content } +
+ { !! publish && ( +
+ { publish } +
+ ) } + { !! sidebar && ( +
+ { sidebar } +
+ ) } +
+ { !! footer && ( +
+ { footer } +
+ ) } +
+ ); +} + +export default navigateRegions( EditorRegions ); diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss new file mode 100644 index 0000000000000..7a88e568fbcfb --- /dev/null +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -0,0 +1,97 @@ +.edit-post-editor-regions { + display: flex; + flex-direction: column; + height: 100%; + max-height: 100%; + position: relative; + + // On Mobile keep a margin for the header and admin header + // as both of these are fixed + top: 0; + @include break-small() { + margin-top: 0; + + // On Desktop position the container as fixed to avoid scroll bleed. + position: fixed; + top: $admin-bar-height-big; + left: 0; + right: 0; + bottom: 0; + height: auto; + } + + @include break-medium() { + top: $admin-bar-height; + } +} +@include editor-left(".edit-post-editor-regions"); + +.edit-post-editor-regions__body { + flex-grow: 1; + display: flex; + + // On Mobile the header is fixed to keep HTML as scrollable. + @include break-small() { + overflow: auto; + } +} + +.edit-post-editor-regions__content { + flex-grow: 1; + + // On Mobile the header is fixed to keep HTML as scrollable. + @include break-small() { + overflow: auto; + } +} + +.edit-post-editor-regions__sidebar { + width: auto; // Keep the sidebar width flexible. + flex-shrink: 0; + + // On Mobile the header is fixed to keep HTML as scrollable. + @include break-small() { + overflow: auto; + } +} + +.edit-post-editor-regions__header { + flex-shrink: 0; + height: auto; // Keep the height flexible. + + // On Mobile the header is sticky. + position: sticky; + top: 0; + @include break-small() { + // Cancel the fixed positionning used in mobile. + position: initial; + overflow: auto; + } +} + +.edit-post-editor-regions__footer { + height: auto; // Keep the height flexible. + flex-shrink: 0; + overflow: auto; + + // On Mobile the footer is hidden + display: none; + @include break-small() { + display: block; + } +} + +.edit-post-editor-regions__publish { + z-index: z-index(".edit-post-editor-regions__publish"); + position: fixed !important; // Need to override the default relative positionning + top: -9999em; + bottom: auto; + left: auto; + right: 0; + width: $sidebar-width; + + &:focus { + top: auto; + bottom: 0; + } +} diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index dff5622593603..8515b6ba372a0 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -32,13 +32,7 @@ function Header( { const toggleGeneralSidebar = isEditorSidebarOpened ? closeGeneralSidebar : openGeneralSidebar; return ( -
+
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 65a94ba8ad72d..1905a25deb19a 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -1,5 +1,4 @@ .edit-post-header { - height: $header-height; padding: $grid-size-small 2px; border-bottom: $border-width solid $light-gray-500; background: $white; @@ -10,30 +9,14 @@ // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket. max-width: 100vw; z-index: z-index(".edit-post-header"); - left: 0; - right: 0; // Make toolbar sticky on larger breakpoints @include break-zoomed-in { - height: $header-height; - top: 0; - position: sticky; flex-wrap: nowrap; } - // On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container. @include break-small { - position: fixed; padding: $grid-size; - top: $admin-bar-height-big; - } - - @include break-medium() { - top: $admin-bar-height; - - body.is-fullscreen-mode & { - top: 0; - } } // Some browsers, most notably IE11, honor an older version of the flexbox spec @@ -55,8 +38,6 @@ } } -@include editor-left(".edit-post-header"); - .edit-post-header__toolbar { display: flex; } diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b8cb779603410..c5dc5c2ab13e6 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -6,14 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - Button, - Popover, - ScrollLock, - FocusReturnProvider, - navigateRegions, -} from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; import { AutosaveMonitor, LocalAutosaveMonitor, @@ -21,148 +13,135 @@ import { EditorNotices, PostPublishPanel, } from '@wordpress/editor'; +import { useSelect, useDispatch } from '@wordpress/data'; import { BlockBreadcrumb } from '@wordpress/block-editor'; -import { withDispatch, withSelect } from '@wordpress/data'; -import { PluginArea } from '@wordpress/plugins'; +import { + Button, + ScrollLock, + Popover, + FocusReturnProvider, +} from '@wordpress/components'; import { withViewportMatch } from '@wordpress/viewport'; -import { compose } from '@wordpress/compose'; +import { PluginArea } from '@wordpress/plugins'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import BrowserURL from '../browser-url'; -import Header from '../header'; import TextEditor from '../text-editor'; import VisualEditor from '../visual-editor'; import EditorModeKeyboardShortcuts from '../keyboard-shortcuts'; import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal'; import ManageBlocksModal from '../manage-blocks-modal'; import OptionsModal from '../options-modal'; -import MetaBoxes from '../meta-boxes'; +import EditorRegions from '../editor-regions'; +import FullscreenMode from '../fullscreen-mode'; +import BrowserURL from '../browser-url'; +import Header from '../header'; import SettingsSidebar from '../sidebar/settings-sidebar'; import Sidebar from '../sidebar'; +import MetaBoxes from '../meta-boxes'; import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel'; import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel'; -import FullscreenMode from '../fullscreen-mode'; -function Layout( { - mode, - editorSidebarOpened, - pluginSidebarOpened, - publishSidebarOpened, - hasFixedToolbar, - closePublishSidebar, - togglePublishSidebar, - hasActiveMetaboxes, - isSaving, - isMobileViewport, - isRichEditingEnabled, -} ) { +function Layout( { isMobileViewport } ) { + const { closePublishSidebar, togglePublishSidebar } = useDispatch( 'core/edit-post' ); + const { + mode, + isRichEditingEnabled, + editorSidebarOpened, + pluginSidebarOpened, + publishSidebarOpened, + hasActiveMetaboxes, + isSaving, + hasFixedToolbar, + } = useSelect( ( select ) => { + return ( { + hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ), + editorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(), + pluginSidebarOpened: select( 'core/edit-post' ).isPluginSidebarOpened(), + publishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(), + mode: select( 'core/edit-post' ).getEditorMode(), + isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, + hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(), + isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(), + } ); + } ); const sidebarIsOpened = editorSidebarOpened || pluginSidebarOpened || publishSidebarOpened; - const className = classnames( 'edit-post-layout', 'is-mode-' + mode, { 'is-sidebar-opened': sidebarIsOpened, 'has-fixed-toolbar': hasFixedToolbar, 'has-metaboxes': hasActiveMetaboxes, } ); - const publishLandmarkProps = { - role: 'region', - /* translators: accessibility text for the publish landmark region. */ - 'aria-label': __( 'Editor publish' ), - tabIndex: -1, - }; return ( - + <> -
-
- - - - - - { ( mode === 'text' || ! isRichEditingEnabled ) && } - { isRichEditingEnabled && mode === 'visual' && } -
- -
-
- -
- { isMobileViewport && sidebarIsOpened && } -
- { isRichEditingEnabled && mode === 'visual' && ( -
- -
- ) } - { publishSidebarOpened ? ( - - ) : ( - <> -
- -
- - - - ) } + + + + - + + } + sidebar={ ! publishSidebarOpened && ( + <> + + + + ) } + content={ + <> + + { ( mode === 'text' || ! isRichEditingEnabled ) && } + { isRichEditingEnabled && mode === 'visual' && } +
+ +
+
+ +
+ { isMobileViewport && sidebarIsOpened && } + + } + footer={ isRichEditingEnabled && mode === 'visual' && ( +
+ +
+ ) } + publish={ publishSidebarOpened ? ( + + ) : ( +
+ +
+ ) } + /> + + + ); } -export default compose( - withSelect( ( select ) => ( { - mode: select( 'core/edit-post' ).getEditorMode(), - editorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(), - pluginSidebarOpened: select( 'core/edit-post' ).isPluginSidebarOpened(), - publishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(), - hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ), - hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(), - isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(), - isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, - } ) ), - withDispatch( ( dispatch ) => { - const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' ); - return { - closePublishSidebar, - togglePublishSidebar, - }; - } ), - navigateRegions, - withViewportMatch( { isMobileViewport: '< small' } ), -)( Layout ); +export default withViewportMatch( { isMobileViewport: '< small' } )( Layout ); diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 40e49f9df3b35..1804b97ac920f 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,21 +1,6 @@ -.edit-post-layout, -.edit-post-layout__content { - height: 100%; +.edit-post-layout__metaboxes { + flex-shrink: 0; } - -.edit-post-layout { - position: relative; - box-sizing: border-box; - - // Beyond the mobile breakpoint, the editor bar is fixed, so make room for it eabove the layout content. - @include break-small { - padding-top: $header-height; - } - - // Beyond the medium breakpoint, the main scrolling area itself becomes fixed so the padding then becomes - // unnecessary, but until then it's still needed. -} - .edit-post-layout__metaboxes:not(:empty) { border-top: $border-width solid $light-gray-500; margin-top: 10px; @@ -37,95 +22,6 @@ } @include editor-left(".edit-post-layout__content .components-editor-notices__snackbar"); -.edit-post-layout__content { - display: flex; - flex-direction: column; - - // These rules are specific to mobile and small breakpoints. - min-height: 100%; - position: relative; - - // We scroll the main editing canvas, the sidebar, and the block library separately to prevent scroll bleed. - // Because the navigation sidebar menu has "flyout" menus, we can't yet, scroll that independently, but as soon - // as we can, we should simplify these rules. - // In the mean time, if a user has a small screen and lots of plugin-added menu items in the navigation menu, - // they have to be able to scroll. To accommodate the flyout menus, we scroll the `body` element for this. - @include break-medium() { - // Because the body element scrolls the navigation sidebar, we have to use position fixed here. - // Otherwise you would scroll the editing canvas out of view when you scroll the sidebar. - position: fixed; - bottom: $footer-height; - left: 0; - right: 0; - - // Because this is scoped to break-medium and larger, the admin-bar is always this height. - top: $header-height + $admin-bar-height; - - // Sadly, `position: fixed;` do not inherit boundaries from a relative parent. Due to that we have to compensate using `calc`. - min-height: calc(100% - #{ $header-height + $admin-bar-height }); - height: auto; // This overrides the 100% height the element inherits from line 3. - - // In this matrix, we compensate for any configurations for the presence and width of the navigation sidebar. - // This is similar to the code in the @editor-left mixin, but uses margins instead. - // Because we are beyond the medium breakpoint, we only have to worry about folded, auto-folded, and default. - margin-left: $admin-sidebar-width; - - // Make room for the footer - .edit-post-layout.is-mode-visual & { - bottom: $footer-height; - min-height: calc(100% - #{ $header-height + $admin-bar-height + $footer-height }); - } - - // Auto fold is when on smaller breakpoints, nav menu auto colllapses. - body.auto-fold & { - margin-left: $admin-sidebar-width-collapsed; - - @include break-large() { - margin-left: $admin-sidebar-width; - } - } - - // Sidebar manually collapsed. - body.folded & { - margin-left: $admin-sidebar-width-collapsed; - } - - // Provide special rules for fullscreen mode. - body.is-fullscreen-mode & { - margin-left: 0 !important; - top: $header-height; - } - } - - // For users with the Top Toolbar option enabled, special rules apply to the height of the content area. - .has-fixed-toolbar & { - // From the medium breakpoint it sits below the editor bar. - @include break-medium() { - top: $header-height + $admin-bar-height + $block-controls-height; - } - - // From the xlarge breakpoint it sits in the editor bar. - @include break-xlarge() { - top: $header-height + $admin-bar-height; - } - } - - .edit-post-visual-editor { - flex: 1 1 auto; - - // In IE11 flex-basis: 100% cause a bug where the metaboxes area overlap with the content area. - // But it works as expected without it. - // The flex-basis is needed for the other browsers to make sure the content area is full-height. - @supports (position: sticky) { - flex-basis: 100%; - } - } - - .edit-post-layout__metaboxes { - flex-shrink: 0; - } -} - .edit-post-layout .editor-post-publish-panel { position: fixed; z-index: z-index(".edit-post-layout .edit-post-post-publish-panel"); @@ -177,20 +73,8 @@ } .edit-post-toggle-publish-panel { - position: fixed; - top: -9999em; - bottom: auto; - left: auto; - right: 0; - z-index: z-index(".edit-post-toggle-publish-panel"); - padding: 10px 10px 10px 0; - width: $sidebar-width; background-color: $white; - - &:focus { - top: auto; - bottom: 0; - } + padding: 10px 10px 10px 0; .edit-post-toggle-publish-panel__button { width: auto; @@ -223,19 +107,14 @@ // Stretch to mimic outline padding on desktop. @include break-medium() { display: flex; - position: fixed; - bottom: 0; - right: 0; background: $white; height: $footer-height; padding: 0 $grid-size; align-items: center; border-top: $border-width solid $light-gray-500; font-size: $default-font-size; - box-sizing: border-box; } } -@include editor-left(".edit-post-layout__footer"); .edit-post-layout__scrollable-container { // On mobile the main content (html or body) area has to scroll. diff --git a/packages/edit-post/src/components/sidebar/index.js b/packages/edit-post/src/components/sidebar/index.js index 21559c2eea255..790ce933fa972 100644 --- a/packages/edit-post/src/components/sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/index.js @@ -17,14 +17,9 @@ const { Fill, Slot } = createSlotFill( 'Sidebar' ); * * @return {Object} The rendered sidebar. */ -function Sidebar( { children, label, className } ) { +function Sidebar( { children, className } ) { return ( -
+
{ children }
); diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js index 7c03f172b009f..a112ea053b2df 100644 --- a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js @@ -41,10 +41,7 @@ function PluginSidebar( props ) { /> } ) } - + diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss index 73d9431661c26..2f55d4ed7f053 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/style.scss +++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss @@ -4,7 +4,6 @@ padding-right: $grid-size-small; border-top: 0; position: sticky; - z-index: z-index(".components-panel__header.edit-post-sidebar__panel-tabs"); top: 0; ul { diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 17d3f8277372b..b1d3b8d417ac4 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -5,7 +5,7 @@ import { Panel } from '@wordpress/components'; import { compose, ifCondition } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { BlockInspector } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; + /** * Internal dependencies */ @@ -23,10 +23,7 @@ import MetaBoxes from '../../meta-boxes'; import PluginDocumentSettingPanel from '../plugin-document-setting-panel'; const SettingsSidebar = ( { sidebarName } ) => ( - + { sidebarName === 'edit-post/document' && ( diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 50ddd2efedbde..9dfe6c9dabd97 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -1,36 +1,17 @@ .edit-post-sidebar { - position: fixed; z-index: z-index(".edit-post-sidebar"); - top: 0; - right: 0; - bottom: 0; width: $sidebar-width; border-left: $border-width solid $light-gray-500; background: $white; color: $dark-gray-500; - height: 100vh; - overflow: hidden; @include break-small() { - top: $admin-bar-height-big + $header-height; - z-index: z-index(".edit-post-sidebar {greater than small}"); - height: auto; + z-index: auto; + height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } - @include break-medium() { - top: $admin-bar-height + $header-height; - - .edit-post-layout.is-mode-visual & { - bottom: $footer-height; - } - - body.is-fullscreen-mode & { - top: $header-height; - } - } - > .components-panel { border-left: none; border-right: none; @@ -41,7 +22,6 @@ margin-top: -1px; margin-bottom: -1px; position: relative; - z-index: z-index(".edit-post-sidebar .components-panel"); @include break-small() { overflow: hidden; @@ -103,26 +83,6 @@ } } -/* Visual and Text editor both */ -.edit-post-layout.is-sidebar-opened .edit-post-layout__content { - @include break-medium() { - margin-right: $sidebar-width; - } -} - -.edit-post-layout.is-sidebar-opened { - .edit-post-sidebar, - .edit-post-plugin-sidebar__sidebar-layout { - /* Sidebar covers screen on mobile */ - width: 100%; - - /* Sidebar sits on the side on larger breakpoints */ - @include break-medium() { - width: $sidebar-width; - } - } -} - /* Text Editor specific */ .components-panel__header.edit-post-sidebar__header { background: $white; diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 6346b4f02bcc7..3528d116432f4 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -5,6 +5,15 @@ & .components-button { font-family: $default-font; } + + flex: 1 1 auto; + + // In IE11 flex-basis: 100% cause a bug where the metaboxes area overlap with the content area. + // But it works as expected without it. + // The flex-basis is needed for the other browsers to make sure the content area is full-height. + @supports (position: sticky) { + flex-basis: 100%; + } } .edit-post-visual-editor .block-editor-writing-flow__click-redirect { diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index da8b8a1a21268..2bd70b382796a 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -1,5 +1,6 @@ $footer-height: $icon-button-size-small; +@import "./components/editor-regions/style.scss"; @import "./components/fullscreen-mode/style.scss"; @import "./components/header/style.scss"; @import "./components/header/fullscreen-mode-close/style.scss"; From 80374f8689b24a0ce3e820afa8acb9e63baa85c3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 Oct 2019 08:54:02 +0100 Subject: [PATCH 2/5] Fix fullscreen mode --- packages/edit-post/src/components/editor-regions/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss index 7a88e568fbcfb..a688d95926142 100644 --- a/packages/edit-post/src/components/editor-regions/style.scss +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -18,10 +18,16 @@ right: 0; bottom: 0; height: auto; + .is-fullscreen-mode & { + top: 0; + } } @include break-medium() { top: $admin-bar-height; + .is-fullscreen-mode & { + top: 0; + } } } @include editor-left(".edit-post-editor-regions"); From 455e2372deedc1903a985e16d71103b3e1a227b8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 Oct 2019 09:40:21 +0100 Subject: [PATCH 3/5] multiple fixes --- packages/base-styles/_z-index.scss | 2 +- .../src/components/editor-regions/style.scss | 36 +++++++++++-------- .../header/header-toolbar/style.scss | 2 +- .../src/components/header/style.scss | 2 +- .../src/components/layout/style.scss | 1 - .../src/components/sidebar/style.scss | 7 ++-- .../src/components/text-editor/style.scss | 1 + 7 files changed, 30 insertions(+), 21 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 2381a35512b2e..9ef4302f32d66 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -66,7 +66,7 @@ $z-layers: ( // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } - ".edit-post-sidebar": 100000, + ".edit-post-editor-regions__sidebar": 100000, ".edit-widgets-sidebar": 100000, ".edit-post-layout .edit-post-post-publish-panel": 100001, // For larger views, the wp-admin navbar dropdown should be at top of diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss index a688d95926142..ef0d452451fb1 100644 --- a/packages/edit-post/src/components/editor-regions/style.scss +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -8,12 +8,12 @@ // On Mobile keep a margin for the header and admin header // as both of these are fixed top: 0; - @include break-small() { + @include break-medium() { margin-top: 0; // On Desktop position the container as fixed to avoid scroll bleed. position: fixed; - top: $admin-bar-height-big; + top: $admin-bar-height; left: 0; right: 0; bottom: 0; @@ -22,13 +22,6 @@ top: 0; } } - - @include break-medium() { - top: $admin-bar-height; - .is-fullscreen-mode & { - top: 0; - } - } } @include editor-left(".edit-post-editor-regions"); @@ -37,7 +30,7 @@ display: flex; // On Mobile the header is fixed to keep HTML as scrollable. - @include break-small() { + @include break-medium() { overflow: auto; } } @@ -46,7 +39,7 @@ flex-grow: 1; // On Mobile the header is fixed to keep HTML as scrollable. - @include break-small() { + @include break-medium() { overflow: auto; } } @@ -54,21 +47,35 @@ .edit-post-editor-regions__sidebar { width: auto; // Keep the sidebar width flexible. flex-shrink: 0; + position: fixed !important; // Need to override the default relative positionning + z-index: z-index(".edit-post-editor-regions__sidebar"); + top: 0; + right: 0; + bottom: 0; + left: 0; + + &:empty { + display: none; + } // On Mobile the header is fixed to keep HTML as scrollable. - @include break-small() { + @include break-medium() { overflow: auto; + border-left: $border-width solid $light-gray-500; + position: relative !important; + z-index: initial; } } .edit-post-editor-regions__header { flex-shrink: 0; height: auto; // Keep the height flexible. + border-bottom: $border-width solid $light-gray-500; // On Mobile the header is sticky. position: sticky; top: 0; - @include break-small() { + @include break-medium() { // Cancel the fixed positionning used in mobile. position: initial; overflow: auto; @@ -79,10 +86,11 @@ height: auto; // Keep the height flexible. flex-shrink: 0; overflow: auto; + border-top: $border-width solid $light-gray-500; // On Mobile the footer is hidden display: none; - @include break-small() { + @include break-medium() { display: block; } } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index ceed4a0364ffd..12a9337b67aed 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -26,7 +26,7 @@ .edit-post-header-toolbar__block-toolbar { // Stack toolbar below Editor Bar. position: absolute; - top: $header-height; + top: $header-height + 1px; left: 0; right: 0; background: $white; diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 1905a25deb19a..466a6cc628012 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -1,6 +1,6 @@ .edit-post-header { + height: $header-height; padding: $grid-size-small 2px; - border-bottom: $border-width solid $light-gray-500; background: $white; display: flex; flex-wrap: wrap; diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 1804b97ac920f..5dcedb8a0d894 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -111,7 +111,6 @@ height: $footer-height; padding: 0 $grid-size; align-items: center; - border-top: $border-width solid $light-gray-500; font-size: $default-font-size; } } diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 9dfe6c9dabd97..8c979cb44a07c 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -1,7 +1,4 @@ .edit-post-sidebar { - z-index: z-index(".edit-post-sidebar"); - width: $sidebar-width; - border-left: $border-width solid $light-gray-500; background: $white; color: $dark-gray-500; @@ -12,6 +9,10 @@ -webkit-overflow-scrolling: touch; } + @include break-medium() { + width: $sidebar-width; + } + > .components-panel { border-left: none; border-right: none; diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index f7696bb4ee195..f6135be67b9c3 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -1,4 +1,5 @@ .edit-post-text-editor { + position: relative; width: 100%; // Always show outlines in code editor From b409aa5820a243b5896bef65bc51107946f83c0b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 Oct 2019 10:04:19 +0100 Subject: [PATCH 4/5] Fix header z-index issues --- packages/base-styles/_z-index.scss | 5 +++-- .../edit-post/src/components/editor-regions/style.scss | 10 ++++++++-- packages/edit-post/src/components/header/style.scss | 1 - .../edit-widgets/src/components/sidebar/style.scss | 2 +- 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 9ef4302f32d66..230c98893e1d0 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -25,7 +25,7 @@ $z-layers: ( ".block-library-gallery-item__inline-menu": 20, ".block-editor-url-input__suggestions": 30, ".edit-post-layout__footer": 30, - ".edit-post-header": 30, + ".edit-post-editor-regions__header": 30, ".edit-widgets-header": 30, ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter ".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter @@ -75,7 +75,8 @@ $z-layers: ( // Show sidebar in greater than small viewports above editor related elements // but bellow #adminmenuback { z-index: 100 } - ".edit-post-sidebar {greater than small}": 90, + ".edit-post-editor-regions__sidebar {greater than small}": 90, + ".edit-widgets-sidebar {greater than small}": 90, // Show notices below expanded editor bar // .edit-post-header { z-index: 30 } diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss index ef0d452451fb1..ead37c07d9c2a 100644 --- a/packages/edit-post/src/components/editor-regions/style.scss +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -53,6 +53,7 @@ right: 0; bottom: 0; left: 0; + background: $white; &:empty { display: none; @@ -63,7 +64,7 @@ overflow: auto; border-left: $border-width solid $light-gray-500; position: relative !important; - z-index: initial; + z-index: z-index(".edit-post-editor-regions__sidebar {greater than small}"); } } @@ -71,14 +72,19 @@ flex-shrink: 0; height: auto; // Keep the height flexible. border-bottom: $border-width solid $light-gray-500; + z-index: z-index(".edit-post-editor-regions__header"); // On Mobile the header is sticky. position: sticky; top: 0; + + @include break-small() { + top: $admin-bar-height-big; // The top bar is fixed on this breakpoint. + } + @include break-medium() { // Cancel the fixed positionning used in mobile. position: initial; - overflow: auto; } } diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 466a6cc628012..1abac2f94eeab 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -8,7 +8,6 @@ align-items: center; // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket. max-width: 100vw; - z-index: z-index(".edit-post-header"); // Make toolbar sticky on larger breakpoints @include break-zoomed-in { diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss index 53bab2c7ffac8..5c744d535f45b 100644 --- a/packages/edit-widgets/src/components/sidebar/style.scss +++ b/packages/edit-widgets/src/components/sidebar/style.scss @@ -13,7 +13,7 @@ @include break-small() { top: $admin-bar-height-big + $header-height; - z-index: z-index(".edit-post-sidebar {greater than small}"); + z-index: z-index(".edit-widgets-sidebar {greater than small}"); height: auto; overflow: auto; -webkit-overflow-scrolling: touch; From f14d3a9fb75f4a012a4ac44307715fcf3f229e99 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 18 Nov 2019 09:27:50 +0100 Subject: [PATCH 5/5] Fix e2e tests --- .../specs/editor/various/block-hierarchy-navigation.test.js | 1 - packages/e2e-tests/specs/editor/various/sidebar.test.js | 1 - packages/edit-post/src/components/editor-regions/style.scss | 1 + 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index efba2e1d6afc5..2dc5dc1f6cc54 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -82,7 +82,6 @@ describe( 'Navigating the block hierarchy', () => { await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); - await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyTimes( 'Tab', 4 ); // Tweak the columns count by increasing it by one. diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js index c86900f308f1e..d0768f916f0f6 100644 --- a/packages/e2e-tests/specs/editor/various/sidebar.test.js +++ b/packages/e2e-tests/specs/editor/various/sidebar.test.js @@ -91,7 +91,6 @@ describe( 'Sidebar', () => { await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); - await pressKeyWithModifier( 'ctrl', '`' ); // Tab lands at first (presumed selected) option "Document". await page.keyboard.press( 'Tab' ); diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss index ead37c07d9c2a..5bad0c7918bc6 100644 --- a/packages/edit-post/src/components/editor-regions/style.scss +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -85,6 +85,7 @@ @include break-medium() { // Cancel the fixed positionning used in mobile. position: initial; + top: 0; } }