Merge branch 'feat/size-control-steps' into feat/new-design-library

Author: kaeizen

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/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.15.3',
 		versionDeprecated: '',
 	} )
 }

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

@@ -0,0 +1,57 @@
+import { getAttrNameFunction } from '~stackable/util'
+
+export const deprecatedAddAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
+	attrObject.add( {
+		attributes: {
+			columnGap: {
+				stkResponsive: true,
+				type: 'number',
+				default: '',
+			},
+			rowGap: {
+				stkResponsive: true,
+				type: 'number',
+				default: '',
+			},
+			columnSpacing: {
+				stkResponsive: true,
+				stkUnits: 'px',
+				type: 'number',
+				default: '',
+			},
+		},
+		attrNameTemplate,
+		versionAdded: '3.0.0',
+		versionDeprecated: '3.15.3',
+	} )
+}
+
+export const deprecateColumnAndRowGap = {
+	isEligible: attrNameTemplate => attributes => {
+		const getAttrName = getAttrNameFunction( attrNameTemplate )
+		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
+
+		const columnSpacing = getAttribute( 'columnSpacing' )
+		const columnGap = getAttribute( 'columnGap' )
+		const rowGap = getAttribute( 'rowGap' )
+
+		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 ),
+		}
+
+		return newAttributes
+	},
+}

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 /> }
@@ -267,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 ) }
@@ -284,6 +288,7 @@ export const Controls = props => {
 							video: 'column-gap',
 							description: __( 'Sets the distance between two or more columns', i18n ),
 						} }
+						marks={ presetMarks }
 					/>
 					<AdvancedRangeControl
 						label={ __( 'Row Gap', i18n ) }
@@ -296,6 +301,7 @@ export const Controls = props => {
 							// TODO: Add a working video
 							description: __( 'Sets the distance between two or more columns', i18n ),
 						} }
+						marks={ presetMarks }
 					/>
 				</>
 			) }

src/block-components/columns/index.js

@@ -6,6 +6,8 @@ export const Columns = () => {
 	return null
 }
 
+export { deprecateColumnAndRowGap } from './deprecated/index'
+
 Columns.InspectorControls = Edit
 
 Columns.addStyles = addStyles

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', [ {
@@ -30,16 +36,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 ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				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 ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 	} ] )
 
 	blockStyleGenerator.addBlockStyles( 'columnWrapDesktop', [ {
@@ -78,16 +95,26 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 			selector: '.%s-column',
 			styleRule: 'rowGap',
 			attrName: 'rowGap',
-			format: '%spx',
 			responsive: 'all',
+			valueCallback: value => {
+				if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+					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 ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+					return value
+				}
+				return value + 'px'
+			},
 		} ] )
 	}