fix: add inner column spacing presets

Author: Arukuen

src/block-components/columns/attributes.js

@@ -5,12 +5,6 @@ export const addAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
 
 	attrObject.add( {
 		attributes: {
-			columnSpacing: {
-				stkResponsive: true,
-				stkUnits: 'px',
-				type: 'number',
-				default: '',
-			},
 			columnWrapDesktop: { // Only applies to desktops
 				type: 'boolean',
 				default: false,
@@ -32,6 +26,12 @@ export const addAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
 				type: 'string',
 				default: '',
 			},
+			columnSpacing: {
+				stkResponsive: true,
+				stkUnits: 'px',
+				type: 'string',
+				default: '',
+			},
 		},
 		attrNameTemplate,
 		versionAdded: '3.15.3',

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

@@ -13,6 +13,12 @@ export const deprecatedAddAttributes = ( attrObject, attrNameTemplate = '%s' ) =
 				type: 'number',
 				default: '',
 			},
+			columnSpacing: {
+				stkResponsive: true,
+				stkUnits: 'px',
+				type: 'number',
+				default: '',
+			},
 		},
 		attrNameTemplate,
 		versionAdded: '3.0.0',
@@ -25,20 +31,23 @@ export const deprecateColumnAndRowGap = {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
+		const columnSpacing = getAttribute( 'columnSpacing' )
 		const columnGap = getAttribute( 'columnGap' )
 		const rowGap = getAttribute( 'rowGap' )
 
-		return typeof columnGap === 'number' || typeof rowGap === 'number'
+		return typeof columnSpacing === 'number' || typeof columnGap === 'number' || typeof rowGap === 'number'
 	},
 	migrate: attrNameTemplate => attributes => {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
+		const columnSpacing = getAttribute( 'columnSpacing' )
 		const columnGap = getAttribute( 'columnGap' )
 		const rowGap = getAttribute( 'rowGap' )
 
 		const newAttributes = {
 			...attributes,
+			[ getAttrName( 'columnSpacing' ) ]: String( columnSpacing ),
 			[ getAttrName( 'columnGap' ) ]: String( columnGap ),
 			[ getAttrName( 'rowGap' ) ]: String( rowGap ),
 		}

src/block-components/columns/edit.js

@@ -270,6 +270,7 @@ export const Controls = props => {
 							// Add a working video
 							description: __( 'Sets column paddings, the space inside the block between the block elements and the column container border', i18n ),
 						} }
+						marks={ presetMarks }
 					/>
 					<AdvancedRangeControl
 						label={ __( 'Column Gap', i18n ) }

src/block-components/columns/style.js

@@ -20,8 +20,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		selector: '.%s-column',
 		styleRule: '--stk-columns-spacing',
 		attrName: 'columnSpacing',
-		hasUnits: 'px',
 		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'
+		},
 	} ] )
 
 	blockStyleGenerator.addBlockStyles( 'columnGap', [ {