SCSS changes to accomodate WordPress 5.5

pixelgrade · Sep 11, 2020 · 1cf6041 · 1cf6041
1 parent e53034d
commit 1cf6041
Show file tree

Hide file tree

Showing 14 changed files with 243 additions and 112 deletions.
diff --git a/assets/scss/blocks/core/button/_style.scss b/assets/scss/blocks/core/button/_style.scss
@@ -27,50 +27,68 @@ $enable-button-block-styles:            true !default;
     }
 
     .wp-block-button__link {
-        display: inline-block;
         @include button-base;
         @include button-box;
         @include apply-font(button);
-
-        &:not(.has-text-color) {
-            @include button-color;
-        }
+        @include button-color;
     }
 
-    .wp-block-buttons[class] {
+    .wp-block-buttons[class][class][class] {
+        margin-top: var(--element-spacing);
+
         display: flex;
         align-items: center;
         flex-wrap: wrap;
 
-        margin-left: calc(var(--theme-spacing) * -1);
+        &:first-child {
+            --block-top-spacing: 1;
+            @include element-spacing;
+        }
+
+
+        .wp-block,
+        .wp-block-button {
+            margin-top: 0 !important;
+
+            &:not(:last-child),
+            &:not(:first-child):not(:last-child) {
+                margin-right: var(--element-spacing);
+            }
+        }
 
         .block-editor-block-list__layout {
             display: flex;
             align-items: center;
             flex-wrap: wrap;
 
-            * {
+            > * {
                 margin-left: 0;
                 margin-right: 0;
             }
         }
 
-        .wp-block,
-        .wp-block-button {
-            display: flex;
-            margin-left: var(--theme-spacing);
-        }
-
         &.aligncenter {
             justify-content: center;
-        }
 
-        &.alignleft {
-            justify-content: flex-start;
+            .wp-block,
+            .wp-block-button {
+                margin-left: calc( var(--element-spacing) / 2 );
+                margin-right: calc( var(--element-spacing) / 2 );
+            }
         }
 
         &.alignright {
             justify-content: flex-end;
+
+            .wp-block,
+            .wp-block-button {
+                margin-left: var(--element-spacing);
+                margin-right: 0;
+            }
+        }
+
+        .wp-block-button__link[class] {
+            display: block;
         }
     }
 }
diff --git a/assets/scss/elements/_headings.scss b/assets/scss/elements/_headings.scss
@@ -1,8 +1,8 @@
-/* Headings */
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin-bottom: 0;
 }
 
+
 h1.has-larger-font-size {
   @include apply-font(display);
 }

diff --git a/assets/scss/gutenberg-legacy-editor.scss b/assets/scss/gutenberg-legacy-editor.scss
@@ -0,0 +1,18 @@
+@import "setup";
+
+.wp-block-buttons[class][class] {
+
+  margin-top: 0;
+
+  .block-editor-block-list__layout {
+
+    > * {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .wp-block-button {
+    margin: var(--element-spacing) var(--element-spacing) 0 0;
+  }
+}
diff --git a/assets/scss/gutenberg-legacy-frontend.scss b/assets/scss/gutenberg-legacy-frontend.scss
@@ -0,0 +1,5 @@
+@import "setup";
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
diff --git a/assets/scss/setup/_mixins.scss b/assets/scss/setup/_mixins.scss
@@ -8,6 +8,7 @@
 @import "mixins/close";
 @import "mixins/cover";
 @import "mixins/flex-grid";
+@import "mixins/font-feature";
 @import "mixins/element-spacing";
 @import "mixins/fluid";
 @import "mixins/font";

diff --git a/assets/scss/setup/mixins/_button.scss b/assets/scss/setup/mixins/_button.scss
@@ -196,7 +196,9 @@
     transform: translate(0, -50%) scale(-1,1);
   }
 
-  &:hover {
+  &:not([disabled]):hover {
+
+    color: var(--theme-button-text-color);
 
     &:before {
       transform: scale3d(0, 1, 1);

diff --git a/assets/scss/setup/mixins/_font-feature.scss b/assets/scss/setup/mixins/_font-feature.scss
@@ -0,0 +1,7 @@
+// A mix-in for turning OpenType features on and off
+// Demos of CSS OpenType features in CSS
+// https://sparanoid.com/lab/opentype-features
+
+@mixin font-feature() {
+    --current-font-feature: "liga", "dlig", "onum";
+}
diff --git a/blocks.css b/blocks.css
@@ -640,7 +640,6 @@
   text-align: right; }
 
 .wp-block-button__link {
-  display: inline-block;
   display: inline-block;
   text-decoration: none;
   cursor: pointer;
@@ -680,37 +679,50 @@
   --current-font-weight: var(--theme-button-font-weight);
   --current-letter-spacing: var(--theme-button-letter-spacing);
   --current-text-transform: var(--theme-button-text-transform);
-  --current-text-decoration: var(--theme-button-text-decoration); }
+  --current-text-decoration: var(--theme-button-text-decoration);
+  color: var(--current-button-text-color); }
   .wp-block-button__link:hover {
     --current-button-background-color: var(--theme-button-hover-background-color);
     --current-button-border-color: var(--theme-button-hover-border-color);
     --current-button-text-color: var(--theme-button-hover-text-color);
     --current-button-transition: var(--theme-button-hover-transition); }
-  .wp-block-button__link:not(.has-text-color) {
-    color: var(--current-button-text-color); }
 
-.wp-block-buttons[class] {
+.wp-block-buttons[class][class][class] {
+  margin-top: var(--element-spacing);
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  margin-left: calc(var(--theme-spacing) * -1); }
-  .wp-block-buttons[class] .block-editor-block-list__layout {
+  flex-wrap: wrap; }
+  .wp-block-buttons[class][class][class]:first-child {
+    --block-top-spacing: 1;
+    --element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); }
+  .wp-block-buttons[class][class][class] .wp-block,
+  .wp-block-buttons[class][class][class] .wp-block-button {
+    margin-top: 0 !important; }
+    .wp-block-buttons[class][class][class] .wp-block:not(:last-child), .wp-block-buttons[class][class][class] .wp-block:not(:first-child):not(:last-child),
+    .wp-block-buttons[class][class][class] .wp-block-button:not(:last-child),
+    .wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) {
+      margin-right: var(--element-spacing); }
+  .wp-block-buttons[class][class][class] .block-editor-block-list__layout {
     display: flex;
     align-items: center;
     flex-wrap: wrap; }
-    .wp-block-buttons[class] .block-editor-block-list__layout * {
+    .wp-block-buttons[class][class][class] .block-editor-block-list__layout > * {
       margin-left: 0;
       margin-right: 0; }
-  .wp-block-buttons[class] .wp-block,
-  .wp-block-buttons[class] .wp-block-button {
-    display: flex;
-    margin-left: var(--theme-spacing); }
-  .wp-block-buttons[class].aligncenter {
+  .wp-block-buttons[class][class][class].aligncenter {
     justify-content: center; }
-  .wp-block-buttons[class].alignleft {
-    justify-content: flex-start; }
-  .wp-block-buttons[class].alignright {
+    .wp-block-buttons[class][class][class].aligncenter .wp-block,
+    .wp-block-buttons[class][class][class].aligncenter .wp-block-button {
+      margin-left: calc( var(--element-spacing) / 2);
+      margin-right: calc( var(--element-spacing) / 2); }
+  .wp-block-buttons[class][class][class].alignright {
     justify-content: flex-end; }
+    .wp-block-buttons[class][class][class].alignright .wp-block,
+    .wp-block-buttons[class][class][class].alignright .wp-block-button {
+      margin-left: var(--element-spacing);
+      margin-right: 0; }
+  .wp-block-buttons[class][class][class] .wp-block-button__link[class] {
+    display: block; }
 
 /* Categories Block */
 .wp-block-categories {

diff --git a/editor.css b/editor.css
@@ -496,12 +496,14 @@
         transform: translate(0, -50%) scale(-1, 1);
         transition: var(--theme-button-transition);
         transition-property: opacity, transform; } }
-  .editor-styles-wrapper .is-style-text .wp-block-button__link:hover:before {
-    transform: scale3d(0, 1, 1);
-    transform-origin: right; }
-  .editor-styles-wrapper .is-style-text .wp-block-button__link:hover:after {
-    opacity: 1;
-    transform: translate(0.4em, -50%) scale(-1, 1); }
+  .editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover {
+    color: var(--theme-button-text-color); }
+    .editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover:before {
+      transform: scale3d(0, 1, 1);
+      transform-origin: right; }
+    .editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover:after {
+      opacity: 1;
+      transform: translate(0.4em, -50%) scale(-1, 1); }
 
 .editor-styles-wrapper .c-headline {
   display: flex;
@@ -720,7 +722,6 @@
   .editor-styles-wrapper .wp-block-button.alignright {
     text-align: right; }
   .editor-styles-wrapper .wp-block-button__link {
-    display: inline-block;
     display: inline-block;
     text-decoration: none;
     cursor: pointer;
@@ -760,36 +761,49 @@
     --current-font-weight: var(--theme-button-font-weight);
     --current-letter-spacing: var(--theme-button-letter-spacing);
     --current-text-transform: var(--theme-button-text-transform);
-    --current-text-decoration: var(--theme-button-text-decoration); }
+    --current-text-decoration: var(--theme-button-text-decoration);
+    color: var(--current-button-text-color); }
     .editor-styles-wrapper .wp-block-button__link:hover {
       --current-button-background-color: var(--theme-button-hover-background-color);
       --current-button-border-color: var(--theme-button-hover-border-color);
       --current-button-text-color: var(--theme-button-hover-text-color);
       --current-button-transition: var(--theme-button-hover-transition); }
-    .editor-styles-wrapper .wp-block-button__link:not(.has-text-color) {
-      color: var(--current-button-text-color); }
-  .editor-styles-wrapper .wp-block-buttons[class] {
+  .editor-styles-wrapper .wp-block-buttons[class][class][class] {
+    margin-top: var(--element-spacing);
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
-    margin-left: calc(var(--theme-spacing) * -1); }
-    .editor-styles-wrapper .wp-block-buttons[class] .block-editor-block-list__layout {
+    flex-wrap: wrap; }
+    .editor-styles-wrapper .wp-block-buttons[class][class][class]:first-child {
+      --block-top-spacing: 1;
+      --element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); }
+    .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block,
+    .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button {
+      margin-top: 0 !important; }
+      .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block:not(:last-child), .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block:not(:first-child):not(:last-child),
+      .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button:not(:last-child),
+      .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) {
+        margin-right: var(--element-spacing); }
+    .editor-styles-wrapper .wp-block-buttons[class][class][class] .block-editor-block-list__layout {
       display: flex;
       align-items: center;
       flex-wrap: wrap; }
-      .editor-styles-wrapper .wp-block-buttons[class] .block-editor-block-list__layout * {
+      .editor-styles-wrapper .wp-block-buttons[class][class][class] .block-editor-block-list__layout > * {
         margin-left: 0;
         margin-right: 0; }
-    .editor-styles-wrapper .wp-block-buttons[class] .wp-block,
-    .editor-styles-wrapper .wp-block-buttons[class] .wp-block-button {
-      display: flex;
-      margin-left: var(--theme-spacing); }
-    .editor-styles-wrapper .wp-block-buttons[class].aligncenter {
+    .editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter {
       justify-content: center; }
-    .editor-styles-wrapper .wp-block-buttons[class].alignleft {
-      justify-content: flex-start; }
-    .editor-styles-wrapper .wp-block-buttons[class].alignright {
+      .editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter .wp-block,
+      .editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter .wp-block-button {
+        margin-left: calc( var(--element-spacing) / 2);
+        margin-right: calc( var(--element-spacing) / 2); }
+    .editor-styles-wrapper .wp-block-buttons[class][class][class].alignright {
       justify-content: flex-end; }
+      .editor-styles-wrapper .wp-block-buttons[class][class][class].alignright .wp-block,
+      .editor-styles-wrapper .wp-block-buttons[class][class][class].alignright .wp-block-button {
+        margin-left: var(--element-spacing);
+        margin-right: 0; }
+    .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button__link[class] {
+      display: block; }
   .editor-styles-wrapper ul.wp-block-categories__list[class] {
     list-style: none;
     padding-left: 0; }
@@ -1643,7 +1657,6 @@
     --current-text-decoration: var(--theme-body-text-decoration);
     font-style: normal; }
   .editor-styles-wrapper[class] {
-    /* Headings */
     /* Iframes */
     /* Lists */
     /* Nested unordered lists */
@@ -1667,7 +1680,7 @@
     background-color: var(--current-light-primary);
     color: var(--current-dark-secondary); }
     .editor-styles-wrapper[class] h1, .editor-styles-wrapper[class] h2, .editor-styles-wrapper[class] h3, .editor-styles-wrapper[class] h4, .editor-styles-wrapper[class] h5, .editor-styles-wrapper[class] h6 {
-      margin: 0; }
+      margin-bottom: 0; }
     .editor-styles-wrapper[class] h1.has-larger-font-size {
       font-family: var(--current-font-family);
       font-size: var(--current-font-size);

diff --git a/functions.php b/functions.php
@@ -114,6 +114,10 @@ function rosa2_lite_enqueue_theme_block_editor_assets() {
 	$theme  = wp_get_theme( get_template() );
 	$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
 
+	global $wp_version;
+	$is_old_wp_version = version_compare( $wp_version, '5.5', '<' );
+	$is_gutenberg_plugin_active = defined( 'GUTENBERG_VERSION' );
+
 	/* Default Google Fonts */
 	wp_enqueue_style( 'rosa2-lite-google-fonts', rosa2_lite_google_fonts_url() );
 
@@ -126,6 +130,10 @@ function rosa2_lite_enqueue_theme_block_editor_assets() {
 		$theme->get( 'Version' ),
 		true
 	);
+
+	if ( $is_old_wp_version && ! $is_gutenberg_plugin_active ) {
+		wp_enqueue_style( 'rosa2-gutenberg-legacy-editor' );
+	}
 }
 add_action( 'enqueue_block_editor_assets', 'rosa2_lite_enqueue_theme_block_editor_assets', 10 );
 
@@ -141,13 +149,21 @@ function rosa2_lite_scripts() {
 	$theme  = wp_get_theme( get_template() );
 	$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
 
+	global $wp_version;
+	$is_old_wp_version = version_compare( $wp_version, '5.5', '<' );
+	$is_gutenberg_plugin_active = defined( 'GUTENBERG_VERSION' );
+
 	/* Default Google Fonts */
 	wp_enqueue_style( 'rosa2-lite-google-fonts', rosa2_lite_google_fonts_url() );
 
 	if ( ! in_array( 'nova-blocks/nova-blocks.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
 		wp_enqueue_style( 'rosa2-novablocks-fallback-style', get_template_directory_uri() . '/novablocks-fallback.css', array(), $theme->get( 'Version' ) );
 	}
 
+	wp_register_style( 'rosa2-lite-gutenberg-legacy-frontend', get_template_directory_uri() . '/dist/css/gutenberg-legacy-frontend.css', array(), $theme->get( 'Version' ) );
+
+	wp_register_style( 'rosa2-lite-gutenberg-legacy-editor', get_template_directory_uri() . '/dist/css/gutenberg-legacy-editor.css', array(), $theme->get( 'Version' ) );
+
 	wp_enqueue_style( 'rosa2-style', get_template_directory_uri() . '/style.css', array(), $theme->get( 'Version' ) );
 	wp_style_add_data( 'rosa2-style', 'rtl', 'replace' );
 
@@ -160,6 +176,10 @@ function rosa2_lite_scripts() {
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );
 	}
+
+	if ( $is_old_wp_version && ! $is_gutenberg_plugin_active ) {
+		wp_enqueue_style( 'rosa2-gutenberg-legacy-frontend' );
+	}
 }
 add_action( 'wp_enqueue_scripts', 'rosa2_lite_scripts', 10 );
 

diff --git a/gutenberg-legacy-editor.css b/gutenberg-legacy-editor.css
@@ -0,0 +1,7 @@
+.wp-block-buttons[class][class] {
+  margin-top: 0; }
+  .wp-block-buttons[class][class] .block-editor-block-list__layout > * {
+    margin-left: 0;
+    margin-right: 0; }
+  .wp-block-buttons[class][class] .wp-block-button {
+    margin: var(--element-spacing) var(--element-spacing) 0 0; }