From 9cd3feb84adb5096ca2cc9d24818e3b4d6fb3c49 Mon Sep 17 00:00:00 2001
From: Copons <Copons@users.noreply.github.com>
Date: Thu, 9 Apr 2020 17:03:17 +0100
Subject: [PATCH] Display the block inline to avoid filling the entire parent
 block clickable area

---
 extensions/blocks/button/edit.js     | 1 +
 extensions/blocks/button/editor.scss | 4 ++++
 2 files changed, 5 insertions(+)
 create mode 100644 extensions/blocks/button/editor.scss

diff --git a/extensions/blocks/button/edit.js b/extensions/blocks/button/edit.js
index 8556b4defc17e..8000f78e1f1de 100644
--- a/extensions/blocks/button/edit.js
+++ b/extensions/blocks/button/edit.js
@@ -22,6 +22,7 @@ import applyFallbackStyles from './apply-fallback-styles';
 import ButtonBorderPanel from './button-border-panel';
 import ButtonColorsPanel from './button-colors-panel';
 import { IS_GRADIENT_AVAILABLE } from './constants';
+import './editor.scss';
 
 const ButtonEdit = ( {
 	attributes,
diff --git a/extensions/blocks/button/editor.scss b/extensions/blocks/button/editor.scss
new file mode 100644
index 0000000000000..92495cc2815da
--- /dev/null
+++ b/extensions/blocks/button/editor.scss
@@ -0,0 +1,4 @@
+.wp-block[data-type='jetpack/button'] {
+	display: inline-block;
+	margin: 0 auto;
+}