Merge pull request #5217 from WordPress/try/fix-collapsing-margins

Try: Refactor block margins
WordPress · Mar 15, 2018 · a3776ed · a3776ed
2 parents 1e87758 + 5723e68
commit a3776ed
Show file tree

Hide file tree

Showing 13 changed files with 200 additions and 180 deletions.
diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -35,7 +35,7 @@
 		line-height: 1.25;
 		z-index: 1;
 		margin-bottom: 0;
-		max-width: $visual-editor-max-width;
+		max-width: $content-width;
 		padding: $block-padding;
 		text-align: center;
 

diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss
@@ -1,5 +1,7 @@
-.wp-block-gallery:not( .components-placeholder ) {
-	margin: -8px;
+.wp-block-gallery:not( .components-placeholder ):not( .alignfull ) {
+	// allow gallery items to go edge to edge
+	margin-left: -8px;
+	margin-right: -8px;
 }
 
 .blocks-gallery-item {

diff --git a/blocks/library/more/editor.scss b/blocks/library/more/editor.scss
@@ -26,8 +26,8 @@
 		content: '';
 		position: absolute;
 		top: calc( 50% );
-		left: $block-mover-padding-visible + $block-padding;
-		right: $block-mover-padding-visible + $block-padding;
+		left: $block-side-ui-padding + $block-padding;
+		right: $block-side-ui-padding + $block-padding;
 		border-top: 3px dashed $light-gray-700;
 		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
 	}

diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
@@ -1,3 +1,7 @@
+/**
+ * Breakpoint mixins
+ */
+
 @mixin break-huge() {
 	@media ( min-width: #{ ( $break-huge ) } ) {
 		@content;
@@ -34,6 +38,7 @@
 	}
 }
 
+
 /**
  * Long content fade mixin
  *
@@ -108,8 +113,8 @@
 	}
 }
 
-$visual-editor-max-width-padding: $visual-editor-max-width + $block-mover-padding-visible + $block-mover-padding-visible;
-$float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
+$content-width-padding: $content-width + $block-side-ui-padding + $block-side-ui-padding;
+$float-margin: calc( 50% - #{ $content-width-padding / 2 } );
 
 /**
  * Button states and focus styles

diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
@@ -29,23 +29,23 @@ $admin-sidebar-width-collapsed: 36px;
 $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
 $shadow-toolbar: 0px 2px 10px rgba( $dark-gray-900, .1 ), 0px 0px 2px rgba( $dark-gray-900, .1 );
 
-// Editor
-$text-editor-max-width: 760px;
-$visual-editor-max-width: 636px;
+// Editor Widths
+$sidebar-width: 280px;
+$text-editor-max-width: 760px;	// @todo: merge with variable below
+$content-width: 636px;	// @todo: leverage theme $content_width variable
+
+// Block UI
 $block-controls-height: 36px;
 $icon-button-size: 36px;
 $icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: 37px;
-$sidebar-width: 280px;
 
 // Blocks
 $block-padding: 14px;
 $block-mover-margin: 18px;
 $block-spacing: 4px;
-// old $block-mover-padding-visible: 32px;
-$block-mover-padding-visible: $icon-button-size-small + $icon-button-size-small;
-
+$block-side-ui-padding: 36px;
 
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -4,7 +4,7 @@
 
 $z-layers: (
 	'.editor-block-switcher__arrow': 1,
-	'.editor-block-list__block:before': -1,
+	'.editor-block-list__block-edit:before': -1,
 	'.editor-block-list__block .wp-block-more:before': -1,
 	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,

diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss
@@ -63,7 +63,7 @@
 	clear: both;
 
 	.edit-post-meta-boxes-area {
-		max-width: $visual-editor-max-width;
+		max-width: $content-width;
 		margin: auto;
 	}
 }

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -27,33 +27,36 @@
 .edit-post-visual-editor .editor-writing-flow__click-redirect {
 	// Collapse to minimum height of 50px, to fully occupy editor bottom pad.
 	height: 50px;
-	width: $visual-editor-max-width;
+	width: $content-width;
 	// Offset for: Visual editor padding, block (default appender) margin.
 	margin: #{ -1 * $block-spacing } auto -50px;
 }
 
 .edit-post-visual-editor .editor-block-list__block {
 	margin-left: auto;
 	margin-right: auto;
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	max-width: $content-width;
+
+	@include break-small() {
+		.editor-block-list__block-edit {
+			margin-left: -$block-side-ui-padding;
+			margin-right: -$block-side-ui-padding;
+		}
+
+		&[data-align="full"] .editor-block-contextual-toolbar,
+		&[data-align="wide"] .editor-block-contextual-toolbar {
+			max-width: $content-width + 2;	// 1px border left and right
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
 
 	&[data-align="wide"] {
 		max-width: 1100px;
 	}
 
 	&[data-align="full"] {
-		max-width: 100%;
-	}
-
-	&[data-align="full"],
-	&[data-align="wide"] {
-		.editor-block-contextual-toolbar {
-			@include break-small() {
-				width: $visual-editor-max-width + 2;	// 1px border left and right
-			}
-			margin-left: auto;
-			margin-right: auto;
-		}
+		max-width: none;
 	}
 }
 
@@ -73,26 +76,26 @@
 .edit-post-visual-editor .editor-post-title {
 	margin-left: auto;
 	margin-right: auto;
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	max-width: $content-width + ( 2 * $block-side-ui-padding );
 
 	.editor-post-permalink {
 		left: $block-padding;
 		right: $block-padding;
 	}
 
 	@include break-small() {
-		padding: 5px #{ $block-mover-padding-visible - 1px };	// subtract 1px border, because this is an outline
+		padding: 5px #{ $block-side-ui-padding - 1px };	// subtract 1px border, because this is an outline
 
 		.editor-post-permalink {
-			left: $block-mover-padding-visible;
-			right: $block-mover-padding-visible;
+			left: $block-side-ui-padding;
+			right: $block-side-ui-padding;
 		}
 	}
 }
 
 .edit-post-visual-editor .editor-default-block-appender {
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	clear: left;
+	// Default to centered and content-width, like blocks
+	max-width: $content-width;
 	margin-left: auto;
 	margin-right: auto;
 	position: relative;
@@ -104,19 +107,13 @@
 	}
 
 	@include break-small() {
-		padding: 0 $block-mover-padding-visible;	// don't subtract 1px border because it's a border not an outline
-
-		.components-drop-zone {
-			left: $block-mover-padding-visible;
-			right: $block-mover-padding-visible;
-		}
-
 		.editor-default-block-appender__content {
 			padding: 0 $block-padding;
 		}
 	}
 }
 
 .edit-post-visual-editor .editor-block-list__layout > .editor-block-list__insertion-point {
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	max-width: $content-width;
+	position: relative;
 }