From 92e24f2a1f57d576a3bc521576048d1712fb7f89 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 26 Nov 2020 14:21:56 +0200 Subject: [PATCH 1/5] Add buttons variations for vertical layout --- packages/block-library/src/buttons/block.json | 4 ++++ packages/block-library/src/buttons/edit.js | 5 ++-- .../block-library/src/buttons/editor.scss | 5 ++++ packages/block-library/src/buttons/index.js | 2 ++ packages/block-library/src/buttons/save.js | 5 +++- packages/block-library/src/buttons/style.scss | 23 ++++++++++++++++++ .../block-library/src/buttons/variations.js | 24 +++++++++++++++++++ 7 files changed, 65 insertions(+), 3 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 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..e604115aac441e 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -1,6 +1,7 @@ .wp-block-buttons > .wp-block { // Override editor auto block margins. margin-left: 0; + margin-top: $button-margin; } .wp-block > .wp-block-buttons { @@ -20,4 +21,8 @@ .wp-block-buttons > .block-list-appender { display: inline-flex; align-items: center; + + .is-vertical & { + align-items: flex-start; + } } 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..8775aefa4ba8b2 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -3,6 +3,10 @@ flex-direction: row; flex-wrap: wrap; + &.is-vertical { + flex-direction: column; + } + // Increased specificity to override blocks default margin. > .wp-block-button { display: inline-block; @@ -14,14 +18,29 @@ /*rtl:ignore*/ margin-right: 0; } + + .is-vertical & { + margin-right: 0; + + &:last-child { + /*rtl:ignore*/ + margin-bottom: 0; + } + } } &.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 +57,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; From 06b974495367529f00a34b4ac6b3489e94700b1d Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 26 Nov 2020 15:55:46 +0200 Subject: [PATCH 2/5] fix vertical appender styles --- .../block-library/src/buttons/editor.scss | 32 ++++++++++--------- packages/block-library/src/buttons/style.scss | 16 ++++------ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss index e604115aac441e..2b3e5c1c02fdea 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -1,14 +1,25 @@ -.wp-block-buttons > .wp-block { - // Override editor auto block margins. - margin-left: 0; - margin-top: $button-margin; -} - .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[data-align="center"] > .wp-block-buttons { align-items: center; justify-content: center; @@ -17,12 +28,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; - - .is-vertical & { - align-items: flex-start; - } -} diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss index 8775aefa4ba8b2..64bac05b155b8f 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -5,6 +5,13 @@ &.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. @@ -18,15 +25,6 @@ /*rtl:ignore*/ margin-right: 0; } - - .is-vertical & { - margin-right: 0; - - &:last-child { - /*rtl:ignore*/ - margin-bottom: 0; - } - } } &.is-content-justification-left { From a7798f77827ef0331a7ef9f99f5e934b2405b84b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 26 Nov 2020 16:11:39 +0200 Subject: [PATCH 3/5] remove box-shadow from buttons on focus --- packages/block-library/src/button/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 471d191be09bb0..8e6a7efa059572 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -19,7 +19,7 @@ } // Add outline to button on focus to indicate focus-state - &:focus { + &:focus:not(.wp-block-buttons &) { box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color); // Windows' High Contrast mode will show this outline, but not the box-shadow. From 6d505348a12e0ec0f8a24eb6d8238c72d6f20064 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 27 Nov 2020 10:42:24 +0200 Subject: [PATCH 4/5] regenerate fixtures --- packages/e2e-tests/fixtures/blocks/core__buttons.json | 1 + .../fixtures/blocks/core_buttons__simple__deprecated.json | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) 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", From 0dcb1747f678c1850169679eb197d0af7054969d Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 2 Dec 2020 11:26:35 +0200 Subject: [PATCH 5/5] move focus styling to Buttons --- packages/block-library/src/button/editor.scss | 2 +- packages/block-library/src/buttons/editor.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 8e6a7efa059572..471d191be09bb0 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -19,7 +19,7 @@ } // Add outline to button on focus to indicate focus-state - &:focus:not(.wp-block-buttons &) { + &:focus { box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color); // Windows' High Contrast mode will show this outline, but not the box-shadow. diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss index 2b3e5c1c02fdea..e08d9923bb7728 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -18,6 +18,11 @@ justify-content: flex-start; } } + > .wp-block-button { + &:focus { + box-shadow: none; + } + } } .wp-block[data-align="center"] > .wp-block-buttons {