feat: size and spacing steps

Author: [email protected]

src/components/advanced-range-control/editor.scss

@@ -46,4 +46,29 @@
 	.components-number-control {
 		width: unset;
 	}
+
+	// For displaying marks
+	.components-range-control__thumb-wrapper {
+		z-index: 2;
+	}
+	.components-range-control__mark {
+		background: var(--stk-skin-bg-default) !important;
+		z-index: 1;
+		transform: translateX(-50%);
+		width: 3px;
+	}
+	.components-range-control__root {
+		min-height: 35px;
+	}
+	.stk-range-control__custom-button {
+		margin-inline-start: 8px;
+		top: -1px;
+		position: relative;
+	}
+}
+.stk-range-control--with-marks.stk-range-control--mark-mode .components-range-control__wrapper {
+	margin-inline-end: 8px;
+}
+.stk-range-control--with-marks.stk-range-control--mark-mode .components-range-control__wrapper:first-child:last-child {
+	top: -1px;
 }

src/components/advanced-range-control/index.js

@@ -10,6 +10,7 @@ import {
 	useAttributeName,
 	useBlockAttributesContext,
 	useBlockHoverState,
+	useBlockSetAttributesContext,
 	useDeviceType,
 } from '~stackable/hooks'
 
@@ -21,7 +22,10 @@ import { isEqual } from 'lodash'
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element'
+import { memo, useState } from '@wordpress/element'
+import { Button } from '@wordpress/components'
+import { settings } from '@wordpress/icons'
+import { dispatch } from '@wordpress/data'
 
 const AdvancedRangeControl = props => {
 	const [ value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback )
@@ -30,6 +34,7 @@ const AdvancedRangeControl = props => {
 	const deviceType = useDeviceType()
 	const [ currentHoverState ] = useBlockHoverState()
 	const hasUnits = !! props.units?.length
+	const setAttributes = useBlockSetAttributesContext()
 	const unitAttrName = useAttributeName( `${ props.attribute }Unit`, props.responsive, props.hover )
 	const {
 		unitAttribute,
@@ -98,12 +103,28 @@ const AdvancedRangeControl = props => {
 		placeholderRender = null
 	}
 
+	// Is value at first render the same as a step value?
+	const isMarkValue = props.marks && true
+	const [ isMarkMode, setIsMarkMode ] = useState( isMarkValue )
+
 	// If this supports dynamic content, then the value should be saved as a String.
 	// Important, the attribute type for this option should be a string.
 	const _onChange = value => {
 		const onChangeFunc = typeof props.onChange === 'undefined' ? onChange : props.onChange
 		let newValue = props.isDynamic ? value.toString() : value
 
+		// Support for steps. For steps, the value is an index, but the actual value is in the marks.
+		if ( newValue !== '' && isMarkMode && props.marks ) {
+			// Extract the unit and value.
+			const markValue = props.marks[ value ]?.value || '0'
+			const [ _newValue, unit ] = extractNumberAndUnit( markValue )
+			newValue = _newValue
+
+			// Update the unit.
+			dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
+			setAttributes( { [ unitAttrName ]: unit } )
+		}
+
 		// On reset, allow overriding the value.
 		if ( newValue === '' ) {
 			const overrideValue = props.onOverrideReset?.()
@@ -121,6 +142,45 @@ const AdvancedRangeControl = props => {
 		onChange: _onChange,
 	} )
 
+	// Support for steps. Modify the props to make the range control show steps.
+	if ( props.marks && isMarkMode ) {
+		// Steps only have 1 increment values
+		propsToPass.min = 0
+		propsToPass.min = 0
+		propsToPass.max = props.marks.length - 1
+		propsToPass.sliderMax = props.marks.length - 1
+		propsToPass.step = 1
+
+		// Show the marks and labels
+		propsToPass.marks = props.marks.reduce( ( acc, mark, index ) => {
+			return [
+				{
+					value: index,
+					label: undefined,
+				},
+				...acc,
+			]
+		}, [] )
+		propsToPass.renderTooltipContent = value => {
+			return props.marks[ value ]?.label || ''
+		}
+
+		// Other necessary props for steps.
+		propsToPass.withInputField = false
+	} else {
+		propsToPass.marks = undefined
+	}
+
+	if ( props.marks ) {
+		controlProps.className = controlProps.className || ''
+		controlProps.className += 'stk-range-control--with-marks'
+		controlProps.className += isMarkMode ? ' stk-range-control--mark-mode' : ''
+	}
+
+	if ( isMarkMode ) {
+		controlProps.units = false
+	}
+
 	return (
 		<AdvancedControl { ...controlProps }>
 			<DynamicContentControl
@@ -134,7 +194,19 @@ const AdvancedRangeControl = props => {
 					onChange={ _onChange }
 					allowReset={ false }
 					placeholderRender={ placeholderRender }
-				/>
+					__nextHasNoMarginBottom
+				>
+					{ props.allowCustom && props.marks && (
+						<Button
+							className="stk-range-control__custom-button"
+							size="small"
+							variant="tertiary"
+							onClick={ () => setIsMarkMode( ! isMarkMode ) }
+							icon={ settings }
+						>
+						</Button>
+					) }
+				</RangeControl>
 			</DynamicContentControl>
 			<ResetButton
 				allowReset={ props.allowReset }
@@ -159,6 +231,20 @@ AdvancedRangeControl.defaultProps = {
 	onChange: undefined,
 	onOverrideReset: undefined,
 	forcePlaceholder: false,
+
+	marks: undefined, // [{ value: '14px', label: 'S' }, { value: '16px', label: 'M' }]
+	allowCustom: true,
 }
 
 export default memo( AdvancedRangeControl, isEqual )
+
+// The value can be in the format '10px' or '10.0em' or '10rem'.
+// Return an array with the number and the unit.
+const extractNumberAndUnit = value => {
+	// Match the last characters that are not numbers.
+	const matches = value.match( /([\d.]+)(\D*)$/ )
+	if ( ! matches ) {
+		return [ value, '' ]
+	}
+	return [ matches[ 1 ], matches[ 2 ] ]
+}

src/components/advanced-range-control/range-control.js

@@ -43,6 +43,7 @@ const StackableRangeControl = memo( props => {
 		isShiftStepEnabled,
 		placeholderRender,
 		defaultValue: _defaultValue, // Don't pass this.
+		children: _children, // Don't pass this.
 		...propsToPass
 	} = props
 
@@ -178,6 +179,7 @@ const StackableRangeControl = memo( props => {
 				type="text"
 			/>
 		) }
+		{ _children }
 		{ allowReset &&
 			<Button
 				className="components-range-control__reset"