Add block inspector to the Gutenberg playground. (#18077)

WordPress · Oct 25, 2019 · 5ac763a · 5ac763a
1 parent ce2e71c
commit 5ac763a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/playground/src/index.js b/playground/src/index.js
@@ -8,6 +8,7 @@ import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
 	BlockList,
+	BlockInspector,
 	WritingFlow,
 	ObserveTyping,
 } from '@wordpress/block-editor';
@@ -53,6 +54,9 @@ function App() {
 							onInput={ updateBlocks }
 							onChange={ updateBlocks }
 						>
+							<div className="playground__sidebar">
+								<BlockInspector />
+							</div>
 							<div className="editor-styles-wrapper">
 								<BlockEditorKeyboardShortcuts />
 								<WritingFlow>

diff --git a/playground/src/style.scss b/playground/src/style.scss
@@ -8,13 +8,33 @@
 @import "./reset";
 @import "./editor-styles";
 
+$playground-header-height: 95px;
 
 .playground__header {
 	align-items: center;
 	border-bottom: 1px solid #ddd;
 	display: flex;
 	justify-content: space-between;
 	padding: 20px;
+	height: $playground-header-height;
+}
+
+.playground__sidebar {
+	position: fixed;
+	top: $playground-header-height;
+	right: 0;
+	bottom: 0;
+	width: $sidebar-width;
+	border-left: $border-width solid $light-gray-500;
+	height: auto;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+
+	// Temporarily disable the sidebar on mobile
+	display: none;
+	@include break-small() {
+		display: block;
+	}
 }
 
 .playground__logo {
@@ -23,6 +43,9 @@
 }
 
 .playground__body {
+	@include break-small() {
+		width: calc(100% - #{$sidebar-width});
+	}
 	padding-top: 20px;
 
 	img {