From 995aa3ac442585da716d994dae991d478cd3b97a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Nov 2019 14:54:27 +0100 Subject: [PATCH] Refactor the layout component to separate the UI from the content. (#18044) --- packages/base-styles/_mixins.scss | 15 -- packages/base-styles/_z-index.scss | 9 +- .../higher-order/navigate-regions/style.scss | 2 + .../block-hierarchy-navigation.test.js | 1 - .../specs/editor/various/sidebar.test.js | 1 - .../src/components/editor-regions/index.js | 72 ++++++ .../src/components/editor-regions/style.scss | 118 ++++++++++ .../header/header-toolbar/style.scss | 2 +- .../edit-post/src/components/header/index.js | 8 +- .../src/components/header/style.scss | 20 -- .../edit-post/src/components/layout/index.js | 215 ++++++++---------- .../src/components/layout/style.scss | 128 +---------- .../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 | 45 +--- .../src/components/text-editor/style.scss | 1 + .../src/components/visual-editor/style.scss | 9 + packages/edit-post/src/style.scss | 1 + .../src/components/sidebar/style.scss | 2 +- 21 files changed, 319 insertions(+), 352 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 fda485a7792752..d376b8aa78f38b 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 36cc265a0b7f64..230c98893e1d07 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 @@ -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 @@ -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 } @@ -102,7 +103,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 4653a08ee3862b..bd65bfb64135c1 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/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index efba2e1d6afc5e..2dc5dc1f6cc544 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 c86900f308f1e1..d0768f916f0f63 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/index.js b/packages/edit-post/src/components/editor-regions/index.js new file mode 100644 index 00000000000000..f208fed2cef5e0 --- /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 00000000000000..5bad0c7918bc6a --- /dev/null +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -0,0 +1,118 @@ +.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-medium() { + margin-top: 0; + + // On Desktop position the container as fixed to avoid scroll bleed. + position: fixed; + top: $admin-bar-height; + left: 0; + right: 0; + bottom: 0; + height: auto; + .is-fullscreen-mode & { + top: 0; + } + } +} +@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-medium() { + overflow: auto; + } +} + +.edit-post-editor-regions__content { + flex-grow: 1; + + // On Mobile the header is fixed to keep HTML as scrollable. + @include break-medium() { + overflow: auto; + } +} + +.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; + background: $white; + + &:empty { + display: none; + } + + // On Mobile the header is fixed to keep HTML as scrollable. + @include break-medium() { + overflow: auto; + border-left: $border-width solid $light-gray-500; + position: relative !important; + z-index: z-index(".edit-post-editor-regions__sidebar {greater than small}"); + } +} + +.edit-post-editor-regions__header { + 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; + top: 0; + } +} + +.edit-post-editor-regions__footer { + 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-medium() { + 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/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index ceed4a0364ffdb..12a9337b67aede 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/index.js b/packages/edit-post/src/components/header/index.js index dff5622593603a..8515b6ba372a00 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 65a94ba8ad72d0..1abac2f94eeabb 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -1,7 +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; @@ -9,31 +8,14 @@ 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"); - 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 +37,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 b8cb779603410c..c5dc5c2ab13e66 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 df4b461807543c..94e4bf5a241a4b 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"); @@ -173,20 +69,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; @@ -219,19 +103,13 @@ // 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 21559c2eea2553..790ce933fa9722 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 7c03f172b009fb..a112ea053b2df4 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 73d9431661c267..2f55d4ed7f0539 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 17d3f8277372b3..b1d3b8d417ac41 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 50ddd2efedbde5..8c979cb44a07c5 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -1,34 +1,16 @@ .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; - } + width: $sidebar-width; } > .components-panel { @@ -41,7 +23,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 +84,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/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index f7696bb4ee1959..f6135be67b9c3f 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 diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 6346b4f02bcc72..3528d116432f4b 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 da8b8a1a212683..2bd70b382796ac 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"; diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss index 53bab2c7ffac8d..5c744d535f45b7 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;