Assign grid areas to diffrent alignment combinations.

WordPress · Apr 3, 2018 · f211200 · f211200
1 parent 48028f7
commit f211200
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 52 deletions.
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -6,12 +6,15 @@
 	grid-template-columns:
 	  [full-start] minmax(1em, 1fr)
 	  [wide-start] minmax(0, 1fr)
-	  [content-start] minmax(0, 700px) [content-end]
+	  [content-start] minmax(0, 350px) [middle] minmax(0, 350px) [content-end]
 	  minmax(0, 1fr) [wide-end]
 	  minmax(1em, 1fr) [full-end];
 
-	> div,
-	> div > .block-list {
+	.editor-writing-flow,
+	.editor-writing-flow > div,
+	.editor-writing-flow > div > div,
+	.editor-writing-flow > div > div > div,
+	.editor-writing-flow .editor-block-list__layout {
 		grid-column: full;
 		display: inherit;
 		grid-template-columns: inherit;
@@ -70,6 +73,26 @@
 		}
 	}
 
+	&[data-align="card"] {
+		grid-column: wide-start / middle;
+
+
+		+ div {
+			grid-column: middle / wide-end;
+			align-self: center;
+		}
+	}
+
+	&[data-align="left"] {
+		grid-column: wide-start / content-start;
+		height: 0;
+	}
+
+	&[data-align="right"] {
+		grid-column: content-end / wide-end;
+		height: 0;
+	}
+
 	&[data-align="wide"] {
 		// max-width: 1100px;
 		grid-column: wide;

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -259,55 +259,55 @@
 	 * Alignments
 	 */
 
-	&[data-align="left"],
-	&[data-align="right"] {
-		// 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
-		margin-bottom: 0;
-
-		// Hide block outline when an image is floated
-		&:before {
-			content: none;
-		}
-	}
-
-	// Apply max-width to floated items that have no intrinsic width, like Cover Image or Gallery
-	&[data-align="left"],
-	&[data-align="right"] {
-		> .editor-block-list__block-edit {
-			max-width: 360px;
-			width: 100%;
-		}
-
-		// reset when data-resized
-		&[data-resized="true"] > .editor-block-list__block-edit {
-			max-width: none;
-			width: auto;
-		}
-	}
-
-	// Left
-	&[data-align="left"] {
-		.editor-block-list__block-edit {	// This is in the editor only, on the frontend, the img should be floated
-			float: left;
-			margin-right: 2em;
-		}
-	}
-
-	// Right
-	&[data-align="right"] {
-		.editor-block-list__block-edit {	// This is in the editor only, on the frontend, the img should be floated
-			float: right;
-			margin-left: 2em;
-		}
-
-		.editor-block-toolbar {
-			float: right;
-		}
-	}
+	// &[data-align="left"],
+	// &[data-align="right"] {
+	// 	// 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
+	// 	margin-bottom: 0;
+	//
+	// 	// Hide block outline when an image is floated
+	// 	&:before {
+	// 		content: none;
+	// 	}
+	// }
+	//
+	// // Apply max-width to floated items that have no intrinsic width, like Cover Image or Gallery
+	// &[data-align="left"],
+	// &[data-align="right"] {
+	// 	> .editor-block-list__block-edit {
+	// 		max-width: 360px;
+	// 		width: 100%;
+	// 	}
+	//
+	// 	// reset when data-resized
+	// 	&[data-resized="true"] > .editor-block-list__block-edit {
+	// 		max-width: none;
+	// 		width: auto;
+	// 	}
+	// }
+	//
+	// // Left
+	// &[data-align="left"] {
+	// 	.editor-block-list__block-edit {	// This is in the editor only, on the frontend, the img should be floated
+	// 		float: left;
+	// 		margin-right: 2em;
+	// 	}
+	// }
+	//
+	// // Right
+	// &[data-align="right"] {
+	// 	.editor-block-list__block-edit {	// This is in the editor only, on the frontend, the img should be floated
+	// 		float: right;
+	// 		margin-left: 2em;
+	// 	}
+	//
+	// 	.editor-block-toolbar {
+	// 		float: right;
+	// 	}
+	// }
 
 	// Wide and full-wide
 	&[data-align="full"],