Metaboxes: Try showing the metaboxes under the editor's content

not hiden under a panel
WordPress · Oct 31, 2017 · 082f6cd · 082f6cd
1 parent 81328e1
commit 082f6cd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -27,7 +27,7 @@ const panel = (
 		<DiscussionPanel />
 		<PageAttributes />
 		<DocumentOutlinePanel />
-		<MetaBoxes location="side" />
+		<MetaBoxes location="side" usePanel />
 	</Panel>
 );