Merge pull request #660 from WordPress/try/sticky

Try position sticky for undocking toolbars

blocks/library/heading/style.scss

@@ -1,16 +1,11 @@
 .editor-visual-editor__block[data-type="core/heading"] {
-	padding-top: 0;
-	padding-bottom: 0;
-
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
-		// for this block only we change the block padding to reflect margin instead
 		margin: 0;
-		padding: .5em 0;
 	}
 
 	h1 {

blocks/library/image/style.scss

@@ -17,57 +17,9 @@
 	}
 
 	&[data-align="wide"] {
-		// Here be dragons...
-		//
-		// Variable offsets:
-		//  - Left sidebar
-		//   - Hidden at small viewports
-		//   - Foldable
-		//   - Expanded at medium and above
-		//  - Post settings
-		//   - Collapsed
-		//   - Expanded
-
-		left: 50%;
-		right: 50%;
-		margin-left: -50vw;
-		margin-right: -50vw;
-		width: 100vw;
 		padding-left: 0;
 		padding-right: 0;
-		max-width: none;
-
-		.editor-layout.is-sidebar-opened & {
-			margin-left: calc( -50vw + #{ $sidebar-width / 2 } );
-			margin-right: calc( -50vw + #{ $sidebar-width / 2 } );
-			width: calc( 100vw - #{ $sidebar-width } );
-		}
-
-		@include break-medium() {
-			margin-left: calc( -50vw + 80px );
-			margin-right: calc( -50vw + 80px );
-			width: calc( 100vw - 160px );
-
-			.auto-fold &,
-			.folded & {
-				margin-left: calc( -50vw + 18px );
-				margin-right: calc( -50vw + 18px );
-				width: calc( 100vw - 36px );
-			}
-
-			.editor-layout.is-sidebar-opened & {
-				margin-left: calc( -50vw + 80px + #{ $sidebar-width / 2 } );
-				margin-right: calc( -50vw + 80px + #{ $sidebar-width / 2 } );
-				width: calc( 100vw - 160px - #{ $sidebar-width } );
-
-				.auto-fold &,
-				.folded & {
-					margin-left: calc( -50vw + 18px + #{ $sidebar-width / 2 } );
-					margin-right: calc( -50vw + 18px + #{ $sidebar-width / 2 } );
-					width: calc( 100vw - 36px - #{ $sidebar-width } );
-				}
-			}
-		}
+		margin-right: -#{ $block-padding + $block-mover-margin };	/* Compensate for .editor-visual-editor centering padding */
 
 		&:before {
 			left: 0;
@@ -78,6 +30,13 @@
 		.editor-block-mover {
 			display: none;
 		}
+
+		.editor-visual-editor__block-controls {
+			max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) };
+			margin-left: auto;
+			margin-right: auto;
+		}
+
 	}
 }
 

editor/assets/stylesheets/_variables.scss

@@ -49,6 +49,10 @@ $admin-sidebar-width-collapsed: 36px;
 $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
 $text-editor-max-width: 760px;
 
+/* Editor */
+$text-editor-max-width: 760px;
+$visual-editor-max-width: 700px;
+
 /* Blocks */
 $block-padding: 14px;
 $block-mover-margin: 18px;
@@ -88,7 +92,7 @@ Let's try and use as few of these as possible, and be mindful about adding new o
 
 $break-huge: 1440px;
 $break-wide: 1280px;
-$break-large: 960px;
-$break-medium: 782px;
+$break-large: 960px;	// admin sidebar auto folds
+$break-medium: 782px;	// adminbar goes big
 $break-small: 600px;
 $break-mobile: 480px;

editor/header/style.scss

@@ -6,7 +6,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	z-index: 1;
+	z-index: 2;
 	top: $admin-bar-height-big;
 	left: 0;
 	right: 0;

editor/layout/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import './style.scss';
 import Header from '../header';
 import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';

editor/modes/text-editor/style.scss

@@ -101,7 +101,10 @@
 	&:focus {
 		box-shadow: none;
 	}
+}
 
+/* Use padding to center text in the textarea, this allows you to click anywhere to focus it */
+.editor-text-editor {
 	padding-left: 20px;
 	padding-right: 20px;
 

editor/modes/visual-editor/style.scss

@@ -1,6 +1,5 @@
 .editor-visual-editor {
 	margin: 0 auto;
-	max-width: 700px;
 	padding: 50px 10px;	/* Floating up/down arrows invisible */
 
 	&,
@@ -11,18 +10,26 @@
 	}
 
 	@include break-small() {
-		padding: 50px 40px;	/* Floating up/down appear */
+		padding: 50px 0 50px #{ $block-padding + $block-mover-margin };		/* Floating up/down appear, also compensate for mover */
 	}
 
 	@include break-large() {
-		padding: 60px 30px;
+		padding: 60px 0 60px #{ $block-padding + $block-mover-margin };		/* Compensate for mover on the left side */
 	}
 }
 
+/* "Hassle-free full bleed" from CSS Tricks */
+.editor-visual-editor > *:not( [data-align="wide"] ) {
+	max-width: $visual-editor-max-width;
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .editor-visual-editor__block {
 	position: relative;
-	left: -#{ $block-padding + $block-mover-margin };	// make room for the mover
-	padding: $block-padding $block-padding $block-padding #{ $block-padding * 2 + $block-mover-margin };	// compensate for mover
+	left: -#{ $block-padding + $block-mover-margin };	/* Make room for the mover */
+	padding: $block-padding $block-padding  $block-padding #{ $block-padding * 2 + $block-mover-margin };	/* Compensate for mover */
+	margin-right: #{ $block-padding + $block-mover-margin };
 	transition: 0.2s border-color;
 
 	&:before {
@@ -31,7 +38,7 @@
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		left: #{ $block-padding + $block-mover-margin };	// compensate for mover
+		left: #{ $block-padding + $block-mover-margin };	/* Compensate for mover */
 		right: 0;
 		border: 2px solid transparent;
 		transition: 0.2s border-color;
@@ -66,23 +73,39 @@
 
 .editor-visual-editor__block-controls {
 	@include animate_fade;
-	position: absolute;
-	bottom: 100%;
-	margin-bottom: -4px;
-	left: #{ $block-padding * 2 + $block-mover-margin };	// compensate for mover, and indent same as padding
 	display: flex;
+	position: sticky;
 	z-index: 1;
+	margin-top: -46px - $item-spacing;		// 46 is toolbar height
+	margin-bottom: $item-spacing + 20px;	// 20px is the offset from the bottom of the selected block where it stops sticking
+
+	top: $header-height + $admin-bar-height-big + $item-spacing;
+
+	@include break-medium() {
+		top: $header-height + $admin-bar-height + $item-spacing;
+	}
+}
+
+.editor-visual-editor__block-controls + div {
+	margin-top: -20px;
+
+	// prevent collapsing margins between the block and the toolbar
+	&:before {
+		content: "";
+		display: table;
+		clear: both;
+	}
 }
 
 .editor-visual-editor__block-controls .components-toolbar {
 	display: inline-flex;
-	margin-right: 10px;
+	margin-right: $item-spacing;
 }
 
 .editor-visual-editor__block-controls .editor-block-switcher {
 	display: inline-flex;
 }
 
 .editor-visual-editor .editor-inserter {
-	margin: $item-spacing;
+	margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } );	// account for full-width trick
 }