feat: size and spacing steps

e2e/tests/global-settings.spec.ts

@@ -85,26 +85,26 @@ test.describe( 'Global Settings', () => {
 		await page.getByLabel( 'Stackable Settings' ).click()
 		await page.getByRole( 'button', { name: 'Global Typography' } ).click()
 
-		// Set Global Typography Styles of Heading 2 to have a font-size of 32
+		// Set Global Typography Styles of Heading 2 to have a text-transform uppercase
 		await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
-		await page.locator( '.stk-popover .components-base-control:nth-of-type(2)', { hasText: /Size/ } ).getByRole( 'textbox' ).fill( '32' )
+		await page.locator( '.stk-popover .components-base-control:nth-of-type(4)', { hasText: /Transform/ } ).getByRole( 'listbox' ).selectOption( 'uppercase' )
 		await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
 
-		// Verify if the Heading 2 in Global Typography Styles has correct font size
-		await expect( page.getByRole( 'heading', { name: 'Heading 2' } ) ).toHaveCSS( 'font-size', '32px' )
+		// Verify if the Heading 2 in Global Typography Styles has correct text-transform
+		await expect( page.getByRole( 'heading', { name: 'Heading 2' } ) ).toHaveCSS( 'text-transform', 'uppercase' )
 
 		// Open Block Settings
 		await page.getByLabel( 'Settings', { exact: true } ).click()
 
-		// Check if the added Stackable Heading Block has a font-size of 32
+		// Check if the added Stackable Heading Block has a text-transform uppercase
 		editor.insertBlock( {
 			name: 'stackable/heading',
 			attributes: {
 				text: 'test',
 			},
 		} )
 
-		await expect( editor.canvas.locator( '[data-type="stackable/heading"] > .stk-block-heading > h2[role="textbox"]' ) ).toHaveCSS( 'font-size', '32px' )
+		await expect( editor.canvas.locator( '[data-type="stackable/heading"] > .stk-block-heading > h2[role="textbox"]' ) ).toHaveCSS( 'text-transform', 'uppercase' )
 
 		// Reset Global Typography Styles
 		await page.getByLabel( 'Stackable Settings' ).click()

plugin.php

@@ -6,7 +6,7 @@
  * Author: Gambit Technologies, Inc
  * Author URI: http://gambit.ph
  * Text Domain: stackable-ultimate-gutenberg-blocks
- * Version: 3.15.3
+ * Version: 3.16.0
  *
  * @package Stackable
  */
@@ -24,7 +24,7 @@
 
 defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true );
 defined( 'STACKABLE_BUILD' ) || define( 'STACKABLE_BUILD', 'free' );
-defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.15.3' );
+defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.16.0' );
 defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ );
 defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug.
 defined( 'STACKABLE_DESIGN_LIBRARY_URL' ) || define( 'STACKABLE_DESIGN_LIBRARY_URL', 'https://storage.googleapis.com/stackable-plugin-assets' ); // Design Library CDN URL
@@ -235,6 +235,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/index.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/preset-controls/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );

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.16.0',
 		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.16.0',
+	} )
+}
+
+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/block-components/block-div/deprecated.js

@@ -1,4 +1,6 @@
-import { deprecationBackgrounColorOpacity, deprecateShadowColor } from '../helpers'
+import {
+	deprecationBackgrounColorOpacity, deprecateShadowColor, deprecateSizeControlHeight,
+} from '../helpers'
 
 import { addFilter } from '@wordpress/hooks'
 import { semverCompare } from '~stackable/util'
@@ -38,3 +40,12 @@ export const deprecateBlockShadowColor = {
 		return deprecateShadowColor.migrate( 'block%s' )( attributes )
 	},
 }
+
+export const deprecateBlockHeight = {
+	isEligible: attributes => {
+		return deprecateSizeControlHeight.isEligible( 'block%s' )( attributes )
+	},
+	migrate: attributes => {
+		return deprecateSizeControlHeight.migrate( 'block%s' )( attributes )
+	},
+}

src/block-components/block-div/index.js

@@ -18,7 +18,9 @@ import { CustomAttributes } from '../custom-attributes'
 import { version as VERSION } from 'stackable'
 
 export { useUniqueId }
-export { deprecateBlockBackgroundColorOpacity, deprecateBlockShadowColor } from './deprecated'
+export {
+	deprecateBlockBackgroundColorOpacity, deprecateBlockShadowColor, deprecateBlockHeight,
+} from './deprecated'
 
 export const BlockDiv = memo( props => {
 	const {

src/block-components/button/edit.js

@@ -12,7 +12,9 @@ import {
 	AdvancedSelectControl,
 } from '~stackable/components'
 import { i18n } from 'stackable'
-import { useBlockAttributesContext, useBlockLayoutDefaults } from '~stackable/hooks'
+import {
+	useBlockAttributesContext, useBlockLayoutDefaults, usePresetControls,
+} from '~stackable/hooks'
 
 /**
  * WordPress dependencies
@@ -185,6 +187,9 @@ const SizeControls = props => {
 	const { getPlaceholder } = useBlockLayoutDefaults()
 
 	const buttonPaddingPlaceholder = getPlaceholder( paddingPlaceholderName, { single: false } )
+
+	const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
+
 	return ( <>
 		{ props.hasFullWidth && (
 			<AdvancedToggleControl
@@ -228,6 +233,7 @@ const SizeControls = props => {
 				title: __( 'Button padding', i18n ),
 				description: __( 'Adjusts the space between the button text and button borders', i18n ),
 			} }
+			marks={ presetMarks }
 		/>
 	</> )
 }

src/block-components/columns/attributes.js

@@ -1,28 +1,40 @@
-export const addAttributes = attrObject => {
+import { deprecatedAddAttributes } from './deprecated/index'
+
+export const addAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
+	deprecatedAddAttributes( attrObject, attrNameTemplate )
+
 	attrObject.add( {
 		attributes: {
-			columnSpacing: {
-				stkResponsive: true,
-				stkUnits: 'px',
-				type: 'number',
-				default: '',
+			columnWrapDesktop: { // Only applies to desktops
+				type: 'boolean',
+				default: false,
 			},
+		},
+		versionAdded: '3.0.0',
+		versionDeprecated: '',
+	} )
+
+	attrObject.add( {
+		attributes: {
 			columnGap: {
 				stkResponsive: true,
-				type: 'number',
+				type: 'string',
 				default: '',
 			},
 			rowGap: {
 				stkResponsive: true,
-				type: 'number',
+				type: 'string',
 				default: '',
 			},
-			columnWrapDesktop: { // Only applies to desktops
-				type: 'boolean',
-				default: false,
+			columnSpacing: {
+				stkResponsive: true,
+				stkUnits: 'px',
+				type: 'string',
+				default: '',
 			},
 		},
-		versionAdded: '3.0.0',
+		attrNameTemplate,
+		versionAdded: '3.16.0',
 		versionDeprecated: '',
 	} )
 }