diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index 5cf4a8b382f99..e57b54bd32c82 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -20,7 +20,8 @@ // Reset unwanted margin-bottom from being applied to BaseControls within certain components. .components-focal-point-picker-control, - .components-query-controls { + .components-query-controls, + .components-range-control { .components-base-control { margin-bottom: 0; } diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index d5a692350993f..e8f3683e4d95f 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -303,6 +303,7 @@ export default function CoverInspectorControls( { max={ 100 } step={ 10 } required + __next40pxDefaultSize /> diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6409ce7515646..19182873e3828 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - `SelectControl`: Added option to set hidden options. ([#51545](https://github.com/WordPress/gutenberg/pull/51545)) - `UnitControl`: Revamp support for changing unit by typing ([#39303](https://github.com/WordPress/gutenberg/pull/39303)). +- `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)). - `Modal`: Update corner radius to be between buttons and the site view frame, in a 2-4-8 system. ([#51254](https://github.com/WordPress/gutenberg/pull/51254)). - `Button`: Introduce `size` prop with `default`, `compact`, and `small` variants ([#51842](https://github.com/WordPress/gutenberg/pull/51842)). - `ItemGroup`: Update button focus state styles to be inline with other button focus states in the editor. ([#51576](https://github.com/WordPress/gutenberg/pull/51576)). diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx index b2ab417d18af2..d2ce9d8ed7d01 100644 --- a/packages/components/src/number-control/index.tsx +++ b/packages/components/src/number-control/index.tsx @@ -60,7 +60,6 @@ function UnforwardedNumberControl( } ); spinControls = 'none'; } - const inputRef = useRef< HTMLInputElement >(); const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] ); diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 928595132e254..19630e39f6bfe 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -37,6 +37,7 @@ import { import type { RangeControlProps } from './types'; import type { WordPressComponentProps } from '../ui/context'; +import { space } from '../ui/utils/space'; const noop = () => {}; @@ -69,6 +70,7 @@ function UnforwardedRangeControl( railColor, renderTooltipContent = ( v ) => v, resetFallbackValue, + __next40pxDefaultSize = false, shiftStep = 10, showTooltip: showTooltipProp, step = 1, @@ -208,7 +210,6 @@ function UnforwardedRangeControl( const offsetStyle = { [ isRTL() ? 'right' : 'left' ]: fillValueOffset, }; - return ( - + { beforeIcon && ( @@ -305,6 +309,14 @@ function UnforwardedRangeControl( onBlur={ handleOnInputNumberBlur } onChange={ handleOnChange } shiftStep={ shiftStep } + size={ + __next40pxDefaultSize + ? '__unstable-large' + : 'default' + } + __unstableInputWidth={ + __next40pxDefaultSize ? space( 20 ) : space( 16 ) + } step={ step } // @ts-expect-error TODO: Investigate if the `null` value is necessary value={ inputSliderValue } diff --git a/packages/components/src/range-control/input-range.tsx b/packages/components/src/range-control/input-range.tsx index 3b663309918ae..1daa351444686 100644 --- a/packages/components/src/range-control/input-range.tsx +++ b/packages/components/src/range-control/input-range.tsx @@ -16,7 +16,6 @@ function InputRange( ref: React.ForwardedRef< HTMLInputElement > ) { const { describedBy, label, value, ...otherProps } = props; - return ( css( { height: rangeHeightValue, minHeight: rangeHeightValue } ); const thumbSize = 12; -export const Root = styled.div` +const deprecatedHeight = ( { + __next40pxDefaultSize, +}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) => + ! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } ); + +type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >; +export const Root = styled.div< RootProps >` -webkit-tap-highlight-color: transparent; - align-items: flex-start; + align-items: center; display: flex; justify-content: flex-start; padding: 0; position: relative; touch-action: none; width: 100%; + min-height: 40px; + /* TODO: remove after removing the __next40pxDefaultSize prop */ + ${ deprecatedHeight }; `; const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) => @@ -296,7 +306,6 @@ export const InputNumber = styled( NumberControl )` display: inline-block; font-size: 13px; margin-top: 0; - width: ${ space( 16 ) } !important; input[type='number']& { ${ rangeHeight }; diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts index 6d7d95a2e2bf4..4f7c5571fde9c 100644 --- a/packages/components/src/range-control/types.ts +++ b/packages/components/src/range-control/types.ts @@ -203,6 +203,12 @@ export type RangeControlProps = Pick< * @default 10 */ shiftStep?: number; + /** + * Start opting into the larger default height that will become the default size in a future version. + * + * @default false + */ + __next40pxDefaultSize?: boolean; /** * Forcing the Tooltip UI to show or hide. This is overridden to `false` * when `step` is set to the special string value `any`.