feat: add row and column gap

Author: Arukuen

src/block-components/columns/attributes.js

@@ -9,12 +9,12 @@ export const addAttributes = attrObject => {
 			},
 			columnGap: {
 				stkResponsive: true,
-				type: 'number',
+				type: 'string',
 				default: '',
 			},
 			rowGap: {
 				stkResponsive: true,
-				type: 'number',
+				type: 'string',
 				default: '',
 			},
 			columnWrapDesktop: { // Only applies to desktops

src/block-components/columns/edit.js

@@ -23,6 +23,7 @@ import {
 	useBlockSetAttributesContext,
 	useDeviceType,
 	useBlockLayoutDefaults,
+	usePresetControls,
 } from '~stackable/hooks'
 import { range } from 'lodash'
 
@@ -124,6 +125,8 @@ export const Controls = props => {
 		: deviceType === 'Tablet' ? ( attributes.columnArrangementTablet || defaultArrangement )
 			: ( attributes.columnArrangementMobile || defaultArrangement )
 
+	const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
+
 	return (
 		<>
 			{ props.hasColumnsControl && <ColumnsControl /> }
@@ -284,6 +287,8 @@ export const Controls = props => {
 							video: 'column-gap',
 							description: __( 'Sets the distance between two or more columns', i18n ),
 						} }
+						marks={ presetMarks }
+						hasCSSVariableValue={ true }
 					/>
 					<AdvancedRangeControl
 						label={ __( 'Row Gap', i18n ) }
@@ -296,6 +301,8 @@ export const Controls = props => {
 							// TODO: Add a working video
 							description: __( 'Sets the distance between two or more columns', i18n ),
 						} }
+						marks={ presetMarks }
+						hasCSSVariableValue={ true }
 					/>
 				</>
 			) }

src/block-components/columns/style.js

@@ -30,16 +30,27 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		selector: '.%s-column',
 		styleRule: '--stk-column-gap',
 		attrName: 'columnGap',
-		format: '%spx',
 		responsive: 'all',
+		valueCallback: value => {
+			// Substitute with using format to work with preset controls
+			if ( value.startsWith( 'var(--stk' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 	}, {
 		...propsToPass,
 		renderIn: 'edit',
 		selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
 		styleRule: '--stk-column-gap',
 		attrName: 'columnGap',
-		format: '%spx',
 		responsive: 'all',
+		valueCallback: value => {
+			if ( value.startsWith( 'var(--stk' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 	} ] )
 
 	blockStyleGenerator.addBlockStyles( 'columnWrapDesktop', [ {
@@ -78,16 +89,26 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 			selector: '.%s-column',
 			styleRule: 'rowGap',
 			attrName: 'rowGap',
-			format: '%spx',
 			responsive: 'all',
+			valueCallback: value => {
+				if ( value.startsWith( 'var(--stk' ) ) {
+					return value
+				}
+				return value + 'px'
+			},
 		}, {
 			...propsToPass,
 			renderIn: 'edit',
 			selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
 			styleRule: 'rowGap',
 			attrName: 'rowGap',
-			format: '%spx',
 			responsive: 'all',
+			valueCallback: value => {
+				if ( value.startsWith( 'var(--stk' ) ) {
+					return value
+				}
+				return value + 'px'
+			},
 		} ] )
 	}