Use columns block for the parallelogram style (#16)

This avoids the complex mutliply-nested blocks and makes the block style less reliant on a custom class. On mid-sized screens, we switch to plain horizontally-overlapping rectangles, and on small screens we stack the columns, and vertically-overlap.

Also, remove the parallelogram styles from the editor display. The skew and positioning don't work well in the editor context.

themes/wporg-5ftf/css/settings/_structure.scss

@@ -1,3 +1,11 @@
 $breakpoint-tablet: 768px !default;
 $breakpoint-desktop: 960px !default;
 $breakpoint-desktop-large: 1200px !default;
+
+// From @wordpress/viewport
+$breakpoint-huge: 1440px !default;
+$breakpoint-wide: 1280px !default;
+$breakpoint-large: 960px !default;
+$breakpoint-medium: 782px !default;
+$breakpoint-small: 600px !default;
+$breakpoint-mobile: 480px !default;

themes/wporg-5ftf/css/style-editor.css

@@ -446,52 +446,41 @@ input.download-button.button-hero:active[type="submit"],
   background-color: #FFFFFF;
 }
 
-.parallelogram-container {
+.is-style-wporg-parallelogram .wp-block-column {
-  width: 80%;
+  background: black;
-  margin-left: 10%;
-  margin-right: 10%;
-}
-
-@media screen and (min-width: 768px) {
-  .parallelogram-container > .wp-block-group__inner-container {
-    display: flex;
-  }
-}
-
-.parallelogram-container .wp-block-group__inner-container .is-style-wporg-parallelogram:last-child .wp-block-group__inner-container {
-  /*
-		 * Adjust for the overlapping parralelograms, so that the text in this one appears to be more aligned to
-		 * its container.
-		 */
-  position: relative;
-  left: 10px;
-}
-
-/*
- * Not just doing `@extend .parallelogram` b/c want to split between breakpoints, which that doesn't do.
- */
-.is-style-wporg-parallelogram {
   color: #fff;
-  margin: 0 auto;
+  margin: 0;
   opacity: 0.9;
-  padding: 4.7rem 0;
+  padding: 4.7rem 3rem;
   text-align: center;
+  mix-blend-mode: multiply;
+}
+
+.is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n+1) {
+  background: #1E8CBE;
+}
+
+.is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n) {
+  background: #826EB4;
 }
 
 @media screen and (min-width: 768px) {
-  .is-style-wporg-parallelogram {
+  .is-style-wporg-parallelogram .wp-block-column {
     transform: skew(-15deg);
   }
-  .is-style-wporg-parallelogram:first-child {
+  .is-style-wporg-parallelogram .wp-block-column:first-child {
     position: relative;
     top: 40px;
+    left: 30px;
     z-index: 2;
   }
-  .is-style-wporg-parallelogram:last-child {
+  .is-style-wporg-parallelogram .wp-block-column:last-child {
+    position: relative;
     z-index: 1;
-    padding-left: 40px;
+    right: 30px;
+    padding-left: 4rem;
   }
-  .is-style-wporg-parallelogram:before {
+  .is-style-wporg-parallelogram .wp-block-column:before {
     font-size: ms(12);
     height: 64px;
     position: relative;
@@ -499,12 +488,27 @@ input.download-button.button-hero:active[type="submit"],
     transform: skew(15deg);
     width: 64px;
   }
-  .is-style-wporg-parallelogram > * {
+  .is-style-wporg-parallelogram .wp-block-column > * {
     transform: skew(15deg);
   }
-  .is-style-wporg-parallelogram > .wp-block-group__inner-container {
+}
-    width: 60%;
+
-    margin: 0 auto;
+@media screen and (min-width: 600px) and (max-width: 767px) {
+  .is-style-wporg-parallelogram .wp-block-column {
+    padding: 3rem 2rem;
+    flex-basis: calc(50% + 0.5rem);
+  }
+  .is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) {
+    margin-left: -1rem;
+  }
+}
+
+@media screen and (max-width: 599px) {
+  .is-style-wporg-parallelogram .wp-block-column {
+    padding: 2rem;
+  }
+  .is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) {
+    margin-top: -1rem;
   }
 }
 
@@ -539,4 +543,21 @@ p.is-style-wporg-tldr {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column {
+    transform: skew(0);
+  }
+  .block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column:last-child {
+    position: static;
+    z-index: auto;
+    top: auto;
+    left: auto;
+    right: auto;
+    padding-left: 0;
+  }
+  .block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column > * {
+    transform: skew(0);
+  }
+}
+
 /*# sourceMappingURL=style-editor.css.map */

themes/wporg-5ftf/css/style-editor.scss

@@ -3,7 +3,6 @@
  * appear on the front end.
  */
 
-
 @import "settings/colors";
 @import "../../pub/wporg/css/settings/structure";
 @import "settings/structure";
@@ -15,7 +14,29 @@
 @import "objects/pullquote";
 @import "utilities/utilities";
 
+// Un-parallelogram the columns in the editor– `skew` doesn't play well with the nesting of editor components.
+.block-editor-block-list__block-edit {
+	.is-style-wporg-parallelogram {
+		.wp-block-column {
+			@include breakpoint( $breakpoint-tablet ) {
+				transform: skew(0);
 
+				&:last-child {
+					position: static;
+					z-index: auto;
+					top: auto;
+					left: auto;
+					right: auto;
+					padding-left: 0;
+				}
+
+				> * {
+					transform: skew(0);
+				}
+			}
+		}
+	}
+}
 
 
 // font-family and face, etc?

themes/wporg-5ftf/css/utilities/_columns.scss

@@ -0,0 +1,70 @@
+.is-style-wporg-parallelogram {
+
+	.wp-block-column {
+		background: black;
+		color: #fff;
+		margin: 0;
+		opacity: 0.9;
+		padding: 4.7rem 3rem;
+		text-align: center;
+		mix-blend-mode: multiply;
+
+		&:nth-of-type(2n+1) {
+			background: $color__wporg-blue;
+		}
+
+		&:nth-of-type(2n) {
+			background: $color__wporg-purple;
+		}
+
+		// Applies to 768px and above.
+		@include breakpoint( $breakpoint-tablet ) {
+			transform: skew(-15deg);
+
+			&:first-child {
+				position: relative;
+				top: 40px;
+				left: 30px;
+				z-index: 2;
+			}
+
+			&:last-child {
+				position: relative;
+				z-index: 1;
+				right: 30px;
+				padding-left: 4rem;
+			}
+
+			&:before {
+				font-size: ms(12);
+				height: 64px;
+				position: relative;
+				right: 1rem;
+				transform: skew(15deg);
+				width: 64px;
+			}
+
+			> * {
+				transform: skew(15deg);
+			}
+		}
+
+		@include breakpoint( $breakpoint-small, $breakpoint-tablet - 1 ) {
+			padding: 3rem 2rem;
+			flex-basis: calc(50% + 0.5rem);
+
+			&:nth-of-type( n+2 ) {
+				margin-left: -1rem;
+			}
+		}
+
+		// Applies to 0-599px. The columns wrap at 600px.
+		@include breakpoint( 0, $breakpoint-small - 1 ) {
+			padding: 2rem;
+
+			&:nth-of-type( n+2 ) {
+				margin-top: -1rem;
+			}
+		}
+	}
+}

themes/wporg-5ftf/css/utilities/_group.scss

@@ -1,68 +0,0 @@
-.parallelogram-container {
-	width: 80%;
-	margin-left: 10%;
-	margin-right: 10%;
-
-	> .wp-block-group__inner-container {
-		@include breakpoint($breakpoint-tablet) {
-			display: flex;
-		}
-	}
-
-	.wp-block-group__inner-container .is-style-wporg-parallelogram:last-child .wp-block-group__inner-container {
-		/*
-		 * Adjust for the overlapping parralelograms, so that the text in this one appears to be more aligned to
-		 * its container.
-		 */
-		position: relative;
-		left: 10px;
-	}
-}
-
-/*
- * Not just doing `@extend .parallelogram` b/c want to split between breakpoints, which that doesn't do.
- */
-.is-style-wporg-parallelogram {
-	color: #fff;
-	margin: 0 auto;
-	opacity: 0.9;
-	padding: 4.7rem 0;
-	text-align: center;
-
-	// probably need to remove that negative margin from the has-background block? it's shouldn't apply here really, so need to rethink why have it and best way to address that
-	// or maybe just refine how it's implemented, like making sure that have padding to replace margin, and no position:relative crap
-
-	@include breakpoint( $breakpoint-tablet ) {
-		transform: skew(-15deg);
-
-		&:first-child {
-			position: relative;
-			top: 40px;
-			z-index: 2;
-		}
-
-		&:last-child {
-			z-index: 1;
-			padding-left: 40px;
-			// todo the first and second child aren't overlapping as much as they used to, what changed?
-		}
-
-		&:before {
-			font-size: ms(12);
-			height: 64px;
-			position: relative;
-			right: 1rem;
-			transform: skew(15deg);
-			width: 64px;
-		}
-
-		> * {
-			transform: skew(15deg);
-		}
-
-		> .wp-block-group__inner-container {
-			width: 60%;
-			margin: 0 auto;
-		}
-	}
-}

themes/wporg-5ftf/css/utilities/_utilities.scss

@@ -1,4 +1,4 @@
 @import "colors";
-@import "group";
+@import "columns";
 @import "paragraph";
 @import "pullquote";

themes/wporg-5ftf/functions.php

@@ -62,7 +62,7 @@ function setup() {
 
 	if ( function_exists( 'register_block_style' ) ) {
 		register_block_style(
-			'core/group',
+			'core/columns',
 			array(
 				'name'         => 'wporg-parallelogram',
 				'label'        => __( 'Parallelogram', 'wporg-5ftf' ),