Adjust vars, includes and buttons for back and front compatibility

Todo Block paragraph, PullQuote and Separators !

Author: Cocola

src/scss/abstract/_positioning.scss

@@ -6,7 +6,7 @@ $zindex: 1;
 /**
  * Spacing
  */
-$base-spacing: 20px;
+$base-spacing: 32px;
 $half-base-spacing: $base-spacing / 2;
 
 /**

src/scss/base/_layout.scss

@@ -18,12 +18,4 @@
 	.container {
 		padding: 0;
 	}
-
-	.content {
-		@include span(9);
-	}
-
-	.sidebar {
-		@include span(3 last);
-	}
 }

src/scss/components/_buttons.scss

@@ -6,16 +6,11 @@
 	display: inline-block;
 	vertical-align: middle;
 	padding: 8px 12px;
-	background-color: $maingrey;
 	border: 1px solid transparent;
-	font-family: $customfont-1;
-	color: $textcolor;
+	border-radius: 0;
 	line-height: 1.5;
 	transition: background-color .3s ease;
-
-	@include hover {
-		background-color: darken($maingrey, 10%);
-	}
+	font-family: $customfont-1;
 }
 
 // Sizing
@@ -41,10 +36,11 @@
 
 // Coloring
 @mixin button--colored($backgroundColor, $color) {
-	background-color: $backgroundColor;
 	color: $color;
+	background-color: $backgroundColor;
 
 	@include hover {
+		color: $color;
 		background-color: darken($backgroundColor, 10%);
 	}
 }
@@ -155,6 +151,9 @@
 			@include button--outline($infocolor-2, $infocolor-1);
 		}
 	}
+	&--square {
+		border-radius: 0;
+	}
 	&--round {
 		@include button--round;
 	}

src/scss/editor-style.scss

@@ -1,8 +1,5 @@
-/**
- * Abstract
- */
+// Abstract
 @import "abstract/url-config";
-// Susy 2.2.14
 @import "~susy/sass/susy";
 @import "~normalize-scss/sass/normalize/import-now";
 @import "abstract/positioning";
@@ -12,25 +9,38 @@
 @import "abstract/fonts";
 @import "abstract/box-sizing";
 @import "abstract/breakpoints";
+@import "abstract/grid";
 
-/**
- * Base
- */
+// Base
 @import "base/text";
 
-/**
- * Wordpress
- */
+// Components
+@import "components/buttons";
+
+// Wordpress
 @import "wp/img";
 @import "wp/gallery";
 @import "wp/wysiwyg";
+@import "wp/gutenberg";
 
-/**
- * Backend Classic editor container
- */
+// Backend Classic editor container
 .mce-content-body {
     margin: $base-spacing/2;
-    @include breakpoints(md) {
-        @include container;
+    max-width: container();
+}
+
+// Backend Gutenberg editor container
+.wp-block {
+    &:not([data-align="full"]) {
+        max-width: container();
+    }
+    &[data-align="wide"] {
+        max-width: container()*1.5;
+    }
+}
+
+.editor-post-title__block {
+    .editor-post-title__input {
+        font-family: $customfont-2;
     }
 }

src/scss/style.scss

@@ -27,18 +27,11 @@
 @import "base/layout";
 @import "base/focus";
 
-//Wordpress
-@import "wp/wpforms";
-@import "wp/img";
-@import "wp/gallery";
-@import "wp/wysiwyg";
-
 // Components
 @import "components/buttons";
 @import "components/menu-trigger";
 @import "components/menu-fastaccess";
 @import "components/card";
-@import "components/iframe";
 @import "components/messages";
 
 // Patterns
@@ -48,5 +41,12 @@
 @import "patterns/hero";
 @import "patterns/searchform";
 
+//Wordpress
+@import "wp/wpforms";
+@import "wp/img";
+@import "wp/gallery";
+@import "wp/wysiwyg";
+@import "wp/gutenberg";
+
 // Pages
 @import "pages/print";

src/scss/wp/_gutenberg.scss

@@ -1,10 +1,41 @@
 .alignwide {
     @include row--fullwidth;
-
     max-width: container() * 1.5;
 }
 .alignfull {
     @include row--fullwidth;
-
     max-width: 100vw;
+}
+
+// Mains blocks
+.wp-block {
+    $el : &;
+
+    // Block Button
+    &-button {
+        &__link {
+            @extend .button;
+            @extend .button--round;
+
+            &:not([class*="has"]) {
+                @extend .button--primary;
+            }
+        }
+
+        &.is-style-outline {
+            #{$el}-button {
+                &__link {
+                    @extend .button--outline;
+                }
+            }
+        }
+
+        &.is-style-squared {
+            #{$el}-button {
+                &__link {
+                    @extend .button--square;
+                }
+            }
+        }
+    }
 }

src/scss/wp/_wysiwyg.scss

@@ -1,23 +1,23 @@
 .wysiwyg {
 	@include clearfix;
 
-	* {
-		margin-bottom: $base-spacing;
+	// * {
+	// 	margin-bottom: $base-spacing;
 
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+	// 	&:last-child {
+	// 		margin-bottom: 0;
+	// 	}
+	// }
 
-	a {
+	a:not([class]) {
 		text-decoration: underline;
 
 		@include hover {
 			text-decoration: none;
 		}
 	}
 
-	ul {
+	ul:not([class]) {
 		list-style: disc inside none;
 		margin: 0 0 $base-spacing;
 
@@ -26,24 +26,24 @@
 		}
 	}
 
-	ol {
+	ol:not([class]) {
 		list-style: decimal inside none;
 		margin: 0 0 $base-spacing;
 
 		li {
 			margin: 0 0 $half-base-spacing;
 		}
 	}
+
 	img {
 		@include img__responsive;
-	}
-
-	.alignright,
-	.alignleft {
-		max-width: 50%;
+		&.alignright,
+		&.alignleft {
+			max-width: 50%;
 
-		@include breakpoints(sm) {
-			max-width: 100%;
+			@include breakpoints(sm) {
+				max-width: 100%;
+			}
 		}
 	}
 }