Blank Canvas Blocks: Add alignment rules (#3429)

* Add alignment rules for Blank Canvas Blocks

* Adjusted configured with to match original BC theme

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -117,16 +117,35 @@ body {
 	text-align: center;
 }
 
-.wp-site-blocks .alignleft {
-	float: left;
-	margin-right: 2em;
-	max-width: 360px;
-}
-
-.wp-site-blocks .alignright {
-	float: right;
-	margin-left: 2em;
-	max-width: 360px;
+@media only screen and (min-width: 482px) {
+	.wp-site-blocks .alignleft,
+	.wp-site-blocks .alignright {
+		--content-width: min( 100vw - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
+		--alignment-margin: calc( ( 100vw - var(--content-width ) ) / 2 - var(--wp--custom--margin--horizontal) );
+		max-width: var(--wp--custom--width--default);
+	}
+}
+
+@media only screen and (min-width: 482px) {
+	.wp-site-blocks .alignleft {
+		/*rtl:ignore*/
+		float: left;
+		/*rtl:ignore*/
+		margin-left: var(--alignment-margin);
+		/*rtl:ignore*/
+		margin-right: var(--wp--custom--margin--horizontal);
+	}
+}
+
+@media only screen and (min-width: 482px) {
+	.wp-site-blocks .alignright {
+		/*rtl:ignore*/
+		float: right;
+		/*rtl:ignore*/
+		margin-left: var(--wp--custom--margin--horizontal);
+		/*rtl:ignore*/
+		margin-right: var(--alignment-margin);
+	}
 }
 
 ::selection {
@@ -244,6 +263,10 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: var(--wp--preset--font-family--headings);
 }
 
+h1, h2, h3, h4, h5, h6 {
+	clear: both;
+}
+
 p.has-background {
 	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
 }

blank-canvas-blocks/experimental-theme.json

@@ -144,8 +144,8 @@
 					"vertical": "20px"
 				},
 				"width": {
-					"default": "750px",
-					"wide": "1200px"
+					"default": "620px",
+					"wide": "1000px"
 				},
 				"button": {
 					"font-weight": "600",

blank-canvas-blocks/sass/base/_alignment.scss

@@ -64,16 +64,41 @@ body {
 	text-align: center;
 }
 
+// Align Left and Right
+@include media(mobile) {
+	.wp-site-blocks .alignleft,
+	.wp-site-blocks .alignright {
+		// Content width is the lesser of the viewport width (subtracting margins)
+		// or the default site width.
+		// This variable is only used for this element.
+		--content-width: min( 100vw - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
+		// The alignment margin is the viewport, subtract the content and divide by two
+		// Then subtract the block padding
+		--alignment-margin: calc( ( 100vw - var(--content-width ) ) / 2 - var(--wp--custom--margin--horizontal) );
+		max-width: var(--wp--custom--width--default);
+	}
+}
+
 // Align Left
-.wp-site-blocks .alignleft {
-	float: left;
-	margin-right: 2em;
-	max-width: 360px;
+@include media(mobile) {
+	.wp-site-blocks .alignleft {
+		/*rtl:ignore*/
+		float: left;
+		/*rtl:ignore*/
+		margin-left: var(--alignment-margin);
+		/*rtl:ignore*/
+		margin-right: var(--wp--custom--margin--horizontal);
+	}
 }
 
 // Align Right
-.wp-site-blocks .alignright {
-	float: right;
-	margin-left: 2em;
-	max-width: 360px;
+@include media(mobile) {
+	.wp-site-blocks .alignright {
+		/*rtl:ignore*/
+		float: right;
+		/*rtl:ignore*/
+		margin-left: var(--wp--custom--margin--horizontal);
+		/*rtl:ignore*/
+		margin-right: var(--alignment-margin);
+	}
 }

blank-canvas-blocks/sass/blocks/_style.scss

@@ -1,4 +1,5 @@
+@import "heading/style";
 @import "paragraph/style";
 @import "navigation/style";
 @import "quote/style";
-@import "group/style";
+@import "group/style";

blank-canvas-blocks/sass/blocks/heading/_style.scss

@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+	clear: both;
+}