Address "wide" alignment programatically (#812)

Implements both "full-wide" and "wide" images. Changes post content to be 100% width to simplify calculations. Also improves responsive handling, sticky toolbars, and floated elements.
WordPress · Jun 8, 2017 · b84397f · b84397f
1 parent e94c30d
commit b84397f
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 111 deletions.
diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss
@@ -1,6 +1,8 @@
 .blocks-embed,
 .blocks-embed-video {
 	margin: 0;
+	clear: both; // necessary because we use responsive trickery to set width/height, and therefore the video doesn't intrinsically clear floats like an img does
+
 	&.is-loading {
 		display: flex;
 		flex-direction: column;
@@ -31,44 +33,3 @@
 	width: 100%;
 	height: 100%;
 }
-
-div[data-type="core/embed"] {
-	&[data-align="left"],
-	&[data-align="right"] {
-		// Without z-index, won't be clickable as "above" adjacent content
-		z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' );
-		width: 370px;
-	}
-
-	&[data-align="left"] {
-		float: left;
-		margin-right: $block-padding;
-	}
-
-	&[data-align="right"] {
-		float: right;
-		margin-left: $block-padding;
-	}
-
-	&[data-align="wide"] {
-		padding-left: 0;
-		padding-right: 0;
-		margin-right: -#{ $block-padding + $block-mover-margin };	/* Compensate for .editor-visual-editor centering padding */
-
-		&:before {
-			left: 0;
-			border-left-width: 0;
-			border-right-width: 0;
-		}
-
-		.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;
-		}
-	}
-}
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -60,16 +60,22 @@ registerBlockType( 'core/image', {
 			onClick: toggleAlignment( 'right' ),
 		},
 		{
-			icon: 'align-full-width',
+			icon: 'align-wide',
 			title: wp.i18n.__( 'Wide width' ),
 			isActive: ( { align } ) => 'wide' === align,
 			onClick: toggleAlignment( 'wide' ),
 		},
+		{
+			icon: 'align-full-width',
+			title: wp.i18n.__( 'Full width' ),
+			isActive: ( { align } ) => 'full' === align,
+			onClick: toggleAlignment( 'full' ),
+		},
 	],
 
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
-		if ( 'left' === align || 'right' === align || 'wide' === align ) {
+		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
 			return { 'data-align': align };
 		}
 	},

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
@@ -1,45 +1,3 @@
-.editor-visual-editor__block[data-type="core/image"] {
-	&[data-align="left"],
-	&[data-align="right"] {
-		// Without z-index, won't be clickable as "above" adjacent content
-		z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' );
-		max-width: 370px;
-	}
-
-	&[data-align="left"] {
-		float: left;
-		margin-right: $block-padding;
-	}
-
-	&[data-align="right"] {
-		float: right;
-		margin-left: $block-padding;
-	}
-
-	&[data-align="wide"] {
-		padding-left: 0;
-		padding-right: 0;
-		margin-right: -#{ $block-padding + $block-mover-margin };	/* Compensate for .editor-visual-editor centering padding */
-
-		&:before {
-			left: 0;
-			border-left-width: 0;
-			border-right-width: 0;
-		}
-
-		.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;
-		}
-
-	}
-}
-
 .blocks-image {
 	margin: 0;
 

diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss
@@ -34,12 +34,13 @@
 	}
 }
 
-// ==========================================================================
-// Long content fade mixin
-//
-// Creates a fading overlay to signify that the content is longer
-// than the space allows.
-// ==========================================================================
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+
 @mixin long-content-fade( $direction: right, $size: 20%, $color: #fff, $edge: 0px, $z-index: false) {
 	content: '';
 	display: block;
@@ -94,3 +95,16 @@
 		height: auto;
 	}
 }
+
+/**
+ * Editor Width mixin
+ *
+ * This mixin seeks to take the vinegar out of the responsive alignments in the editor.
+ */
+
+@mixin editor-width( $width ) {
+	@media ( min-width: #{ ( $width ) } ) {
+		@content;
+	}
+}
+$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } );
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
@@ -65,6 +65,8 @@ $icon-button-size: 36px;
 /* Blocks */
 $block-padding: 14px;
 $block-mover-margin: 18px;
+$block-mover-padding-hidden: 10px;
+$block-mover-padding-visible: 32px;
 
 /* Media Queries */
 

diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss
@@ -1,7 +1,7 @@
 .editor-block-mover {
 	position: absolute;
 	top: 10px;
-	left: 0;
+	left: -$block-mover-padding-visible;
 }
 
 .editor-block-mover__control {

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -1,6 +1,6 @@
 .editor-visual-editor {
 	margin: 0 auto;
-	padding: 50px 10px;	/* Floating up/down arrows invisible */
+	padding: 50px 0;	// Floating up/down arrows invisible
 
 	&,
 	& p {
@@ -10,26 +10,25 @@
 	}
 
 	@include break-small() {
-		padding: 50px 0 50px #{ $block-padding + $block-mover-margin };		/* Floating up/down appear, also compensate for mover */
+		padding: 50px 0;
 	}
 
 	@include break-large() {
-		padding: 60px 0 60px #{ $block-padding + $block-mover-margin };		/* Compensate for mover on the left side */
+		padding: 60px 0;
 	}
 }
 
-/* "Hassle-free full bleed" from CSS Tricks */
-.editor-visual-editor > *:not( [data-align="wide"] ) {
-	max-width: $visual-editor-max-width;
+.editor-visual-editor {
 	margin-left: auto;
 	margin-right: auto;
 }
 
 .editor-visual-editor__block {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: $visual-editor-max-width;
 	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 */
-	margin-right: #{ $block-padding + $block-mover-margin };
+	padding: $block-padding;
 	transition: 0.2s border-color;
 
 	&:before {
@@ -38,7 +37,7 @@
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		left: #{ $block-padding + $block-mover-margin };	/* Compensate for mover */
+		left: 0;
 		right: 0;
 		border: 2px solid transparent;
 		transition: 0.2s border-color;
@@ -78,6 +77,103 @@
 	&.is-selected .iframe-overlay:before {
 		display: none;
 	}
+
+	// Alignments
+	&[data-align="left"],
+	&[data-align="right"] {
+		// Without z-index, won't be clickable as "above" adjacent content
+		z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' );
+		max-width: 370px;
+
+		.editor-block-mover {
+			display: none;
+		}
+	}
+
+	&[data-align="left"] {
+		float: left;
+
+		// mobile, and no sidebars
+		margin-right: $block-padding;
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-left: $float-margin;
+			}
+		}
+
+		// sidebar (sticky)
+		.sticky-menu .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) {
+				margin-left: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width  ) {
+				margin-left: $float-margin;
+			}
+		}
+	}
+
+	&[data-align="right"] {
+		float: right;
+
+		// mobile, and no sidebars
+		margin-right: $block-padding;
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-right: $float-margin;
+			}
+		}
+
+		// sidebar (sticky)
+		.sticky-menu .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) {
+				margin-right: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width  ) {
+				margin-right: $float-margin;
+			}
+		}
+	}
+
+	&[data-align="wide"] {
+		max-width: 1100px;
+	}
+
+	&[data-align="full"] {
+		max-width: 100%;
+		padding-left: 0;
+		padding-right: 0;
+
+		&:before {
+			left: 0;
+			border-left-width: 0;
+			border-right-width: 0;
+		}
+
+		.editor-block-mover {
+			display: none;
+		}
+	}
+
+	&[data-align="full"],
+	&[data-align="wide"] {
+		.editor-visual-editor__block-controls {
+			width: $visual-editor-max-width - $block-padding - $block-padding;
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
 }
 
 .editor-visual-editor__block-controls {
@@ -105,16 +201,12 @@
 	}
 }
 
+$sticky-bottom-offset: 20px;
 .editor-visual-editor__block-controls + div {
-	margin-top: -20px;
-
-	// prevent collapsing margins between the block and the toolbar
-	&:before {
-		content: "";
-		display: table;
-		clear: both;
-	}
-}
+	// prevent collapsing margins between block and toolbar, matches the 20px bottom offset
+ 	margin-top: -$sticky-bottom-offset - 1px;
+	padding-top: 1px;
+ }
 
 .editor-visual-editor__block-controls .components-toolbar {
 	display: inline-flex;

diff --git a/editor/post-title/style.scss b/editor/post-title/style.scss
@@ -1,5 +1,8 @@
 .editor-visual-editor > .editor-post-title:not( [ data-align="wide" ] ),
 .editor-post-title {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: $visual-editor-max-width;
 	position: relative;
 	padding-right: 2 * ( $block-mover-margin + $block-padding );
 	margin-bottom: 10px;