+ ) }
+ />
+
+
+
);
}
-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 df4b461807543..94e4bf5a241a4 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 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..8c979cb44a07c 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 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
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";
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;