From 7188561e51f5aada51dc471696da738a159cdee3 Mon Sep 17 00:00:00 2001
From: nfmohit-wpmudev <nfmohit49@gmail.com>
Date: Tue, 11 Feb 2020 09:39:26 +0600
Subject: [PATCH] Added a vertical style to the Buttons block

---
 .../block-library/src/buttons/editor.scss     | 12 ++++++++---
 packages/block-library/src/buttons/index.js   |  4 ++++
 packages/block-library/src/buttons/style.scss | 20 +++++++++++++------
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 19b0acb884b589..14f7517318449b 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -1,6 +1,12 @@
-.wp-block-buttons .wp-block.block-editor-block-list__block[data-type="core/button"] {
-	display: inline-block;
-	width: auto;
+.wp-block-buttons {
+	.wp-block.block-editor-block-list__block[data-type="core/button"] {
+		display: inline-block;
+		width: auto;
+	}
+
+	&.is-style-vertical .wp-block.block-editor-block-list__block[data-type="core/button"] {
+		display: block;
+	}
 }
 
 .wp-block-buttons {
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index 4777968dd1e710..6bd6e19a2f5f4e 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -27,6 +27,10 @@ export const settings = {
 		align: true,
 		alignWide: false,
 	},
+	styles: [
+		{ name: 'horizontal', label: __( 'Horizontal' ), isDefault: true },
+		{ name: 'vertical', label: __( 'Vertical' ) },
+	],
 	transforms,
 	edit,
 	save,
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 47fb245ec00249..2279b3b61435c2 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -1,7 +1,15 @@
-.wp-block-buttons .wp-block-button {
-	display: inline-block;
-	margin: $grid-size-small;
-}
-.wp-block-buttons.aligncenter {
-	text-align: center;
+.wp-block-buttons {
+
+	&.aligncenter {
+		text-align: center;
+	}
+
+	.wp-block-button {
+		display: inline-block;
+		margin: $grid-size-small;
+	}
+
+	&.is-style-vertical .wp-block-button {
+		display: block;
+	}
 }