Limit content width for things aligned left/right (#3504)

* Limit content width for things aligned left/right

Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -100,6 +100,23 @@ img {
 	margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
 }
 
+@media only screen and (min-width: 482px) {
+	.wp-block[data-align="left"],
+	.wp-block[data-align="right"],
+	.wp-site-blocks .alignleft,
+	.wp-site-blocks .alignright {
+		max-width: var(--wp--custom--alignment--aligned-max-width);
+	}
+}
+
+.wp-block-group:after {
+	clear: both;
+	content: ".";
+	display: block;
+	position: unset;
+	visibility: hidden;
+}
+
 ::selection {
 	background-color: var(--wp--custom--color--selection);
 }

blank-canvas-blocks/experimental-theme.json

@@ -101,6 +101,9 @@
 					"horizontal": "20px",
 					"vertical": "20px"
 				},
+				"alignment": {
+					"alignedMaxWidth": "50%"
+				},
 				"button": {
 					"typography": {
 						"fontWeight": "normal",

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

@@ -3,3 +3,23 @@
 	margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
 }
 
+@include media(mobile) {
+	// limit size of any element that is aligned left/right 
+	.wp-block[data-align="left"], // This is for the editor
+	.wp-block[data-align="right"], // This is for the editor
+	.wp-site-blocks .alignleft,
+	.wp-site-blocks .alignright {
+		max-width: var(--wp--custom--alignment--aligned-max-width);
+	}
+}
+
+// When content is aligned left/right (particularly inside of a container) it is floated left/right
+// and needs something to ensure that the content follows the block rather than nestling up beside the floated element.  
+// The issue should be resolved upstream: https://github.com/WordPress/gutenberg/issues/10299
+.wp-block-group:after { 
+	clear: both;
+	content: ".";
+	display: block;
+	position: unset;
+	visibility: hidden;
+}