diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index b534316ce8f970..003f7719e98118 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -5,6 +5,10 @@ "attributes": { "contentJustification": { "type": "string" + }, + "orientation": { + "type": "string", + "default": "horizontal" } }, "supports": { diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index e65ec7b804ad2b..e6354ea1204dde 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -23,18 +23,19 @@ const ALLOWED_BLOCKS = [ buttonBlockName ]; const BUTTONS_TEMPLATE = [ [ 'core/button' ] ]; function ButtonsEdit( { - attributes: { contentJustification }, + attributes: { contentJustification, orientation }, setAttributes, } ) { const blockProps = useBlockProps( { className: classnames( { [ `is-content-justification-${ contentJustification }` ]: contentJustification, + 'is-vertical': orientation === 'vertical', } ), } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, template: BUTTONS_TEMPLATE, - orientation: 'horizontal', + orientation, __experimentalLayout: { type: 'default', alignments: [], diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss index 22aec65a99f73e..e08d9923bb7728 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -1,13 +1,30 @@ -.wp-block-buttons > .wp-block { - // Override editor auto block margins. - margin-left: 0; -} - .wp-block > .wp-block-buttons { display: flex; flex-wrap: wrap; } +.wp-block-buttons { + > .wp-block { + // Override editor auto block margins. + margin-left: 0; + margin-top: $button-margin; + } + > .block-list-appender { + display: inline-flex; + align-items: center; + } + &.is-vertical { + > .block-list-appender .block-list-appender__toggle { + justify-content: flex-start; + } + } + > .wp-block-button { + &:focus { + box-shadow: none; + } + } +} + .wp-block[data-align="center"] > .wp-block-buttons { align-items: center; justify-content: center; @@ -16,8 +33,3 @@ .wp-block[data-align="right"] > .wp-block-buttons { justify-content: flex-end; } - -.wp-block-buttons > .block-list-appender { - display: inline-flex; - align-items: center; -} diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js index 81653d1e12d686..eac726ba4de305 100644 --- a/packages/block-library/src/buttons/index.js +++ b/packages/block-library/src/buttons/index.js @@ -12,6 +12,7 @@ import transforms from './transforms'; import edit from './edit'; import metadata from './block.json'; import save from './save'; +import variations from './variations'; const { name } = metadata; @@ -40,4 +41,5 @@ export const settings = { transforms, edit, save, + variations, }; diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js index 5c64fc110e0d57..784833b63ca321 100644 --- a/packages/block-library/src/buttons/save.js +++ b/packages/block-library/src/buttons/save.js @@ -8,12 +8,15 @@ import classnames from 'classnames'; */ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; -export default function save( { attributes: { contentJustification } } ) { +export default function save( { + attributes: { contentJustification, orientation }, +} ) { return (