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 cf9a663fe1fa1..4a08bb9b3348a 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' } /> ) } 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 27b83a9ba5ca8..02731920c5e6f 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/style.scss +++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss @@ -2,7 +2,7 @@ display: grid; grid-template-columns: auto 1fr auto; align-items: center; - grid-template-rows: 25px auto; + grid-template-rows: 16px auto; } .component-spacing-sizes-control { @@ -27,7 +27,7 @@ grid-column: 1 / 1; justify-content: left; height: $grid-unit-20; - margin-top: $grid-unit-15; + margin-top: $grid-unit-20; } .components-spacing-sizes-control__side-label { @@ -37,8 +37,9 @@ } &.is-unlinked { - .components-range-control.components-spacing-sizes-control__range-control { - margin-top: $grid-unit-15; + .components-range-control.components-spacing-sizes-control__range-control, + .components-spacing-sizes-control__custom-value-input { + margin-top: $grid-unit-10; } } @@ -60,12 +61,7 @@ grid-column: 2 / 2; grid-row: 1 / 1; justify-self: end; - padding: 0; - &.is-small.has-icon { - padding: 0; - min-width: $icon-size; - height: $grid-unit-20; - } + margin-top: -4px; } .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all { @@ -75,33 +71,43 @@ .components-spacing-sizes-control__custom-toggle-single { grid-column: 3 / 3; justify-self: end; - &.is-small.has-icon { - padding: 0; - min-width: $icon-size; - height: $grid-unit-20; - margin-top: $grid-unit-15; - } + margin-top: $grid-unit-15; } .component-spacing-sizes-control__linked-button { grid-column: 3 / 3; grid-row: 1 / 1; justify-self: end; + line-height: 0; + margin-top: -4px; } .components-spacing-sizes-control__custom-value-range { grid-column: span 2; - margin-left: $grid-unit-10; - height: 30px; + margin-left: $grid-unit-20; + margin-top: 8px; } .components-spacing-sizes-control__custom-value-input { width: 124px; + margin-top: 8px; + } + + .components-range-control { + height: 40px; + /* Vertically center the RangeControl until it has true 40px height. */ + display: flex; + align-items: center; + + > .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 { @@ -125,5 +131,6 @@ .components-spacing-sizes-control__custom-select-control { grid-column: span 3; + margin-top: $grid-unit-10; } }