Layout: Add metabox placeholder shell

components/button/style.scss

@@ -3,6 +3,11 @@
 	border: none;
 	outline: none;
 	text-decoration: none;
+	margin: 0;
+
+	&:active {
+		color: currentColor;
+	}
 
 	&:disabled {
 		opacity: 0.6;

components/panel/style.scss

@@ -54,7 +54,7 @@
 .components-panel .components-panel__body-title {
 	display: block;
 	padding: 0;
-	margin: -15px;
+	margin: -1 * $panel-padding;
 	font-size: inherit;
 }
 .components-panel__body.is-opened .components-panel__body-title {

editor/assets/stylesheets/main.scss

@@ -10,10 +10,19 @@ body.gutenberg_page_gutenberg-demo {
 		padding-left: 0;
 	}
 
+	#wpbody-content {
+		padding-bottom: 0;
+	}
+
 	#wpfooter {
 		display: none;
 	}
 
+	.a11y-speak-region {
+		left: -1px;
+		top: -1px;
+	}
+
 	svg {
 		fill: currentColor;
 	}
@@ -46,6 +55,11 @@ body.gutenberg_page_gutenberg-demo {
 
 .gutenberg__editor {
 	position: relative;
+	height: calc( 100vh - #{ $admin-bar-height-big } );
+
+	@include break-medium {
+		height: calc( 100vh - #{ $admin-bar-height } );
+	}
 
 	img {
 		max-width: 100%;

editor/layout/index.js

@@ -17,6 +17,7 @@ import Header from '../header';
 import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
+import MetaBoxes from '../meta-boxes';
 import UnsavedChangesWarning from '../unsaved-changes-warning';
 import DocumentTitle from '../document-title';
 import AutosaveMonitor from '../autosave-monitor';
@@ -40,8 +41,11 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 			<AutosaveMonitor />
 			<Header />
 			<div className="editor-layout__content">
-				{ mode === 'text' && <TextEditor /> }
-				{ mode === 'visual' && <VisualEditor /> }
+				<div className="editor-layout__editor">
+					{ mode === 'text' && <TextEditor /> }
+					{ mode === 'visual' && <VisualEditor /> }
+				</div>
+				<MetaBoxes />
 			</div>
 			{ isSidebarOpened && <Sidebar /> }
 		</div>

editor/layout/style.scss

@@ -1,7 +1,27 @@
+.editor-layout,
+.editor-layout__content {
+	height: 100%;
+}
+
 .editor-layout {
 	position: relative;
 }
 
+.editor-layout__content {
+	display: flex;
+	flex-direction: column;
+	margin-top: #{ -1 * $header-height };
+
+	@include break-medium {
+		margin-top: 0;
+	}
+}
+
+.editor-layout__editor {
+	flex-basis: 100%;
+	overflow-y: auto;
+}
+
 .editor-layout .components-notice-list {
 	position: fixed;
 	top: 100px;

editor/meta-boxes/index.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { Panel, PanelBody, Dashicon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+class MetaBoxes extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.toggle = this.toggle.bind( this );
+
+		this.state = {
+			isOpen: false,
+		};
+	}
+
+	toggle() {
+		this.setState( {
+			isOpen: ! this.state.isOpen,
+		} );
+	}
+
+	render() {
+		const { isOpen } = this.state;
+
+		return (
+			<Panel className="editor-meta-boxes">
+				<PanelBody
+					title={ __( 'Extended Settings' ) }
+					opened={ isOpen }
+					onToggle={ this.toggle }>
+					<div className="editor-meta-boxes__coming-soon">
+						<Dashicon icon="flag" />
+						<h3>{ __( 'Coming Soon' ) }</h3>
+						<p>{ __( 'Meta boxes are not yet supported, but are planned for a future release.' ) }</p>
+					</div>
+				</PanelBody>
+			</Panel>
+		);
+	}
+}
+
+export default MetaBoxes;

editor/meta-boxes/style.scss

@@ -0,0 +1,32 @@
+.editor-meta-boxes {
+	border-right-width: 0;
+	border-left-width: 0;
+
+	.components-panel__body-toggle {
+		background-color: $light-gray-300;
+	}
+
+	.components-panel__body.is-opened .components-panel__body-toggle {
+		border-bottom: 1px solid $light-gray-500;
+	}
+}
+
+.editor-meta-boxes__coming-soon {
+	width: 300px;
+	padding: #{ $panel-padding * 2 } 0 $panel-padding;
+	margin: 0 auto;
+	text-align: center;
+
+	&,
+	h3 {
+		color: $dark-gray-200;
+	}
+
+	h3 {
+		margin: 0.6em 0;
+	}
+
+	p {
+		margin-bottom: 0;
+	}
+}