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 (
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss index 438c7b1e42be31..64bac05b155b8f 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -3,6 +3,17 @@ flex-direction: row; flex-wrap: wrap; + &.is-vertical { + flex-direction: column; + > .wp-block-button { + /*rtl:ignore*/ + margin-right: 0; + &:last-child { + margin-bottom: 0; + } + } + } + // Increased specificity to override blocks default margin. > .wp-block-button { display: inline-block; @@ -18,10 +29,16 @@ &.is-content-justification-left { justify-content: flex-start; + &.is-vertical { + align-items: flex-start; + } } &.is-content-justification-center { justify-content: center; + &.is-vertical { + align-items: center; + } } &.is-content-justification-right { @@ -38,6 +55,10 @@ margin-left: 0; } } + + &.is-vertical { + align-items: flex-end; + } } // Kept for backward compatibiity. diff --git a/packages/block-library/src/buttons/variations.js b/packages/block-library/src/buttons/variations.js new file mode 100644 index 00000000000000..438a5fc97b5ebe --- /dev/null +++ b/packages/block-library/src/buttons/variations.js @@ -0,0 +1,24 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +const variations = [ + { + name: 'buttons-horizontal', + isDefault: true, + title: __( 'Horizontal' ), + description: __( 'Buttons shown in a row.' ), + attributes: { orientation: 'horizontal' }, + scope: [ 'transform' ], + }, + { + name: 'buttons-vertical', + title: __( 'Vertical' ), + description: __( 'Buttons shown in a column.' ), + attributes: { orientation: 'vertical' }, + scope: [ 'transform' ], + }, +]; + +export default variations; diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.json b/packages/e2e-tests/fixtures/blocks/core__buttons.json index 29df40b187fd34..0907230ef47504 100644 --- a/packages/e2e-tests/fixtures/blocks/core__buttons.json +++ b/packages/e2e-tests/fixtures/blocks/core__buttons.json @@ -5,6 +5,7 @@ "isValid": true, "attributes": { "contentJustification": "center", + "orientation": "horizontal", "align": "wide" }, "innerBlocks": [ diff --git a/packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.json b/packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.json index d77d9752de37b0..1ae83f325b61d5 100644 --- a/packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.json +++ b/packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.json @@ -3,7 +3,9 @@ "clientId": "_clientId_0", "name": "core/buttons", "isValid": true, - "attributes": {}, + "attributes": { + "orientation": "horizontal" + }, "innerBlocks": [ { "clientId": "_clientId_0",