diff --git a/resources/assets/scripts/editor.js b/resources/assets/scripts/editor.js
index e69de29bb2..283ac78e6c 100644
--- a/resources/assets/scripts/editor.js
+++ b/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',
+  });
+});
diff --git a/resources/assets/styles/app.scss b/resources/assets/styles/app.scss
index def967f454..12101ab9eb 100644
--- a/resources/assets/styles/app.scss
+++ b/resources/assets/styles/app.scss
@@ -6,7 +6,7 @@
 @import 'common/global';
 
 /** Components */
-@import 'components/button';
+@import 'components';
 
 /** Partials */
 @import 'partials/header';
diff --git a/resources/assets/styles/common/global.scss b/resources/assets/styles/common/global.scss
index a79c45373c..b3591ba802 100644
--- a/resources/assets/styles/common/global.scss
+++ b/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;
+  }
+}
diff --git a/resources/assets/styles/components/button.scss b/resources/assets/styles/components/button.scss
index af8a567800..d6a2610967 100644
--- a/resources/assets/styles/components/button.scss
+++ b/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')
+      );
+    }
+  }
 }
diff --git a/resources/assets/styles/components/index.scss b/resources/assets/styles/components/index.scss
new file mode 100644
index 0000000000..2d43224818
--- /dev/null
+++ b/resources/assets/styles/components/index.scss
@@ -0,0 +1 @@
+@import 'button';
diff --git a/resources/assets/styles/config/variables.scss b/resources/assets/styles/config/variables.scss
index b7a8393dc5..2fa85e349c 100644
--- a/resources/assets/styles/config/variables.scss
+++ b/resources/assets/styles/config/variables.scss
@@ -3,5 +3,5 @@
  */
 
 $theme-colors: (
-  primary: #525ddc
+  primary: #525ddc,
 );
diff --git a/resources/assets/styles/editor.scss b/resources/assets/styles/editor.scss
index 6d6aba1d7d..9ad92373f8 100644
--- a/resources/assets/styles/editor.scss
+++ b/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;
 }