Meta Boxes: Give #poststuff div a broader scope; remove unused #postb…

…ox-container-2 (#4697)
WordPress · Feb 8, 2018 · e25a2a5 · e25a2a5
1 parent cddbb22
commit e25a2a5
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 90 deletions.
diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
@@ -54,7 +54,7 @@ function Layout( {
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />
 			<Header />
-			<div className="edit-post-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
+			<div id="poststuff" className="edit-post-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
 				<EditorNotices />
 				<div className="edit-post-layout__editor">
 					<EditorModeKeyboardShortcuts />

diff --git a/editor/components/meta-boxes/meta-boxes-area/style.scss b/editor/components/meta-boxes/meta-boxes-area/style.scss
@@ -1,93 +1,93 @@
 
-.editor-meta-boxes-area {
+/* Include #poststuff to override the css rules found in core. */
+#poststuff .editor-meta-boxes-area {
 	position: relative;
 
-		/* Match width and positioning of the meta boxes. Override default styles. */
-	#poststuff {
+	/* Match width and positioning of the meta boxes. Override default styles. */
+	.postbox-container {
 		margin: 0 auto;
 		padding-top: 0;
-		min-width: auto;
-	}
+		width: 100%;
 
-	#post {
-		margin: 0;
-	}
+		#post {
+			margin: 0;
+		}
 
-	/* Override Default meta box stylings */
+		/* Override Default meta box stylings */
 
-	#poststuff h3.hndle,
-	#poststuff .stuffbox > h3,
-	#poststuff h2.hndle { /* WordPress selectors yolo */
-		border-bottom: 1px solid $light-gray-500;
-		box-sizing: border-box;
-		color: $dark-gray-500;
-		font-weight: 600;
-		outline: none;
-		padding: 15px;
-		position: relative;
-		width: 100%;
-	}
+		.postbox h3.hndle,
+		.postbox .stuffbox > h3,
+		.postbox h2.hndle { /* WordPress selectors yolo */
+			border-bottom: 1px solid $light-gray-500;
+			box-sizing: border-box;
+			color: $dark-gray-500;
+			font-weight: 600;
+			font-size: 14px;
+			line-height: 1.4;
+			margin: 0;
+			outline: none;
+			padding: 15px;
+			position: relative;
+			width: 100%;
+		}
 
-	.postbox {
-		border: 0;
-		color: $dark-gray-500;
-		margin-bottom: 0;
-	}
+		.postbox {
+			border: 0;
+			color: $dark-gray-500;
+			margin-bottom: 0;
+		}
 
-	.postbox > .inside {
-		border-bottom: 1px solid $light-gray-500;
-		color: $dark-gray-500;
-		padding: 15px;
-		margin: 0;
-	}
+		.postbox > .inside {
+			border-bottom: 1px solid $light-gray-500;
+			color: $dark-gray-500;
+			padding: 15px;
+			margin: 0;
+		}
 
-	input {
-		max-width: 300px;
-	}
-
-	input,
-	select,
-	textarea {
-		background: inherit;
-		border: 1px solid $light-gray-500;
-		border-radius: 4px;
-		box-shadow: none;
-		color: $dark-gray-800;
-		display: inline-block;
-		font-family: inherit;
-		font-size: 13px;
-		line-height: 24px;
-		outline: none;
-		padding: 4px;
-	}
+		input,
+		select,
+		textarea {
+			background: inherit;
+			border: 1px solid $light-gray-500;
+			border-radius: 4px;
+			box-shadow: none;
+			color: $dark-gray-800;
+			display: inline-block;
+			font-family: inherit;
+			font-size: 13px;
+			line-height: 24px;
+			outline: none;
+			padding: 4px;
+		}
 
-	input:hover,
-	select:hover,
-	textarea:hover {
-		border: 1px solid $light-gray-700;
-	}
+		input:hover,
+		select:hover,
+		textarea:hover {
+			border: 1px solid $light-gray-700;
+		}
 
-	.postbox .handlediv {
-		height: 44px;
-		width: 44px;
-	}
+		.postbox .handlediv {
+			height: 44px;
+			width: 44px;
+		}
 
-	&.is-loading:before {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		content: '';
-		background: transparent;
-		z-index: z-index( '.editor-meta-boxes-area.is-loading:before');
-	}
+		&.is-loading:before {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			content: '';
+			background: transparent;
+			z-index: z-index( '.editor-meta-boxes-area.is-loading:before');
+		}
 
-	.spinner {
-		position: absolute;
-		top: 10px;
-		right: 20px;
-		z-index: z-index( '.editor-meta-boxes-area .spinner');
+		.spinner {
+			position: absolute;
+			top: 10px;
+			right: 20px;
+			z-index: z-index( '.editor-meta-boxes-area .spinner');
+		}
 	}
 }
 

diff --git a/lib/meta-box-partial-page.php b/lib/meta-box-partial-page.php
@@ -310,21 +310,23 @@ function the_gutenberg_metaboxes() {
 	<form class="metabox-base-form">
 	<?php gutenberg_meta_box_post_form_hidden_fields( $post ); ?>
 	</form>
-	<?php foreach ( $locations as $location ) : ?>
-		<form class="metabox-location-<?php echo esc_attr( $location ); ?>">
-			<div id="poststuff" class="sidebar-open">
-				<div id="postbox-container-2" class="postbox-container">
-					<?php
-					do_meta_boxes(
-						$current_screen,
-						$location,
-						$post
-					);
-					?>
+	<div class="metabox-location-container">
+		<?php foreach ( $locations as $location ) : ?>
+			<form class="metabox-location-<?php echo esc_attr( $location ); ?>">
+				<div class="sidebar-open">
+					<div class="postbox-container">
+						<?php
+						do_meta_boxes(
+							$current_screen,
+							$location,
+							$post
+						);
+						?>
+					</div>
 				</div>
-			</div>
-		</form>
-	<?php endforeach; ?>
+			</form>
+		<?php endforeach; ?>
+	</div>
 	<?php
 
 	// Reset meta box data.