Use margin calculation for full bleed image offsets

WordPress · Apr 28, 2017 · a2d8372 · a2d8372
1 parent 9e5ad31
commit a2d8372
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 14 deletions.
diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
@@ -17,12 +17,58 @@
 	}
 
 	&[data-align="wide"] {
-		left: 0;
+		// 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;
-		width: 100%;
 		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 } );
+				}
+			}
+		}
+
 		&:before {
 			left: 0;
 			border-left-width: 0;

diff --git a/editor/layout/style.scss b/editor/layout/style.scss
@@ -1,3 +1,7 @@
-.editor-layout.is-sidebar-opened .editor-layout__content {
-	margin-right: $sidebar-width;
+.editor-layout__content {
+	overflow: hidden;
+
+	.editor-layout.is-sidebar-opened & {
+		margin-right: $sidebar-width;
+	}
 }
diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
@@ -16,9 +16,7 @@ function VisualEditor( { blocks } ) {
 			{ blocks.map( ( uid ) => (
 				<VisualEditorBlock key={ uid } uid={ uid } />
 			) ) }
-			<div className="editor-visual-editor__container">
-				<Inserter />
-			</div>
+			<Inserter />
 		</div>
 	);
 }

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -1,5 +1,6 @@
 .editor-visual-editor {
-	margin-top: 60px;
+	margin: 60px auto 0;
+	max-width: 700px;
 
 	&,
 	& p {
@@ -9,12 +10,6 @@
 	}
 }
 
-.editor-visual-editor__block,
-.editor-visual-editor__container {
-	max-width: 700px;
-	margin: 0 auto;
-}
-
 .editor-visual-editor__block {
 	position: relative;
 	left: -35px;