Move blocks and block styles to the correct places in the CSS structure

There should be no visual changes

themes/wporg-5ftf/css/base/_base.scss

@@ -5,4 +5,3 @@
 @import "../../../pub/wporg/css/base/lists";
 @import "../../../pub/wporg/css/base/tables";
 @import "../../../pub/wporg/css/base/typography";
-@import "elements";

themes/wporg-5ftf/css/objects/_image.scss

@@ -1,4 +1,6 @@
-$size__spacing-unit: ms( 4 );	// todo is this globally scoped? if so should move to vars file
+
+// Defined here so we can use `ms`.
+$size__spacing-unit: ms( 4 );
 
 .wp-block-image {
 	// this shouldn't apply to all images, just .alignfull ?
@@ -21,12 +23,3 @@ $size__spacing-unit: ms( 4 );	// todo is this globally scoped? if so should move
 		clear: inherit;
 	}
 }
-
-p.is-style-wporg-tldr {
-	color: $color__text-heading;
-	font-style: italic;
-
-	@include breakpoint( $breakpoint-tablet ) {
-		text-align: center;
-	}
-}

themes/wporg-5ftf/css/objects/_objects.scss

@@ -7,5 +7,5 @@
 @import "../../../pub/wporg/css/objects/links";
 @import "../../../pub/wporg/css/objects/notices";
 @import "buttons";
-@import "parallelogram";
+@import "image";
 @import "site-header";

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

@@ -2,36 +2,6 @@
  * Add content area styles to the editor (in addition to the front end), so that users see content the way it will
  * appear on the front end.
  */
-.wp-block-image {
-  /* Make it fill 100% of the screen */
-  position: relative;
-  left: -ms(4);
-  width: calc( 100% + ( 2 * ms(4) ));
-  max-width: calc( 100% + ( 2 * ms(4) ));
-  clear: both;
-}
-
-@media screen and (min-width: 960px) {
-  .wp-block-image {
-    position: inherit;
-    left: inherit;
-    width: inherit;
-    max-width: inherit;
-    clear: inherit;
-  }
-}
-
-p.is-style-wporg-tldr {
-  color: #606A73;
-  font-style: italic;
-}
-
-@media screen and (min-width: 768px) {
-  p.is-style-wporg-tldr {
-    text-align: center;
-  }
-}
-
 .entry-content {
   position: relative;
   color: #555D66;
@@ -511,6 +481,25 @@ input.download-button.button-hero:active[type="submit"],
   text-decoration: none;
 }
 
+.wp-block-image {
+  /* Make it fill 100% of the screen */
+  position: relative;
+  left: -ms(4);
+  width: calc( 100% + ( 2 * ms(4) ));
+  max-width: calc( 100% + ( 2 * ms(4) ));
+  clear: both;
+}
+
+@media screen and (min-width: 960px) {
+  .wp-block-image {
+    position: inherit;
+    left: inherit;
+    width: inherit;
+    max-width: inherit;
+    clear: inherit;
+  }
+}
+
 .parallelogram-container {
   width: 80%;
   margin-left: 10%;
@@ -573,4 +562,15 @@ input.download-button.button-hero:active[type="submit"],
   }
 }
 
+p.is-style-wporg-tldr {
+  color: #606A73;
+  font-style: italic;
+}
+
+@media screen and (min-width: 768px) {
+  p.is-style-wporg-tldr {
+    text-align: center;
+  }
+}
+
 /*# sourceMappingURL=style-editor.css.map */

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

@@ -8,13 +8,13 @@
 @import "../../pub/wporg/css/settings/structure";
 @import "settings/structure";
 @import "../../pub/wporg/css/tools/breakpoint";
-@import "base/elements";
 @import "components/entry-content";
 @import "components/about";
 @import "../../pub/wporg/css/settings/_modular-scale.scss";
 @import "../../pub/wporg/css/objects/buttons";
 @import "objects/buttons";
-@import "objects/parallelogram";
+@import "objects/image";
+@import "utilities/utilities";
 
 
 

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

@@ -27,3 +27,8 @@
 // 06 Components
 //------------------------------------------------------------*/
 @import "components/components";
+
+//--------------------------------------------------------------
+// 07 Utilities
+//------------------------------------------------------------*/
+@import "utilities/utilities";

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

@@ -0,0 +1,8 @@
+p.is-style-wporg-tldr {
+	color: $color__text-heading;
+	font-style: italic;
+
+	@include breakpoint( $breakpoint-tablet ) {
+		text-align: center;
+	}
+}

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

@@ -0,0 +1,2 @@
+@import "group";
+@import "paragraph";