Fix regressions with horizontal scrollbar for wide and fullwide

This also positions the toolbar a little bit more accurately when wide and fullwide.
WordPress · Jun 13, 2018 · 0b65869 · 0b65869
1 parent 0f981f7
commit 0b65869
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 29 deletions.
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -50,8 +50,8 @@
 		}
 
 		&[data-align="full"] > .editor-block-contextual-toolbar,
-		&[data-align="wide"] > .editor-block-contextual-toolbar { // don't affect nested block toolbars
-			max-width: $content-width + 2;	// 1px border left and right
+		&[data-align="wide"] > .editor-block-contextual-toolbar { // Don't affect nested block toolbars.
+			max-width: $content-width + $parent-block-padding; // Add 1px border left and right.
 			margin-left: auto;
 			margin-right: auto;
 		}
@@ -69,22 +69,22 @@
 // The base width of the title should match that of blocks even if it isn't a block
 .editor-post-title {
 	@include break-small() {
-		padding-left: $block-side-ui-padding;
-		padding-right: $block-side-ui-padding;
+		padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
 	}
 }
 .edit-post-visual-editor .editor-post-title__block {
 	margin-left: auto;
 	margin-right: auto;
 	max-width: $content-width;
 
-	// stack borders
+	// Stack borders.
 	> div {
-		margin-left: -1px;
-		margin-right: -1px;
+		margin-left: 0;
+		margin-right: 0;
 	}
 
-	// include space for side UI on desktops
+	// Include space for side UI on desktops.
 	@include break-small() {
 		> div {
 			margin-left: -$block-side-ui-width;

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -104,11 +104,11 @@
 }
 
 .editor-block-list__layout {
-	// make room in the main content column for the side UI
-	// the side UI uses negative margins to position itself so as to not affect the block width
+	// Make room in the main content column for the side UI.
+	// The side UI uses negative margins to position itself so as to not affect the block width.
 	@include break-small() {
-		padding-left: $block-side-ui-padding;
-		padding-right: $block-side-ui-padding;
+		padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
+		padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance;
 	}
 
 	// Don't add side padding for nested blocks, and compensate for block padding
@@ -221,14 +221,19 @@
 			transition: outline .1s linear;
 			pointer-events: none;
 
-			// show wider padding for top level blocks
-			right: -$parent-block-padding;
-			left: -$parent-block-padding;
 			top: -$block-padding;
 			bottom: -$block-padding;
+			right: -$block-padding;
+			left: -$block-padding;
+
+			// Show wider padding for top level blocks.
+			@include break-small() {
+				right: -$parent-block-padding;
+				left: -$parent-block-padding;
+			}
 		}
 
-		// show smaller padding for child blocks
+		// Show smaller padding for child blocks.
 		.editor-block-list__block-edit:before {
 			right: -$block-padding;
 			left: -$block-padding;
@@ -346,16 +351,25 @@
 	// Alignments
 	&[data-align="left"],
 	&[data-align="right"] {
-		// Without z-index, won't be clickable as "above" adjacent content
+		// Without z-index, won't be clickable as "above" adjacent content.
 		z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' );
 		width: 100%;
 
-		// When images are floated, the block itself should collapse to zero height
+		// When images are floated, the block itself should collapse to zero height.
 		margin-bottom: 0;
+		height: 0;
 
-		// Hide block outline when an image is floated
-		&:before {
-			content: none;
+		// Hide block outline when an image is floated.
+		.editor-block-list__block-edit {
+
+			&:before {
+				content: none;
+			}
+		}
+
+		// The padding collapses, but the outline is still 1px to compensate for. 
+		.editor-block-contextual-toolbar {
+			margin-bottom: 1px;
 		}
 	}
 
@@ -432,6 +446,7 @@
 		> .editor-block-mover {
 			display: none;
 		}
+
 		@include break-wide() {
 			> .editor-block-mover {
 				display: block;
@@ -455,10 +470,10 @@
 			right: -$border-width;
 		}
 
-		// compensate for main container padding, subtract border
+		// Compensate for main container padding and subtract border.
 		@include break-small() {
-			margin-left: -$block-side-ui-padding + $border-width;
-			margin-right: -$block-side-ui-padding + $border-width;
+			margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
+			margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
 		}
 
 		> .editor-block-list__block-edit {
@@ -470,7 +485,7 @@
 				margin-right: -$block-side-ui-padding - $block-padding;
 			}
 
-			// this explicitly sets the width of the block, to override the fit-content from the image block
+			// This explicitly sets the width of the block, to override the fit-content from the image block.
 			figure {
 				width: 100%;
 			}
@@ -853,7 +868,11 @@
 	z-index: z-index( '.editor-block-list__breadcrumb' );
 
 	// Position in the top right of the border
-	right: -$block-parent-side-ui-clearance;
+	right: -$block-side-ui-clearance;
+
+	@include break-small() {
+		right: -$block-parent-side-ui-clearance;
+	}
 	top: 0;
 
 	// Nested

diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
@@ -74,7 +74,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	right: $item-spacing;	// show on the right on mobile
 
 	@include break-small {
-		left: -$icon-button-size - $block-side-ui-clearance - $block-parent-side-ui-clearance;
+		left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
 		right: auto;
 	}
 
@@ -85,6 +85,10 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	.editor-inserter__toggle {
 		transition: opacity 0.2s;
 		border-radius: 50%;
+		width: $block-side-ui-width;
+		height: $block-side-ui-width;
+		top: 4px;
+		padding: 4px;
 
 		// use opacity to work in various editor styles
 		&:not( :hover ) {

diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
@@ -9,15 +9,30 @@
 	.editor-post-title__input {
 		display: block;
 		width: 100%;
-		padding: #{ $block-padding + 5px } $parent-block-padding;
 		margin: 0;
 		box-shadow: none;
-		border: 1px solid transparent;
 		background: transparent;
 		font-family: $editor-font;
 		line-height: $default-line-height;
 		transition: border .1s ease-out;
 
+		// Show wider parent padding on Desktop breakpoints.
+		padding: #{ $block-padding + 5px } $block-padding;
+
+		@include break-small() {
+			padding: #{ $block-padding + 5px } $parent-block-padding;
+		}
+
+		// Stack borders on mobile.
+		border-top: 1px solid transparent;
+		border-bottom: 1px solid transparent;
+		border-left: 0;
+		border-right: 0;
+
+		@include break-small() {
+			border: 1px solid transparent;
+		}
+
 		// Match h1 heading
 		font-size: 2.441em;
 		font-weight: 600;