From 7b45a9dafaf4cb24de97a73921d3acb5ac5ea6a9 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 2 Dec 2020 12:09:41 +0200 Subject: [PATCH] Buttons: Add variations for vertical layout (#27297) * Add buttons variations for vertical layout * fix vertical appender styles * remove box-shadow from buttons on focus * regenerate fixtures * move focus styling to Buttons --- packages/block-library/src/buttons/block.json | 4 +++ packages/block-library/src/buttons/edit.js | 5 +-- .../block-library/src/buttons/editor.scss | 32 +++++++++++++------ packages/block-library/src/buttons/index.js | 2 ++ packages/block-library/src/buttons/save.js | 5 ++- packages/block-library/src/buttons/style.scss | 21 ++++++++++++ .../block-library/src/buttons/variations.js | 24 ++++++++++++++ .../fixtures/blocks/core__buttons.json | 1 + .../core_buttons__simple__deprecated.json | 4 ++- 9 files changed, 84 insertions(+), 14 deletions(-) create mode 100644 packages/block-library/src/buttons/variations.js diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index b534316ce8f97..003f7719e9811 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 e65ec7b804ad2..e6354ea1204dd 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 22aec65a99f73..e08d9923bb772 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 81653d1e12d68..eac726ba4de30 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 5c64fc110e0d5..784833b63ca32 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 438c7b1e42be3..64bac05b155b8 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 0000000000000..438a5fc97b5eb --- /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 29df40b187fd3..0907230ef4750 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 d77d9752de37b..1ae83f325b61d 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",