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; + } }