From 4c1b49697b52019b6ff7712b776cfb456d7b6b01 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 25 Oct 2017 12:22:33 +0100
Subject: [PATCH] Metaboxes: Try showing the metaboxes under the editor's
 content

not hiden under a panel
---
 editor/layout/index.js                |  4 +++-
 editor/layout/style.scss              | 29 ++++++++++++++++-----------
 editor/meta-boxes/index.js            | 10 +++++++--
 editor/sidebar/post-settings/index.js |  2 +-
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/editor/layout/index.js b/editor/layout/index.js
index a3ffbfde124a48..d1bc65167f4066 100644
--- a/editor/layout/index.js
+++ b/editor/layout/index.js
@@ -46,7 +46,9 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 					{ mode === 'text' && <TextEditor /> }
 					{ mode === 'visual' && <VisualEditor /> }
 				</div>
-				<MetaBoxes location="normal" />
+				<div className="editor-layout__metaboxes">
+					<MetaBoxes location="normal" />
+				</div>
 			</div>
 			{ isSidebarOpened && <Sidebar /> }
 			<Popover.Slot />
diff --git a/editor/layout/style.scss b/editor/layout/style.scss
index 6abc2eb68c16da..3cc384e1081764 100644
--- a/editor/layout/style.scss
+++ b/editor/layout/style.scss
@@ -5,22 +5,27 @@
 
 .editor-layout {
 	position: relative;
+
+	.components-notice-list {
+		position: fixed;
+		top: 100px;
+		right: auto;
+	}
 }
 
-.editor-layout__content {
-	position: relative;
-	display: flex;
-	flex-direction: column;
+.editor-layout__metaboxes:not(:empty) {
+	border-top: 1px solid $light-gray-500;
+	margin-top: 10px;
+	padding: 10px 0;
+
+	.editor-meta-boxes-iframe {
+		max-width: $visual-editor-max-width;
+		margin: auto;
+	}
 }
 
-.editor-layout__editor {
-	flex-basis: 100%;
+.editor-layout__content {
+	position: relative;
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
 }
-
-.editor-layout .components-notice-list {
-	position: fixed;
-	top: 100px;
-	right: auto;
-}
diff --git a/editor/meta-boxes/index.js b/editor/meta-boxes/index.js
index 213ec43bbdc266..e44ec5e2a4e056 100644
--- a/editor/meta-boxes/index.js
+++ b/editor/meta-boxes/index.js
@@ -10,14 +10,20 @@ import MetaBoxesIframe from './meta-boxes-iframe';
 import MetaBoxesPanel from './meta-boxes-panel';
 import { getMetaBox } from '../selectors';
 
-function MetaBox( { location, isActive } ) {
+function MetaBox( { location, isActive, usePanel = false } ) {
 	if ( ! isActive ) {
 		return null;
 	}
 
+	const element = <MetaBoxesIframe location={ location } />;
+
+	if ( ! usePanel ) {
+		return element;
+	}
+
 	return (
 		<MetaBoxesPanel>
-			<MetaBoxesIframe location={ location } />
+			{ element }
 		</MetaBoxesPanel>
 	);
 }
diff --git a/editor/sidebar/post-settings/index.js b/editor/sidebar/post-settings/index.js
index b70e263583bb42..71a6aad75406e2 100644
--- a/editor/sidebar/post-settings/index.js
+++ b/editor/sidebar/post-settings/index.js
@@ -27,7 +27,7 @@ const panel = (
 		<DiscussionPanel />
 		<PageAttributes />
 		<DocumentOutlinePanel />
-		<MetaBoxes location="side" />
+		<MetaBoxes location="side" usePanel />
 	</Panel>
 );