Merge pull request #2550 from Automattic/fix/seedlet-galleries-alignment

Seedlet: fix alignment for galleries

seedlet/assets/css/style-editor.css

@@ -233,14 +233,12 @@
 	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
 	--responsive--alignfull-width: 100%;
 	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
-	--responsive--alignright-margin: var(--global--spacing-horizontal);
-	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+	--responsive--alignrightleft-width: var(--global--spacing-horizontal);
 }
 
 @media only screen and (min-width: 482px) {
 	:root {
-		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
-		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignrightleft-width: calc( 50% - ( 0.5 * (100vw - var(--responsive--aligndefault-width))) );
 	}
 }
 

seedlet/assets/css/style-woocommerce-rtl.css

@@ -13,14 +13,12 @@
 	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
 	--responsive--alignfull-width: 100%;
 	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
-	--responsive--alignright-margin: var(--global--spacing-horizontal);
-	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+	--responsive--alignrightleft-width: var(--global--spacing-horizontal);
 }
 
 @media only screen and (min-width: 482px) {
 	:root {
-		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
-		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignrightleft-width: calc( 50% - ( 0.5 * (100vw - var(--responsive--aligndefault-width))) );
 	}
 }
 

seedlet/assets/css/style-woocommerce.css

@@ -13,14 +13,12 @@
 	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
 	--responsive--alignfull-width: 100%;
 	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
-	--responsive--alignright-margin: var(--global--spacing-horizontal);
-	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+	--responsive--alignrightleft-width: var(--global--spacing-horizontal);
 }
 
 @media only screen and (min-width: 482px) {
 	:root {
-		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
-		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignrightleft-width: calc( 50% - ( 0.5 * (100vw - var(--responsive--aligndefault-width))) );
 	}
 }
 

seedlet/assets/sass/blocks/gallery/_style.scss

@@ -1,8 +1,6 @@
 .wp-block-gallery {
 
-	&:not(.alignfull) {
-		margin: 0 auto;
-	}
+	margin: 0 auto;
 
 	.blocks-gallery-image,
 	.blocks-gallery-item {
@@ -15,9 +13,9 @@
 		}
 	}
 
-	// Apply max-width to floated items that have no intrinsic width.
-	&.alignleft,
-	&.alignright {
-		max-width: 50%;
+	&.alignfull {
+		.blocks-gallery-grid {
+			width: 100%;
+		}
 	}
 }

seedlet/assets/sass/blocks/utilities/_style.scss

@@ -14,20 +14,34 @@
 .alignleft {
 	/*rtl:ignore*/
 	text-align: left;
-	/*rtl:ignore*/
-	float: left;
 	margin-top: 0;
-	/*rtl:ignore*/
-	margin-right: var(--global--spacing-horizontal);
-	margin-bottom: var(--global--spacing-vertical);
 }
 
 // Targeting the .entry-content class is necessary to ensure these styles
 // only apply when the block isn't nested.
 .entry-content > .alignleft {
 	max-width: var(--responsive--aligndefault-width);
-	@extend %responsive-alignleft-mobile;
-	@extend %responsive-alignleft;
+}
+
+@include media(mobile) {
+
+	.alignleft {
+
+		/*rtl:ignore*/
+		float: left;
+
+		/*rtl:ignore*/
+		margin-right: var(--global--spacing-horizontal);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+
+	.entry-content > .alignleft {
+		max-width: var(--responsive--alignrightleft-width);
+		/*rtl:ignore*/
+		margin-left:  calc( 50% - var(--responsive--alignrightleft-width));
+		/*rtl:ignore*/
+		margin-right: var(--global--spacing-horizontal);
+	}
 }
 
 /**
@@ -46,20 +60,34 @@
  * .alignright
  */
 .alignright {
-	/*rtl:ignore*/
-	float: right;
 	margin-top: 0;
 	margin-bottom: var(--global--spacing-vertical);
-	/*rtl:ignore*/
-	margin-left: var(--global--spacing-horizontal);
 }
 
 // Targeting the .entry-content class is necessary to ensure these styles
 // only apply when the block isn't nested.
 .entry-content > .alignright {
 	max-width: var(--responsive--aligndefault-width);
-	@extend %responsive-alignright-mobile;
-	@extend %responsive-alignright;
+}
+
+@include media(mobile) {
+
+	.alignright {
+
+		/*rtl:ignore*/
+		float: right;
+
+		/*rtl:ignore*/
+		margin-left: var(--global--spacing-horizontal);
+	}
+
+	.entry-content > .alignright {
+		max-width: var(--responsive--alignrightleft-width);
+		/*rtl:ignore*/
+		margin-left: var(--global--spacing-horizontal);
+		/*rtl:ignore*/
+		margin-right: calc( 50% - var(--responsive--alignrightleft-width));
+	}
 }
 
 // Make sure siblings of floated elements are top-aligned when nested

seedlet/assets/sass/structure/_responsive-logic.scss

@@ -13,14 +13,12 @@
 	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
 	--responsive--alignfull-width: 100%;
 	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
-	--responsive--alignright-margin: var(--global--spacing-horizontal);
-	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+	--responsive--alignrightleft-width: var(--global--spacing-horizontal);
 }
 
 @include media(mobile) {
 	:root {
-		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
-		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignrightleft-width: calc( 50% - ( 0.5 * (100vw - var(--responsive--aligndefault-width))) ); //calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}
 }
 
@@ -69,39 +67,6 @@
 	max-width: var(--responsive--alignfull-width);
 }
 
-%responsive-alignleft-mobile {
-	/*rtl:ignore*/
-	margin-left: 0;
-	/*rtl:ignore*/
-	margin-right: var(--responsive--spacing-horizontal);
-}
-
-@include media(mobile) {
-	%responsive-alignleft {
-		/*rtl:ignore*/
-		margin-left: var(--responsive--alignleft-margin);
-		/*rtl:ignore*/
-		margin-right: var(--global--spacing-horizontal);
-	}
-}
-
-%responsive-alignright-mobile {
-	/*rtl:ignore*/
-	margin-left: var(--responsive--spacing-horizontal);
-	/*rtl:ignore*/
-	margin-right: 0;
-}
-
-@include media(mobile) {
-	%responsive-alignright {
-		/*rtl:ignore*/
-		margin-left: var(--global--spacing-horizontal);
-		/*rtl:ignore*/
-		margin-right: var(--responsive--alignright-margin);
-	}
-}
-
-
 /**
  * Output
  */

seedlet/style-rtl.css

@@ -310,14 +310,12 @@ Included in theme screenshot and in block patterns.
 	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
 	--responsive--alignfull-width: 100%;
 	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
-	--responsive--alignright-margin: var(--global--spacing-horizontal);
-	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+	--responsive--alignrightleft-width: var(--global--spacing-horizontal);
 }
 
 @media only screen and (min-width: 482px) {
 	:root {
-		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
-		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignrightleft-width: calc( 50% - ( 0.5 * (100vw - var(--responsive--aligndefault-width))) );
 	}
 }
 
@@ -360,30 +358,6 @@ Included in theme screenshot and in block patterns.
 	max-width: var(--responsive--alignfull-width);
 }
 
-.entry-content > .alignleft {
-	margin-left: 0;
-	margin-right: var(--responsive--spacing-horizontal);
-}
-
-@media only screen and (min-width: 482px) {
-	.entry-content > .alignleft {
-		margin-left: var(--responsive--alignleft-margin);
-		margin-right: var(--global--spacing-horizontal);
-	}
-}
-
-.entry-content > .alignright {
-	margin-left: var(--responsive--spacing-horizontal);
-	margin-right: 0;
-}
-
-@media only screen and (min-width: 482px) {
-	.entry-content > .alignright {
-		margin-left: var(--global--spacing-horizontal);
-		margin-right: var(--responsive--alignright-margin);
-	}
-}
-
 /**
  * Output
  */
@@ -1496,7 +1470,7 @@ object {
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
-.wp-block-gallery:not(.alignfull) {
+.wp-block-gallery {
 	margin: 0 auto;
 }
 
@@ -1507,8 +1481,8 @@ object {
 	font: var(--global--font-size-sm);
 }
 
-.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
-	max-width: 50%;
+.wp-block-gallery.alignfull .blocks-gallery-grid {
+	width: 100%;
 }
 
 .wp-block-group .wp-block-group__inner-container {
@@ -2380,16 +2354,26 @@ table th,
  */
 .alignleft {
 	text-align: left;
-	float: left;
 	margin-top: 0;
-	margin-right: var(--global--spacing-horizontal);
-	margin-bottom: var(--global--spacing-vertical);
 }
 
 .entry-content > .alignleft {
 	max-width: var(--responsive--aligndefault-width);
 }
 
+@media only screen and (min-width: 482px) {
+	.alignleft {
+		float: left;
+		margin-right: var(--global--spacing-horizontal);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+	.entry-content > .alignleft {
+		max-width: var(--responsive--alignrightleft-width);
+		margin-left: calc( 50% - var(--responsive--alignrightleft-width));
+		margin-right: var(--global--spacing-horizontal);
+	}
+}
+
 /**
  * .aligncenter
  */
@@ -2406,16 +2390,26 @@ table th,
  * .alignright
  */
 .alignright {
-	float: right;
 	margin-top: 0;
 	margin-bottom: var(--global--spacing-vertical);
-	margin-left: var(--global--spacing-horizontal);
 }
 
 .entry-content > .alignright {
 	max-width: var(--responsive--aligndefault-width);
 }
 
+@media only screen and (min-width: 482px) {
+	.alignright {
+		float: right;
+		margin-left: var(--global--spacing-horizontal);
+	}
+	.entry-content > .alignright {
+		max-width: var(--responsive--alignrightleft-width);
+		margin-left: var(--global--spacing-horizontal);
+		margin-right: calc( 50% - var(--responsive--alignrightleft-width));
+	}
+}
+
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 	margin-top: 0;

seedlet/style.css

@@ -310,14 +310,12 @@ Included in theme screenshot and in block patterns.
 	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
 	--responsive--alignfull-width: 100%;
 	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
-	--responsive--alignright-margin: var(--global--spacing-horizontal);
-	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+	--responsive--alignrightleft-width: var(--global--spacing-horizontal);
 }
 
 @media only screen and (min-width: 482px) {
 	:root {
-		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
-		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignrightleft-width: calc( 50% - ( 0.5 * (100vw - var(--responsive--aligndefault-width))) );
 	}
 }
 
@@ -360,38 +358,6 @@ Included in theme screenshot and in block patterns.
 	max-width: var(--responsive--alignfull-width);
 }
 
-.entry-content > .alignleft {
-	/*rtl:ignore*/
-	margin-left: 0;
-	/*rtl:ignore*/
-	margin-right: var(--responsive--spacing-horizontal);
-}
-
-@media only screen and (min-width: 482px) {
-	.entry-content > .alignleft {
-		/*rtl:ignore*/
-		margin-left: var(--responsive--alignleft-margin);
-		/*rtl:ignore*/
-		margin-right: var(--global--spacing-horizontal);
-	}
-}
-
-.entry-content > .alignright {
-	/*rtl:ignore*/
-	margin-left: var(--responsive--spacing-horizontal);
-	/*rtl:ignore*/
-	margin-right: 0;
-}
-
-@media only screen and (min-width: 482px) {
-	.entry-content > .alignright {
-		/*rtl:ignore*/
-		margin-left: var(--global--spacing-horizontal);
-		/*rtl:ignore*/
-		margin-right: var(--responsive--alignright-margin);
-	}
-}
-
 /**
  * Output
  */
@@ -1504,7 +1470,7 @@ object {
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
-.wp-block-gallery:not(.alignfull) {
+.wp-block-gallery {
 	margin: 0 auto;
 }
 
@@ -1515,8 +1481,8 @@ object {
 	font: var(--global--font-size-sm);
 }
 
-.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
-	max-width: 50%;
+.wp-block-gallery.alignfull .blocks-gallery-grid {
+	width: 100%;
 }
 
 .wp-block-group .wp-block-group__inner-container {
@@ -2389,18 +2355,30 @@ table th,
 .alignleft {
 	/*rtl:ignore*/
 	text-align: left;
-	/*rtl:ignore*/
-	float: left;
 	margin-top: 0;
-	/*rtl:ignore*/
-	margin-right: var(--global--spacing-horizontal);
-	margin-bottom: var(--global--spacing-vertical);
 }
 
 .entry-content > .alignleft {
 	max-width: var(--responsive--aligndefault-width);
 }
 
+@media only screen and (min-width: 482px) {
+	.alignleft {
+		/*rtl:ignore*/
+		float: left;
+		/*rtl:ignore*/
+		margin-right: var(--global--spacing-horizontal);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+	.entry-content > .alignleft {
+		max-width: var(--responsive--alignrightleft-width);
+		/*rtl:ignore*/
+		margin-left: calc( 50% - var(--responsive--alignrightleft-width));
+		/*rtl:ignore*/
+		margin-right: var(--global--spacing-horizontal);
+	}
+}
+
 /**
  * .aligncenter
  */
@@ -2417,18 +2395,30 @@ table th,
  * .alignright
  */
 .alignright {
-	/*rtl:ignore*/
-	float: right;
 	margin-top: 0;
 	margin-bottom: var(--global--spacing-vertical);
-	/*rtl:ignore*/
-	margin-left: var(--global--spacing-horizontal);
 }
 
 .entry-content > .alignright {
 	max-width: var(--responsive--aligndefault-width);
 }
 
+@media only screen and (min-width: 482px) {
+	.alignright {
+		/*rtl:ignore*/
+		float: right;
+		/*rtl:ignore*/
+		margin-left: var(--global--spacing-horizontal);
+	}
+	.entry-content > .alignright {
+		max-width: var(--responsive--alignrightleft-width);
+		/*rtl:ignore*/
+		margin-left: var(--global--spacing-horizontal);
+		/*rtl:ignore*/
+		margin-right: calc( 50% - var(--responsive--alignrightleft-width));
+	}
+}
+
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 	margin-top: 0;