From 623187f79b2199725995951ad4a6a3430451509b Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 11 Oct 2022 15:42:02 +1000 Subject: [PATCH 1/3] Spacing Sizes Control: Try improving layout spacing --- .../spacing-input-control.js | 1 + .../spacing-sizes-control/style.scss | 44 +++++++++++-------- 2 files changed, 26 insertions(+), 19 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 cf9a663fe1fa1e..1c37931d59041b 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 @@ -221,6 +221,7 @@ export default function SpacingInputControl( { hideLabelFromVision={ true } className="components-spacing-sizes-control__custom-value-input" style={ { gridColumn: '1' } } + size={ '__unstable-large' } /> .components-base-control__field { + /* Fixes RangeControl contents when the outer wrapper is flex */ + flex: 1; + } } .components-spacing-sizes-control__range-control { grid-column: span 3; - height: 40px; + margin-top: 8px; } .components-range-control__mark { From 7217b357ec6438484bc1b192c360ce08cc0d1eb3 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 11 Oct 2022 17:00:46 +1000 Subject: [PATCH 2/3] Provide 16px gap between unit and range control --- .../src/components/spacing-sizes-control/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c4ac38d9766ded..c45d34bfb1c157 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -84,7 +84,7 @@ .components-spacing-sizes-control__custom-value-range { grid-column: span 2; - margin-left: $grid-unit-15; + margin-left: $grid-unit-20; margin-top: 8px; } From c529de622ebecb2bf475bb50b2d0ccc3a181a44c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 11 Oct 2022 20:17:40 +1000 Subject: [PATCH 3/3] Update custom select list size and spacing --- .../components/spacing-sizes-control/spacing-input-control.js | 1 + .../block-editor/src/components/spacing-sizes-control/style.scss | 1 + 2 files changed, 2 insertions(+) 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 1c37931d59041b..4a08bb9b3348a7 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 @@ -280,6 +280,7 @@ export default function SpacingInputControl( { label={ ariaLabel } hideLabelFromVision={ true } __nextUnconstrainedWidth={ true } + size={ '__unstable-large' } /> ) } 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 c45d34bfb1c157..02731920c5e6ff 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -131,5 +131,6 @@ .components-spacing-sizes-control__custom-select-control { grid-column: span 3; + margin-top: $grid-unit-10; } }