diff --git a/packages/block-editor/src/components/editor-skeleton/style.scss b/packages/block-editor/src/components/editor-skeleton/style.scss
index 75a85fd604cc73..9bedb169e74031 100644
--- a/packages/block-editor/src/components/editor-skeleton/style.scss
+++ b/packages/block-editor/src/components/editor-skeleton/style.scss
@@ -59,7 +59,6 @@ html.block-editor-editor-skeleton__html-container {
.block-editor-editor-skeleton__content {
flex-grow: 1;
- background-color: $light-gray-700;
// Treat as flex container to allow children to grow to occupy full
// available height of the content area.
@@ -75,26 +74,6 @@ html.block-editor-editor-skeleton__html-container {
}
.block-editor-editor-skeleton__sidebar {
- display: none;
-
- @include break-medium() {
- display: block;
- z-index: z-index(".block-editor-editor-skeleton__sidebar");
- 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;
- }
- }
-}
-
-.is-sidebar-opened .block-editor-editor-skeleton__sidebar {
display: block;
width: auto; // Keep the sidebar width flexible.
flex-shrink: 0;
@@ -107,6 +86,10 @@ html.block-editor-editor-skeleton__html-container {
background: $white;
color: $dark-gray-primary;
+ &:empty {
+ display: none;
+ }
+
// On Mobile the header is fixed to keep HTML as scrollable.
@include break-medium() {
overflow: auto;
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index a75cc8eeb78ae7..b6dff38403e7c0 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -127,3 +127,8 @@
}
}
}
+
+.edit-post-layout .block-editor-editor-skeleton__content {
+ background-color: $light-gray-700;
+}
+
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 6737049cbbe56f..d23d1da0af54ea 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -2,29 +2,8 @@
display: flex;
align-items: center;
justify-content: space-between;
- border-bottom: 1px solid $light-gray-500;
height: $header-height;
- background: $white;
- z-index: z-index(".edit-widgets-header");
-
- left: 0;
- right: 0;
- // Stick the toolbar to the top, because the admin bar is not fixed on mobile.
- top: 0;
- position: sticky;
-
- // 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-unit-10;
- top: $admin-bar-height-big;
- }
-
- @include break-medium() {
- top: $admin-bar-height;
- }
}
-@include editor-left(".edit-widgets-header");
.edit-widgets-header__title {
font-size: 16px;
diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
index 15480f21f77a4e..e13b6b0bb4415b 100644
--- a/packages/edit-widgets/src/components/layout/index.js
+++ b/packages/edit-widgets/src/components/layout/index.js
@@ -7,9 +7,13 @@ import {
DropZoneProvider,
Popover,
SlotFillProvider,
+ FocusReturnProvider,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
-import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
+import {
+ BlockEditorKeyboardShortcuts,
+ __experimentalEditorSkeleton as EditorSkeleton,
+} from '@wordpress/block-editor';
/**
* Internal dependencies
@@ -22,30 +26,45 @@ import Notices from '../notices';
function Layout( { blockEditorSettings } ) {
const [ selectedArea, setSelectedArea ] = useState( null );
return (
-
-
-
-
-
-
- {
- setSelectedArea( null );
- } }
- >
-
-
-
-
-
+ <>
+
+
+
+
+ }
+ sidebar={ }
+ content={
+ <>
+
+ {
+ setSelectedArea( null );
+ } }
+ >
+
+
+
+ }
+ />
+
+
+
+
+
+
);
}
diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index a7447d2dabf9d2..a463871e5b8c5d 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -1,11 +1,3 @@
.edit-widgets-layout__content {
- min-height: 100%;
- background: #f1f1f1;
padding: 30px 0;
-
- // Temporarily disable the sidebar on mobile
- @include break-small() {
- margin-right: $sidebar-width;
- margin-top: $header-height;
- }
}
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index ebd70ac9294cbe..cf603ec60c30ab 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -3,6 +3,7 @@
*/
import { createSlotFill, Panel } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
export const {
Fill: BlockSidebarFill,
@@ -10,6 +11,13 @@ export const {
} = createSlotFill( 'EditWidgetsBlockSidebar' );
function Sidebar() {
+ const isMobile = useViewportMatch( 'medium', '<' );
+
+ // Disable on mobile temporarily
+ if ( isMobile ) {
+ return null;
+ }
+
return (
.components-panel {
margin-top: -1px;
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index a768e89053ba7a..86ee2bd54c3c69 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -47,6 +47,11 @@ body.gutenberg_page_gutenberg-widgets {
min-height: initial;
position: initial;
}
+
+
+ .block-editor-editor-skeleton__content {
+ background-color: #f1f1f1;
+ }
}
/**