Tweak the playground design

WordPress · Mar 21, 2019 · c42945c · c42945c
1 parent 8d965d2
commit c42945c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 24 deletions.
diff --git a/playground/src/index.js b/playground/src/index.js
@@ -8,7 +8,7 @@ import '@babel/polyfill';
  */
 import '@wordpress/editor'; // This shouldn't be necessary
 
-import { render, useState } from '@wordpress/element';
+import { render, useState, Fragment } from '@wordpress/element';
 import {
 	BlockEditorProvider,
 	BlockList,
@@ -37,20 +37,27 @@ function App() {
 	const [ blocks, updateBlocks ] = useState( [] );
 
 	return (
-		<BlockEditorProvider
-			value={ blocks }
-			onInput={ updateBlocks }
-			onChange={ updateBlocks }
-		>
-			<div className="editor-styles-wrapper">
-				<WritingFlow>
-					<ObserveTyping>
-						<BlockList />
-					</ObserveTyping>
-				</WritingFlow>
+		<Fragment>
+			<div className="playground__header">
+				<h1 className="playground__logo">Gutenberg Playground</h1>
 			</div>
-			<Popover.Slot />
-		</BlockEditorProvider>
+			<div className="playground__body">
+				<BlockEditorProvider
+					value={ blocks }
+					onInput={ updateBlocks }
+					onChange={ updateBlocks }
+				>
+					<div className="editor-styles-wrapper">
+						<WritingFlow>
+							<ObserveTyping>
+								<BlockList />
+							</ObserveTyping>
+						</WritingFlow>
+					</div>
+					<Popover.Slot />
+				</BlockEditorProvider>
+			</div>
+		</Fragment>
 	);
 }
 

diff --git a/playground/src/common.scss → playground/src/reset.scss b/playground/src/common.scss → playground/src/reset.scss
@@ -1,10 +1,3 @@
-@import "../../assets/stylesheets/colors";
-@import "../../assets/stylesheets/variables";
-@import "../../assets/stylesheets/mixins";
-@import "../../assets/stylesheets/breakpoints";
-@import "../../assets/stylesheets/animations";
-@import "../../assets/stylesheets/z-index";
-
 // TODO: screen reader text className should be replaced
 // with a component in the a11y package.
 .screen-reader-text {
@@ -25,6 +18,14 @@
 	@include reset;
 }
 
+html,
+body {
+	margin: 0;
+	padding: 0;
+	font-family: $default-font;
+	font-size: $default-font-size;
+}
+
 a,
 div {
 	outline: 0;

diff --git a/playground/src/style.scss b/playground/src/style.scss
@@ -1,7 +1,25 @@
-@import "./common.scss";
-@import "./editor-styles.scss";
+@import "../../assets/stylesheets/colors";
+@import "../../assets/stylesheets/variables";
+@import "../../assets/stylesheets/mixins";
+@import "../../assets/stylesheets/breakpoints";
+@import "../../assets/stylesheets/animations";
+@import "../../assets/stylesheets/z-index";
 
-#app {
+@import "./reset";
+@import "./editor-styles";
+
+
+.playground__header {
+	padding: 20px;
+	border-bottom: 1px solid #ddd;
+}
+
+.playground__logo {
+	font-size: 20px;
+	font-weight: 300;
+}
+
+.playground__body {
 	padding-top: 20px;
 
 	img {