fix: add presets to contentHeight and innerBlockRowGap

Author: Arukuen

src/block-components/alignment/attributes.js

@@ -1,4 +1,8 @@
-export const addAttributes = attrObject => {
+import { deprecatedAddAttributes } from './deprecated/index'
+
+export const addAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
+	deprecatedAddAttributes( attrObject, attrNameTemplate )
+
 	// Assume that the block uses the BlockDiv Block Component and has a
 	// uniqueId attribute
 	attrObject.add( {
@@ -53,13 +57,26 @@ export const addAttributes = attrObject => {
 				type: 'number',
 				default: '',
 			},
+		},
+		versionAdded: '3.0.0',
+		versionDeprecated: '',
+	} )
+
+	attrObject.add( {
+		attributes: {
 			innerBlockRowGap: {
 				stkResponsive: true,
-				type: 'number',
+				type: 'string',
+				default: '',
+			},
+			containerHeight: {
+				stkResponsive: true,
+				type: 'string',
 				default: '',
 			},
 		},
-		versionAdded: '3.0.0',
+		attrNameTemplate,
+		versionAdded: '3.15.3',
 		versionDeprecated: '',
 	} )
 }

src/block-components/alignment/deprecated/index.js

@@ -0,0 +1,44 @@
+import { getAttrNameFunction } from '~stackable/util'
+
+export const deprecatedAddAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
+	attrObject.add( {
+		attributes: {
+			innerBlockRowGap: {
+				stkResponsive: true,
+				type: 'number',
+				default: '',
+			},
+		},
+		attrNameTemplate,
+		versionAdded: '3.0.0',
+		versionDeprecated: '3.15.3',
+	} )
+}
+
+export const deprecateInnerBlockRowGapAndContainerHeight = {
+	isEligible: attrNameTemplate => attributes => {
+		const getAttrName = getAttrNameFunction( attrNameTemplate )
+		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
+
+		const containerHeight = getAttribute( 'containerHeight' )
+		const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
+
+		return typeof containerHeight === 'number' || typeof innerBlockRowGap === 'number'
+	},
+	migrate: attrNameTemplate => attributes => {
+		const getAttrName = getAttrNameFunction( attrNameTemplate )
+		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
+
+		const containerHeight = getAttribute( 'containerHeight' )
+		const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
+
+		const newAttributes = {
+			...attributes,
+			[ getAttrName( 'containerHeight' ) ]: String( containerHeight ),
+			[ getAttrName( 'innerBlockRowGap' ) ]: String( innerBlockRowGap ),
+		}
+
+		return newAttributes
+	},
+}
+

src/block-components/alignment/edit.js

@@ -13,6 +13,7 @@ import {
 	useBlockAttributesContext,
 	useBlockSetAttributesContext,
 	useDeviceType,
+	usePresetControls,
 } from '~stackable/hooks'
 
 /**
@@ -86,6 +87,9 @@ export const Edit = memo( props => {
 		enableContentAlign = true,
 	} = props
 
+	const blockHeightMarks = usePresetControls( 'blockHeights' )?.getPresetMarks() || null
+	const spacingSizeMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
+
 	const containerSize = props.hasContainerSize && <>
 		<ControlSeparator />
 		{ props.hasContainerHeight &&
@@ -100,6 +104,7 @@ export const Edit = memo( props => {
 				allowReset={ true }
 				placeholder="0"
 				visualGuide={ { selector: '.stk-%s-container', highlight: 'outline' } }
+				marks={ blockHeightMarks }
 			/>
 		}
 		<AdvancedRangeControl
@@ -331,6 +336,7 @@ export const Edit = memo( props => {
 							highlight: 'row-gap',
 							value: innerBlockRowGap,
 						} }
+						marks={ spacingSizeMarks }
 					/>
 				}
 				{ ( innerBlockOrientation && innerBlockWrap === 'wrap' ) &&

src/block-components/alignment/index.js

@@ -4,6 +4,8 @@ import { addStyles } from './style'
 
 export * from './use-alignment'
 
+export { deprecateInnerBlockRowGapAndContainerHeight } from './deprecated/index'
+
 export const Alignment = () => {
 	return null
 }

src/block-components/alignment/style.js

@@ -211,8 +211,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		styleRule: 'columnGap',
 		attrName: 'innerBlockColumnGap',
 		key: 'innerBlockColumnGapEdit',
-		format: `%spx`,
 		responsive: 'all',
+		valueCallback: value => {
+			// Substitute with using format to work with preset controls
+			if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -225,8 +231,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		styleRule: 'columnGap',
 		attrName: 'innerBlockColumnGap',
 		key: 'innerBlockColumnGapSave',
-		format: `%spx`,
 		responsive: 'all',
+		valueCallback: value => {
+			// Substitute with using format to work with preset controls
+			if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
 		dependencies: [
 			'innerBlockOrientation',
@@ -241,12 +253,18 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		styleRule: 'rowGap',
 		attrName: 'innerBlockRowGap',
 		key: 'innerBlockRowGapEdit',
-		format: `%spx`,
 		responsive: 'all',
 		enabledCallback: getAttribute => {
 			return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
 				( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )
 		},
+		valueCallback: value => {
+			// Substitute with using format to work with preset controls
+			if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		dependencies: [
 			'innerBlockOrientation',
 			'innerBlockWrap',
@@ -259,8 +277,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		styleRule: 'rowGap',
 		attrName: 'innerBlockRowGap',
 		key: 'innerBlockRowGapSave',
-		format: `%spx`,
 		responsive: 'all',
+		valueCallback: value => {
+			// Substitute with using format to work with preset controls
+			if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		enabledCallback: getAttribute => {
 			return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
 			( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )

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

@@ -248,8 +248,15 @@ const AdvancedRangeControl = props => {
 		const currentSize = props.marks.find( mark => {
 			return derivedValue === mark.value
 		} )?.size
-		const [ _newValue, _unit ] = extractNumbersAndUnits( currentSize )[ 0 ]
-		rangeValue = _newValue
+		let [ _newValue, _unit ] = extractNumbersAndUnits( currentSize )[ 0 ]
+
+		// If the attribute has no support for rem or em, and the
+		// preset units is rem or em, convert to px
+		const converted = convertToPxIfUnsupported( props.units, _unit, _newValue )
+		_newValue = converted.value
+		_unit = converted.unit
+
+		rangeValue = parseFloat( _newValue )
 
 		if ( _unit && ! isConversionDone.current ) {
 			dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()

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

@@ -418,8 +418,15 @@ const FourRangeControl = memo( props => {
 			const currentSize = props.marks.find( mark => {
 				return initialValue === mark.value
 			} )?.size
-			const [ _newValue, _unit ] = extractNumbersAndUnits( currentSize )[ 0 ]
-			rangeValue = _newValue
+			let [ _newValue, _unit ] = extractNumbersAndUnits( currentSize )[ 0 ]
+
+			// If the attribute has no support for rem or em, and the
+			// preset units is rem or em, convert to px
+			const converted = convertToPxIfUnsupported( props.units, _unit, _newValue )
+			_newValue = converted.value
+			_unit = converted.unit
+
+			rangeValue = parseFloat( _newValue )
 
 			if ( _unit && conversionKey && ! isConversionDone.current[ conversionKey ] ) {
 				isConversionDone.current[ conversionKey ] = true