Use the EditorSkeleton component to layout the widgets screen

WordPress · Feb 25, 2020 · 06bbecf · 06bbecf
1 parent ef73ed0
commit 06bbecf
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 103 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<BlockEditorKeyboardShortcuts.Register />
-				<Header />
-				<Sidebar />
-				<Notices />
-				<div
-					className="edit-widgets-layout__content"
-					role="region"
-					aria-label={ __( 'Widgets screen content' ) }
-					tabIndex="-1"
-					onFocus={ () => {
-						setSelectedArea( null );
-					} }
-				>
-					<WidgetAreas
-						selectedArea={ selectedArea }
-						setSelectedArea={ setSelectedArea }
-						blockEditorSettings={ blockEditorSettings }
-					/>
-				</div>
-				<Popover.Slot />
-			</DropZoneProvider>
-		</SlotFillProvider>
+		<>
+			<BlockEditorKeyboardShortcuts.Register />
+			<SlotFillProvider>
+				<DropZoneProvider>
+					<FocusReturnProvider>
+						<EditorSkeleton
+							header={ <Header /> }
+							sidebar={ <Sidebar /> }
+							content={
+								<>
+									<Notices />
+									<div
+										className="edit-widgets-layout__content"
+										role="region"
+										aria-label={ __(
+											'Widgets screen content'
+										) }
+										tabIndex="-1"
+										onFocus={ () => {
+											setSelectedArea( null );
+										} }
+									>
+										<WidgetAreas
+											selectedArea={ selectedArea }
+											setSelectedArea={ setSelectedArea }
+											blockEditorSettings={
+												blockEditorSettings
+											}
+										/>
+									</div>
+								</>
+							}
+						/>
+
+						<Popover.Slot />
+					</FocusReturnProvider>
+				</DropZoneProvider>
+			</SlotFillProvider>
+		</>
 	);
 }
 

diff --git 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
@@ -3,13 +3,21 @@
  */
 import { createSlotFill, Panel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 export const {
 	Fill: BlockSidebarFill,
 	Slot: BlockSidebarSlot,
 } = createSlotFill( 'EditWidgetsBlockSidebar' );
 
 function Sidebar() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	// Disable on mobile temporarily
+	if ( isMobile ) {
+		return null;
+	}
+
 	return (
 		<div
 			className="edit-widgets-sidebar"

diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss
@@ -1,33 +1,5 @@
 .edit-widgets-sidebar {
-	position: fixed;
-	z-index: z-index(".edit-widgets-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-widgets-sidebar {greater than small}");
-		height: auto;
-		overflow: auto;
-		-webkit-overflow-scrolling: touch;
-	}
-
-	@include break-medium() {
-		top: $admin-bar-height + $header-height;
-	}
-
-	// Temporarily disable the sidebar on mobile
-	display: none;
-	@include break-small() {
-		display: block;
-	}
 
 	> .components-panel {
 		margin-top: -1px;

diff --git 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;
+	}
 }
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -127,3 +127,8 @@ @@
     		}
     	}
     }
+    .edit-post-layout .block-editor-editor-skeleton__content {
+    	background-color: $light-gray-700;
+    }