Sage 10 editor scripts & styles (#2351)

* adds alternate button style and super basic starter css

* Adds transition variable

* Add bootstrap max-width to editor-styles

* updates button scss, editor wrapper scss, and registration

* rename is-style-ghost to is-style-outline

* simplify structure and cleanup css

* Protect Ben Word's typographic holdings

* Remove scoping from .has-xyz-color classes

* Restore scss partial import structure

* rename partials, move color util, apply bootstrap font

* alphabetical selectors ¯\_(ツ)_/¯

resources/assets/scripts/editor.js

@@ -0,0 +1,15 @@
+import '@wordpress/edit-post';
+import domReady from '@wordpress/dom-ready';
+import {
+  unregisterBlockStyle,
+  registerBlockStyle,
+} from '@wordpress/blocks';
+
+domReady(() => {
+  unregisterBlockStyle('core/button', 'outline');
+
+  registerBlockStyle('core/button', {
+    name: 'outline',
+    label: 'Outline',
+  });
+});

resources/assets/styles/app.scss

@@ -6,7 +6,7 @@
 @import 'common/global';
 
 /** Components */
-@import 'components/button';
+@import 'components';
 
 /** Partials */
 @import 'partials/header';

resources/assets/styles/common/global.scss

@@ -5,3 +5,18 @@
 a {
   color: map-get($theme-colors, 'primary');
 }
+
+
+/**
+ * Block editor color palette utilities
+ * @see https://git.io/JeyD6
+ */
+@each $color-name, $color-value in $theme-colors {
+  .has-#{$color-name}-color {
+    color: $color-value;
+  }
+
+  .has-#{$color-name}-background-color {
+    background-color: $color-value;
+  }
+}

resources/assets/styles/components/button.scss

@@ -2,7 +2,38 @@
  * Button
  */
 
-.button {
-  background-color: map-get($theme-colors, 'primary');
-  color: #fff;
+.wp-block-button {
+  // Base
+  &__link {
+    font-size: $btn-font-size;
+    line-height: $btn-line-height;
+    padding-bottom: $btn-padding-y;
+    padding-left: $btn-padding-x;
+    padding-right: $btn-padding-x;
+    padding-top: $btn-padding-y;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Button style: outline
+  &.is-style-outline {
+    .wp-block-button__link {
+      @include button-outline-variant(
+        map-get($theme-colors, 'primary'),
+        map-get($theme-colors, 'light')
+      );
+    }
+  }
+
+  // Button style: solid
+  &.is-style-solid {
+    .wp-block-button__link {
+      @include button-variant(
+        map-get($theme-colors, 'primary'),
+        map-get($theme-colors, 'light')
+      );
+    }
+  }
 }

resources/assets/styles/components/index.scss

@@ -0,0 +1 @@
+@import 'button';

resources/assets/styles/config/variables.scss

@@ -3,5 +3,5 @@
  */
 
 $theme-colors: (
-  primary: #525ddc
+  primary: #525ddc,
 );

resources/assets/styles/editor.scss

@@ -4,10 +4,13 @@
 
 @import 'config/variables';
 
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+
 .editor-styles-wrapper > * {
   @import 'common/global';
+  @import 'components';
 
-  [example-block] {
-    @import 'components/button';
-  }
+  font-family: $font-family-base;
 }