Added a vertical style to the Buttons block

WordPress · Mar 16, 2020 · e45ebb6 · e45ebb6
1 parent e8b5c2e
commit e45ebb6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git 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
@@ -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
@@ -1,7 +1,15 @@
-.wp-block-buttons .wp-block-button {
-	display: inline-block;
-	margin: $grid-unit-05;
-}
-.wp-block-buttons.aligncenter {
-	text-align: center;
+.wp-block-buttons {
+
+	&.aligncenter {
+		text-align: center;
+	}
+
+	.wp-block-button {
+		display: inline-block;
+		margin: $grid-unit-05;
+	}
+
+	&.is-style-vertical .wp-block-button {
+		display: block;
+	}
 }