New class for layout and support for buttons group see #64

pixelgrade · Jan 9, 2020 · 902e408 · 902e408
1 parent 12f134a
commit 902e408
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 13 deletions.
diff --git a/assets/scss/blocks/core/button/_style.scss b/assets/scss/blocks/core/button/_style.scss
@@ -36,4 +36,26 @@ $enable-button-block-styles:            true !default;
             @include button-color;
         }
     }
+
+    .wp-block-buttons {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .block-editor-block-list__layout {
+            display: flex;
+            align-items: center;
+
+            * {
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+
+        .wp-block:not(:first-child),
+        .wp-block-button {
+            display: flex;
+            margin-left: var(--theme-spacing);
+        }
+    }
 }
diff --git a/assets/scss/blocks/nova-blocks/header/_editor.scss b/assets/scss/blocks/nova-blocks/header/_editor.scss
@@ -1,5 +1,6 @@
 .wp-block[data-type="novablocks/header"] {
-  .editor-block-list__layout {
+  .editor-block-list__layout,
+  .block-editor-block-list__layout {
     display: grid;
     align-items: center;
     grid-gap: 1em;
@@ -16,13 +17,15 @@
 }
 
 .site-header-logo-center {
-  .editor-block-list__layout {
+  .editor-block-list__layout,
+  .block-editor-block-list__layout {
     grid-template-columns: 1fr auto 1fr;
   }
 }
 
 .site-header-logo-left {
-  .editor-block-list__layout {
+  .editor-block-list__layout,
+  .block-editor-block-list__layout {
     grid-template-columns: auto 1fr;
   }
 }

diff --git a/assets/scss/editor.scss b/assets/scss/editor.scss
@@ -12,7 +12,8 @@
 @import "components/site-header/social-links";
 
 /* Layout */
-.editor-block-list__layout {
+.editor-block-list__layout,
+.block-editor-block-list__layout {
 
     > :not([data-align="wide"]):not([data-align="full"]) {
         max-width: var(--theme-content-width-normal);

diff --git a/editor.css b/editor.css
@@ -770,16 +770,20 @@
       margin-bottom: var(--theme-spacing-micro); } }
 
 /* Layout */
-.editor-block-list__layout > :not([data-align="wide"]):not([data-align="full"]) {
+.editor-block-list__layout > :not([data-align="wide"]):not([data-align="full"]),
+.block-editor-block-list__layout > :not([data-align="wide"]):not([data-align="full"]) {
   max-width: var(--theme-content-width-normal); }
 
-.editor-block-list__layout .wp-block[data-align=wide] {
+.editor-block-list__layout .wp-block[data-align=wide],
+.block-editor-block-list__layout .wp-block[data-align=wide] {
   max-width: var(--theme-content-width-wide); }
 
-.editor-block-list__layout > [data-align="wide"] {
+.editor-block-list__layout > [data-align="wide"],
+.block-editor-block-list__layout > [data-align="wide"] {
   max-width: var(--theme-content-width-wide); }
 
-.editor-block-list__layout > [data-align="full"] {
+.editor-block-list__layout > [data-align="full"],
+.block-editor-block-list__layout > [data-align="full"] {
   max-width: none; }
 
 /* Typography */
@@ -892,6 +896,20 @@
       --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 {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap; }
+    .editor-styles-wrapper .wp-block-buttons .block-editor-block-list__layout {
+      display: flex;
+      align-items: center; }
+      .editor-styles-wrapper .wp-block-buttons .block-editor-block-list__layout * {
+        margin-left: 0;
+        margin-right: 0; }
+    .editor-styles-wrapper .wp-block-buttons .wp-block:not(:first-child),
+    .editor-styles-wrapper .wp-block-buttons .wp-block-button {
+      display: flex;
+      margin-left: var(--theme-spacing); }
   .editor-styles-wrapper ul.wp-block-categories__list[class] {
     list-style: none;
     padding-left: 0; }
@@ -1608,18 +1626,23 @@
     transform: translate(0, -50%); }
     .editor-styles-wrapper .novablocks-map__marker-name[class][class][class] {
       font-size: 16px; }
-  .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .editor-block-list__layout {
+  .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .editor-block-list__layout,
+  .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .block-editor-block-list__layout {
     display: grid;
     align-items: center;
     grid-gap: 1em; }
-    .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .editor-block-list__layout .wp-block {
+    .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .editor-block-list__layout .wp-block,
+    .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .block-editor-block-list__layout .wp-block {
       margin: 0;
       max-width: 100%; }
-    .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .editor-block-list__layout > :last-child {
+    .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .editor-block-list__layout > :last-child,
+    .editor-styles-wrapper .wp-block[data-type="novablocks/header"] .block-editor-block-list__layout > :last-child {
       justify-content: flex-end; }
-  .editor-styles-wrapper .site-header-logo-center .editor-block-list__layout {
+  .editor-styles-wrapper .site-header-logo-center .editor-block-list__layout,
+  .editor-styles-wrapper .site-header-logo-center .block-editor-block-list__layout {
     grid-template-columns: 1fr auto 1fr; }
-  .editor-styles-wrapper .site-header-logo-left .editor-block-list__layout {
+  .editor-styles-wrapper .site-header-logo-left .editor-block-list__layout,
+  .editor-styles-wrapper .site-header-logo-left .block-editor-block-list__layout {
     grid-template-columns: auto 1fr; }
   .editor-styles-wrapper .wp-block[data-type="novablocks/navigation"] {
     display: flex; }

diff --git a/style-rtl.css b/style-rtl.css
@@ -3685,6 +3685,21 @@ span.page-numbers {
   .wp-block-button__link:not(.has-text-color) {
     color: var(--current-button-text-color); }
 
+.wp-block-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap; }
+  .wp-block-buttons .block-editor-block-list__layout {
+    display: flex;
+    align-items: center; }
+    .wp-block-buttons .block-editor-block-list__layout * {
+      margin-right: 0;
+      margin-left: 0; }
+  .wp-block-buttons .wp-block:not(:first-child),
+  .wp-block-buttons .wp-block-button {
+    display: flex;
+    margin-right: var(--theme-spacing); }
+
 /* Categories Block */
 .wp-block-categories {
   list-style: none; }

diff --git a/style.css b/style.css
@@ -3685,6 +3685,21 @@ span.page-numbers {
   .wp-block-button__link:not(.has-text-color) {
     color: var(--current-button-text-color); }
 
+.wp-block-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap; }
+  .wp-block-buttons .block-editor-block-list__layout {
+    display: flex;
+    align-items: center; }
+    .wp-block-buttons .block-editor-block-list__layout * {
+      margin-left: 0;
+      margin-right: 0; }
+  .wp-block-buttons .wp-block:not(:first-child),
+  .wp-block-buttons .wp-block-button {
+    display: flex;
+    margin-left: var(--theme-spacing); }
+
 /* Categories Block */
 .wp-block-categories {
   list-style: none; }