From 91ce41803692e017b3adb82744052a2fa23cf099 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 14 Sep 2022 16:03:25 +1200 Subject: [PATCH 1/8] Modify the styling of the input controls when in unlinked mode in order to better differentiate sides --- .../src/components/spacing-sizes-control/index.js | 12 +++++++++++- .../components/spacing-sizes-control/style.scss | 15 +++++++++++++-- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js index ba379713b4bcc5..50a4074e829f34 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/index.js +++ b/packages/block-editor/src/components/spacing-sizes-control/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -68,7 +73,12 @@ export default function SpacingSizesControl( { }; return ( -
+
{ label } { ! hasOneSide && ( diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index 448a21cc0ac1ba..187e950d323f8d 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -23,6 +23,18 @@ justify-content: left; } + &.is-unlinked { + .components-spacing-sizes-control__side-label { + margin-left: $grid-unit-10; + } + .components-range-control.components-spacing-sizes-control__range-control { + margin: -$grid-unit-10 0 0 $grid-unit-10; + } + .components-unit-control-wrapper { + margin: 0 0 $grid-unit-10 $grid-unit-10; + } + } + .components-spacing-sizes-control__hint-single { margin-top: 0; margin-left: 0; @@ -86,7 +98,7 @@ .components-spacing-sizes-control__range-control { grid-column: span 3; padding-right: $grid-unit-10; - height: 30px; + height: 36px; } .components-range-control__wrapper { @@ -113,7 +125,6 @@ } .components-spacing-sizes-control__side-label { - margin-right: $grid-unit-05; grid-column: 1 / 1; justify-self: left; font-size: 12px; From 8d868d6c10d2f06ca86110266f84bf7dbeffafbe Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 15 Sep 2022 11:38:07 +1200 Subject: [PATCH 2/8] Style changes from PR feedback --- .../src/components/spacing-sizes-control/index.js | 6 ++++-- .../spacing-sizes-control/spacing-input-control.js | 14 +++++++------- .../components/spacing-sizes-control/style.scss | 11 +++-------- 3 files changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js index 50a4074e829f34..7b016e7a08ee72 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/index.js +++ b/packages/block-editor/src/components/spacing-sizes-control/index.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { __experimentalText as Text } from '@wordpress/components'; +import { BaseControl } from '@wordpress/components'; /** * Internal dependencies @@ -79,7 +79,9 @@ export default function SpacingSizesControl( { 'is-unlinked': ! isLinked, } ) } > - { label } + + { label } + { ! hasOneSide && ( ) } diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js index c0d2573b42e807..ce0dbd23bbfb1f 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js @@ -9,12 +9,12 @@ import classnames from 'classnames'; import { useState, useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { + BaseControl, Button, RangeControl, CustomSelectControl, __experimentalUnitControl as UnitControl, __experimentalHStack as HStack, - __experimentalText as Text, __experimentalUseCustomUnits as useCustomUnits, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, } from '@wordpress/components'; @@ -167,21 +167,21 @@ export default function SpacingInputControl( { <> { side !== 'all' && ( - + { LABELS[ side ] } - + { showHint && ( - + { currentValueHint } - + ) } ) } { side === 'all' && showHint && ( - + { currentValueHint } - + ) } { ! disableCustomSpacingSizes && ( diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index 187e950d323f8d..732e0c47a092a4 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -24,11 +24,8 @@ } &.is-unlinked { - .components-spacing-sizes-control__side-label { - margin-left: $grid-unit-10; - } .components-range-control.components-spacing-sizes-control__range-control { - margin: -$grid-unit-10 0 0 $grid-unit-10; + margin: -$grid-unit-10 0 0 0; } .components-unit-control-wrapper { margin: 0 0 $grid-unit-10 $grid-unit-10; @@ -36,14 +33,12 @@ } .components-spacing-sizes-control__hint-single { - margin-top: 0; - margin-left: 0; + margin: 0; } .components-spacing-sizes-control__hint-single, .components-spacing-sizes-control__hint-all { color: $gray-700; - font-size: 12px; } .components-spacing-sizes-control__hint-all { @@ -127,7 +122,7 @@ .components-spacing-sizes-control__side-label { grid-column: 1 / 1; justify-self: left; - font-size: 12px; + margin-bottom: 0; } .components-spacing-sizes-control__custom-select-control { From 44b5bff00c6ce64aedfcbcb4133191a8db91ec26 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 16 Sep 2022 16:12:27 +1200 Subject: [PATCH 3/8] Tweaks from code review --- .../spacing-sizes-control/style.scss | 27 +++++++------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index 732e0c47a092a4..ddb2eb6efb2832 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -19,23 +19,21 @@ .components-spacing-sizes-control__side-labels { grid-column: 1 / 1; - min-height: 30px; + margin-bottom: $grid-unit-10; justify-content: left; } + .components-spacing-sizes-control__side-label { + grid-column: 1 / 1; + justify-self: left; + } + &.is-unlinked { .components-range-control.components-spacing-sizes-control__range-control { - margin: -$grid-unit-10 0 0 0; - } - .components-unit-control-wrapper { - margin: 0 0 $grid-unit-10 $grid-unit-10; + margin: -$grid-unit-10 0 $grid-unit-20 0; } } - .components-spacing-sizes-control__hint-single { - margin: 0; - } - .components-spacing-sizes-control__hint-single, .components-spacing-sizes-control__hint-all { color: $gray-700; @@ -82,7 +80,6 @@ .components-spacing-sizes-control__custom-value-range { grid-column: span 2; margin-left: $grid-unit-10; - padding-right: $grid-unit-10; height: 30px; } @@ -92,8 +89,8 @@ .components-spacing-sizes-control__range-control { grid-column: span 3; - padding-right: $grid-unit-10; - height: 36px; + height: 40px; + margin-bottom: $grid-unit-20; } .components-range-control__wrapper { @@ -119,12 +116,6 @@ z-index: 3; } - .components-spacing-sizes-control__side-label { - grid-column: 1 / 1; - justify-self: left; - margin-bottom: 0; - } - .components-spacing-sizes-control__custom-select-control { grid-column: span 3; } From b724337b83d07f87e8da9ab6260cb4a27c7c70d0 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 23 Sep 2022 14:30:02 +1200 Subject: [PATCH 4/8] some more tweaks --- .../src/components/spacing-sizes-control/style.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index ddb2eb6efb2832..b01db2348605f7 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -17,26 +17,35 @@ align-self: center; } + .components-base-control__label { + margin-bottom: 0; + height: 16px; + } + .components-spacing-sizes-control__side-labels { grid-column: 1 / 1; - margin-bottom: $grid-unit-10; justify-content: left; + height: 16px; + margin-top: $grid-unit-05; + margin-bottom: $grid-unit-10; } .components-spacing-sizes-control__side-label { grid-column: 1 / 1; justify-self: left; + margin-bottom: 0; } &.is-unlinked { .components-range-control.components-spacing-sizes-control__range-control { - margin: -$grid-unit-10 0 $grid-unit-20 0; + margin: -$grid-unit-10 0 $grid-unit-10 0; } } .components-spacing-sizes-control__hint-single, .components-spacing-sizes-control__hint-all { color: $gray-700; + margin-bottom: 0; } .components-spacing-sizes-control__hint-all { From 3a4ee0bd5bc168945d2f79787ba853fa4c53d888 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 23 Sep 2022 14:44:13 +1200 Subject: [PATCH 5/8] more tweaks --- .../src/components/spacing-sizes-control/style.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index b01db2348605f7..8665bfda16cf28 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -2,6 +2,7 @@ display: grid; grid-template-columns: auto 1fr auto; grid-row-gap: $grid-unit-05; + align-items: center; } .component-spacing-sizes-control { @@ -26,8 +27,6 @@ grid-column: 1 / 1; justify-content: left; height: 16px; - margin-top: $grid-unit-05; - margin-bottom: $grid-unit-10; } .components-spacing-sizes-control__side-label { @@ -38,7 +37,7 @@ &.is-unlinked { .components-range-control.components-spacing-sizes-control__range-control { - margin: -$grid-unit-10 0 $grid-unit-10 0; + margin: 0 0 $grid-unit-10 0; } } From 0e5f43496868f347f1f16cccdf8c72cab008635f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 27 Sep 2022 10:42:26 +1300 Subject: [PATCH 6/8] More tweaks to layout --- .../src/components/spacing-sizes-control/style.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index 8665bfda16cf28..0b6941024d2c7d 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -1,7 +1,6 @@ .tools-panel-item-spacing { display: grid; grid-template-columns: auto 1fr auto; - grid-row-gap: $grid-unit-05; align-items: center; } @@ -27,6 +26,7 @@ grid-column: 1 / 1; justify-content: left; height: 16px; + margin-top: 12px; } .components-spacing-sizes-control__side-label { @@ -37,7 +37,7 @@ &.is-unlinked { .components-range-control.components-spacing-sizes-control__range-control { - margin: 0 0 $grid-unit-10 0; + margin-top: 12px; } } @@ -76,6 +76,8 @@ &.is-small.has-icon { padding: 0; min-width: $icon-size; + height: 16px; + margin-top: 12px; } } From 39bc3273ce08c3bee7a6e41e8a4661af888bbd6e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 28 Sep 2022 11:30:55 +1300 Subject: [PATCH 7/8] switch to using vars instead of fixed values --- .../spacing-sizes-control/style.scss | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index 0b6941024d2c7d..7806e4735b90f1 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -19,14 +19,14 @@ .components-base-control__label { margin-bottom: 0; - height: 16px; + height: $grid-unit-20; } .components-spacing-sizes-control__side-labels { grid-column: 1 / 1; justify-content: left; - height: 16px; - margin-top: 12px; + height: $grid-unit-20; + margin-top: $grid-unit-15; } .components-spacing-sizes-control__side-label { @@ -37,7 +37,7 @@ &.is-unlinked { .components-range-control.components-spacing-sizes-control__range-control { - margin-top: 12px; + margin-top: $grid-unit-15; } } @@ -60,6 +60,11 @@ grid-row: 1 / 1; justify-self: end; padding: 0; + &.is-small.has-icon { + padding: 0; + min-width: $icon-size; + height: $grid-unit-20; + } } .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all { @@ -69,15 +74,11 @@ .components-spacing-sizes-control__custom-toggle-single { grid-column: 3 / 3; justify-self: end; - } - - .components-spacing-sizes-control__custom-toggle-all, - .components-spacing-sizes-control__custom-toggle-single { &.is-small.has-icon { padding: 0; min-width: $icon-size; - height: 16px; - margin-top: 12px; + height: $grid-unit-20; + margin-top: $grid-unit-15; } } From d357d977a16bc79be8bd690201c18d22a894c276 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 29 Sep 2022 09:40:34 +1300 Subject: [PATCH 8/8] A few more tweaks from code review --- .../spacing-sizes-control/spacing-input-control.js | 1 + .../src/components/spacing-sizes-control/style.scss | 6 +----- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js index ce0dbd23bbfb1f..cf9a663fe1fa1e 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js @@ -256,6 +256,7 @@ export default function SpacingInputControl( { marks={ marks } label={ ariaLabel } hideLabelFromVision={ true } + __nextHasNoMarginBottom={ true } /> ) } { ! showRangeControl && ! showCustomValueControl && ( diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss index 7806e4735b90f1..27b83a9ba5ca81 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -2,6 +2,7 @@ display: grid; grid-template-columns: auto 1fr auto; align-items: center; + grid-template-rows: 25px auto; } .component-spacing-sizes-control { @@ -101,11 +102,6 @@ .components-spacing-sizes-control__range-control { grid-column: span 3; height: 40px; - margin-bottom: $grid-unit-20; - } - - .components-range-control__wrapper { - margin-bottom: 0; } .components-range-control__mark {