feat: add blockHeight and borderRadius

Author: Arukuen

src/block-components/helpers/borders/edit.js

@@ -15,7 +15,7 @@ import {
 import { Fragment } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import {
-	useAttributeEditHandlers, useBlockLayoutDefaults, useBlockSetAttributesContext,
+	useAttributeEditHandlers, useBlockLayoutDefaults, useBlockSetAttributesContext, usePresetControls,
 } from '~stackable/hooks'
 import { applyFilters } from '@wordpress/hooks'
 
@@ -71,6 +71,8 @@ export const BorderControls = props => {
 
 	applyFilters( 'stackable.block-component.helpers.borders', null, getAttribute, updateAttributes )
 
+	const presetMarks = usePresetControls( 'borderRadius' )?.getPresetMarks() || null
+
 	return (
 		<Fragment>
 			{ props.hasBorderType &&
@@ -132,6 +134,8 @@ export const BorderControls = props => {
 					isCorner={ true }
 					sliderMax={ props.borderSliderMax }
 					placeholder={ props.borderRadiusPlaceholder }
+					marks={ presetMarks }
+					hasCSSVariableValue={ true }
 				/>
 			}
 			<ShadowControl

src/block-components/helpers/borders/style.js

@@ -36,7 +36,14 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrName: 'borderRadius2',
 		key: 'borderTopLeftRadius2',
 		attrNameTemplate,
-		format: '%spx',
+		valueCallback: value => {
+			// Substitute with using format to work with preset controls
+			value = typeof value === 'number' ? value.toString() : value
+			if ( value.startsWith( 'var(--stk' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		responsive: 'all',
 		hover: 'all',
 		valuePreCallback: value => value?.top,
@@ -48,7 +55,13 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrName: 'borderRadius2',
 		key: 'borderTopRightRadius2',
 		attrNameTemplate,
-		format: '%spx',
+		valueCallback: value => {
+			value = typeof value === 'number' ? value.toString() : value
+			if ( value.startsWith( 'var(--stk' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		responsive: 'all',
 		hover: 'all',
 		valuePreCallback: value => value?.right,
@@ -60,7 +73,13 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrName: 'borderRadius2',
 		key: 'borderBottomRightRadius2',
 		attrNameTemplate,
-		format: '%spx',
+		valueCallback: value => {
+			value = typeof value === 'number' ? value.toString() : value
+			if ( value.startsWith( 'var(--stk' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		responsive: 'all',
 		hover: 'all',
 		valuePreCallback: value => value?.left,
@@ -72,7 +91,13 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrName: 'borderRadius2',
 		key: 'borderBottomLeftRadius2',
 		attrNameTemplate,
-		format: '%spx',
+		valueCallback: value => {
+			value = typeof value === 'number' ? value.toString() : value
+			if ( value.startsWith( 'var(--stk' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 		responsive: 'all',
 		hover: 'all',
 		valuePreCallback: value => value?.bottom,

src/block-components/helpers/size/attributes.js

@@ -2,7 +2,7 @@ export const sizeAttributes = {
 	height: {
 		stkResponsive: true,
 		stkUnits: 'px',
-		type: 'number',
+		type: 'string',
 		default: '',
 	},
 	width: {

src/block-components/helpers/size/edit.js

@@ -17,41 +17,6 @@ import {
 import { __ } from '@wordpress/i18n'
 import { getAttributeNameFunc } from '~stackable/util'
 
-const HEIGHT_PRESET = [
-	{
-		value: '64px',
-		label: 'XS',
-	},
-	{
-		value: '128px',
-		label: 'S',
-	},
-	{
-		value: '192px',
-		label: 'M',
-	},
-	{
-		value: '256px',
-		label: 'L',
-	},
-	{
-		value: '384px',
-		label: 'XL',
-	},
-	{
-		value: '512px',
-		label: '2XL',
-	},
-	{
-		value: '640px',
-		label: '3XL',
-	},
-	{
-		value: '100vh',
-		label: 'Full',
-	},
-]
-
 const Layout = props => {
 	const deviceType = useDeviceType()
 
@@ -67,7 +32,7 @@ const Layout = props => {
 		labelVerticalAlign = __( 'Content Vertical Align', i18n ),
 	} = props.labels
 
-	const heightMarks = HEIGHT_PRESET
+	const presetMarks = usePresetControls( 'blockHeights' )?.getPresetMarks() || null
 
 	return (
 		<>
@@ -86,7 +51,8 @@ const Layout = props => {
 					description: __( 'Adjusts the minimum allowable height of the block', i18n ),
 				} }
 				visualGuide={ props.visualGuide }
-				marks={ heightMarks }
+				marks={ presetMarks }
+				hasCSSVariableValue={ true }
 			/> }
 
 			{ props.hasContentVerticalAlign &&

src/hooks/use-preset-controls.js

@@ -11,6 +11,14 @@ const PRESET_MAPPING = {
 		settings: [ 'spacing', 'spacingSizes' ],
 		prefix: 'spacing-size',
 	},
+	blockHeights: {
+		settings: [ 'blockHeights' ],
+		prefix: 'block-height',
+	},
+	borderRadius: {
+		settings: [ 'borderRadius' ],
+		prefix: 'border-radius',
+	},
 }
 
 export const usePresetControls = property => {

src/plugins/global-settings/preset-controls/index.php

@@ -23,6 +23,14 @@ class Stackable_Size_And_Spacing_Preset_Controls {
 				'settings' => array( 'spacing', 'spacingSizes' ),
 				'prefix' => 'spacing-size',
 			),
+			'blockHeights' => array(
+				'settings' => array( 'blockHeights' ),
+				'prefix' => 'block-height',
+			),
+			'borderRadius' => array(
+				'settings' => array( 'borderRadius' ),
+				'prefix' => 'border-radius',
+			),
 		);
 
 		public $custom_presets;

src/plugins/global-settings/preset-controls/presets.json

@@ -92,6 +92,90 @@
                     "slug": "xxxxx-large"
                 }
             ]
-        }
-   }
+        },
+		"blockHeights": [
+			{
+				"name": "XS",
+				"size": "4rem",
+				"slug": "x-small"
+			},
+			{
+				"name": "S",
+				"size": "8rem",
+				"slug": "small"
+			},
+			{
+				"name": "M",
+				"size": "12rem",
+				"slug": "medium"
+			},
+			{
+				"name": "L",
+				"size": "16rem",
+				"slug": "large"
+			},
+			{
+				"name": "XL",
+				"size": "24rem",
+				"slug": "x-large"
+			},
+			{
+				"name": "2XL",
+				"size": "32rem",
+				"slug": "xx-large"
+			},
+			{
+				"name": "3XL",
+				"size": "40rem",
+				"slug": "xxx-large"
+			},
+			{
+				"name": "Full",
+				"size": "100vh",
+				"slug": "full"
+			}
+    	],
+		"borderRadius": [
+			{
+				"name": "None",
+				"size": "0px",
+				"slug": "none"
+			},
+			{
+				"name": "XS",
+				"size": "2px",
+				"slug": "x-small"
+			},
+			{
+				"name": "S",
+				"size": "4px",
+				"slug": "small"
+			},
+			{
+				"name": "M",
+				"size": "8px",
+				"slug": "medium"
+			},
+			{
+				"name": "L",
+				"size": "16px",
+				"slug": "large"
+			},
+			{
+				"name": "XL",
+				"size": "24px",
+				"slug": "x-large"
+			},
+			{
+				"name": "2XL",
+				"size": "32px",
+				"slug": "xx-large"
+			},
+			{
+				"name": "Full",
+				"size": "9999px",
+				"slug": "full"
+			}
+		]
+	}
 }