fix: add presets to image border radius, and deprecation

src/block-components/image/attributes.js

@@ -55,10 +55,6 @@ export const addAttributes = ( attrObject, options = {} ) => {
 				type: 'number',
 				default: '',
 			},
-			imageBorderRadius: {
-				type: 'number',
-				default: '',
-			},
 
 			imageOverlayColorType: {
 				type: 'string',
@@ -147,4 +143,15 @@ export const addAttributes = ( attrObject, options = {} ) => {
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	} )
+
+	attrObject.add( {
+		attributes: {
+			imageBorderRadius: {
+				type: 'string',
+				default: '',
+			},
+		},
+		versionAdded: '3.16.4',
+		versionDeprecated: '',
+	} )
 }

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

@@ -27,6 +27,17 @@ export const deprecatedAddAttributes = attrObject => {
 		versionAdded: '3.0.0',
 		versionDeprecated: '3.12.0',
 	} )
+
+	attrObject.add( {
+		attributes: {
+			imageBorderRadius: {
+				type: 'number',
+				default: '',
+			},
+		},
+		versionAdded: '3.0.0',
+		versionDeprecated: '3.16.4',
+	} )
 }
 
 export const deprecationImageOverlayOpacity = {
@@ -102,3 +113,24 @@ export const deprecationImageOverlayOpacity = {
 		return newAttributes
 	},
 }
+
+export const deprecateImageBorderRadius = {
+	isEligible: attributes => {
+		const imageBorderRadius = attributes.imageBorderRadius
+
+		return typeof imageBorderRadius === 'number'
+	},
+	migrate: attributes => {
+		const newAttributes = {
+			...attributes,
+		}
+
+		const imageBorderRadius = attributes.imageBorderRadius
+
+		if ( typeof imageBorderRadius === 'number' ) {
+			newAttributes.imageBorderRadius = String( imageBorderRadius )
+		}
+
+		return newAttributes
+	},
+}

src/block-components/image/edit.js

@@ -27,6 +27,7 @@ import {
 	useBlockSetAttributesContext,
 	useDeviceType,
 	useBlockLayoutDefaults,
+	usePresetControls,
 } from '~stackable/hooks'
 import { getAttributeName } from '~stackable/util'
 
@@ -124,6 +125,9 @@ const Controls = props => {
 		return 100
 	}, [ attributes.imageWidth, attributes.imageWidthUnit, attributes.imageHeight, attributes.imageHeightUnit ] )
 
+	const presetMarks = usePresetControls( 'borderRadius' )
+		?.getPresetMarks( { addNonePreset: true } ) || null
+
 	return (
 		<>
 			{ applyFilters( 'stackable.block-component.image.before', null, props ) }
@@ -438,6 +442,7 @@ const Controls = props => {
 						video: 'image-border-radius',
 						description: __( 'Adjusts the radius of image corners to make them more rounded', i18n ),
 					} }
+					marks={ presetMarks }
 				/>
 			}
 

src/block-components/image/index.js

@@ -20,7 +20,7 @@ import { useBlockEditContext } from '@wordpress/block-editor'
 import { applyFilters } from '@wordpress/hooks'
 import { useSelect } from '@wordpress/data'
 
-export { deprecationImageOverlayOpacity } from './deprecated'
+export { deprecationImageOverlayOpacity, deprecateImageBorderRadius } from './deprecated'
 export { IMAGE_SHADOWS } from './edit'
 
 export const Image = props => {

src/block-components/image/style.js

@@ -242,15 +242,25 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		styleRule: 'borderRadius',
 		attrName: 'imageBorderRadius',
 		key: 'imageBorderRadius',
-		format: '%spx',
+		valueCallback: value => {
+			if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 	}, {
 		...propsToPass,
 		selector: `${ selector } img`,
 		renderIn: 'save',
 		styleRule: 'borderRadius',
 		attrName: 'imageBorderRadius',
 		key: 'imageBorderRadius-save',
-		format: '%spx',
+		valueCallback: value => {
+			if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
+				return value
+			}
+			return value + 'px'
+		},
 	} ] )
 
 	blockStyleGenerator.addBlockStyles( 'imageFocalPoint', [ {

src/block/card/deprecated.js

@@ -13,7 +13,7 @@ import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
 	deprecationImageOverlayOpacity, getAlignmentClasses,
 	deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateBlockHeight,
-	deprecateInnerBlockRowGapAndContainerHeight,
+	deprecateInnerBlockRowGapAndContainerHeight, deprecateImageBorderRadius,
 } from '~stackable/block-components'
 
 /**
@@ -87,6 +87,78 @@ addFilter( 'stackable.card.save.innerClassNames', 'stackable/3.0.2', ( output, p
 } )
 
 const deprecated = [
+	{
+		// Support the change of type for border radius
+		attributes: attributes( '3.16.3' ),
+		save: withVersion( '3.16.3' )( Save ),
+		isEligible: attributes => {
+			const hasNumberBorderRadius = deprecateImageBorderRadius.isEligible( attributes )
+
+			return hasNumberBorderRadius
+		},
+		migrate: ( attributes, innerBlocks ) => {
+			const isNotV4 = attributes.version < 2 || typeof attributes.version === 'undefined'
+
+			let newAttributes = {
+				...attributes,
+			}
+
+			if ( isNotV4 ) {
+				newAttributes = {
+					...newAttributes,
+					version: 2,
+				}
+
+				// Update the vertical align into flexbox
+				const hasOldVerticalAlign = !! attributes.containerVerticalAlign // Column only, this was changed to flexbox
+
+				if ( hasOldVerticalAlign ) {
+					newAttributes = {
+						...newAttributes,
+						containerVerticalAlign: '',
+						innerBlockAlign: attributes.containerVerticalAlign,
+					}
+				}
+
+				// If the inner blocks are horizontal, adjust to accomodate the new
+				// column gap, it will modify blocks because people used block
+				// margins before instead of a proper column gap.
+				if ( attributes.innerBlockOrientation === 'horizontal' ) {
+					innerBlocks.forEach( ( block, index ) => {
+						if ( index ) {
+							if ( ! block.attributes.blockMargin ) {
+								block.attributes.blockMargin = {
+									top: '',
+									right: '',
+									bottom: '',
+									left: '',
+								}
+							}
+							if ( block.attributes.blockMargin.left === '' ) {
+								block.attributes.blockMargin.left = 24
+							}
+						}
+					} )
+
+					newAttributes = {
+						...newAttributes,
+						innerBlockColumnGap: 0,
+					}
+				}
+			}
+
+			newAttributes = deprecationImageOverlayOpacity.migrate( newAttributes ),
+			newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
+			newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
+			newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
+			newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
+			newAttributes = deprecateBlockHeight.migrate( newAttributes )
+			newAttributes = deprecateInnerBlockRowGapAndContainerHeight.migrate( '%s' )( newAttributes )
+			newAttributes = deprecateImageBorderRadius.migrate( newAttributes )
+
+			return [ newAttributes, innerBlocks ]
+		},
+	},
 	{
 		// Handle the migration of shadow attributes with the change of type in 3.15.3
 		attributes: attributes( '3.16.2' ),

src/block/image/deprecated.js

@@ -5,7 +5,7 @@ import { withVersion } from '~stackable/higher-order'
 import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity, deprecationImageOverlayOpacity,
 	deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateShadowColor, deprecateTypographyFontSize,
-	deprecateBlockHeight,
+	deprecateBlockHeight, deprecateImageBorderRadius,
 } from '~stackable/block-components'
 
 import { RichText } from '@wordpress/block-editor'
@@ -60,6 +60,31 @@ addFilter( 'stackable.image.save.wrapper', 'stackable/image-caption-wrapper', (
 } )
 
 const deprecated = [
+	{
+		// Support the change of type for border radius
+		attributes: attributes( '3.16.3' ),
+		save: withVersion( '3.16.3' )( Save ),
+		isEligible: attributes => {
+			const hasNumberBorderRadius = deprecateImageBorderRadius.isEligible( attributes )
+
+			return hasNumberBorderRadius
+		},
+		migrate: attributes => {
+			let newAttributes = { ...attributes }
+
+			newAttributes = deprecationImageOverlayOpacity.migrate( newAttributes )
+			newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
+			newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
+			newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
+			newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
+			newAttributes = deprecateShadowColor.migrate( 'image%s' )( newAttributes )
+			newAttributes = deprecateTypographyFontSize.migrate( 'figcaption%s' )( newAttributes )
+			newAttributes = deprecateBlockHeight.migrate( newAttributes )
+			newAttributes = deprecateImageBorderRadius.migrate( newAttributes )
+
+			return newAttributes
+		},
+	},
 	{
 		// Handle the migration of shadow attributes with the change of type in 3.15.3
 		attributes: attributes( '3.16.2' ),

src/block/posts/deprecated.js

@@ -13,7 +13,7 @@ import {
 	Image, deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
 	deprecateTypographyGradientColor, deprecationImageOverlayOpacity,
 	deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateShadowColor,
-	deprecateTypographyFontSize, deprecateBlockHeight,
+	deprecateTypographyFontSize, deprecateBlockHeight, deprecateImageBorderRadius,
 } from '~stackable/block-components'
 
 /**
@@ -42,6 +42,74 @@ addFilter( 'stackable.posts.title.readmore-content', 'stackable/3_0_2', addUndef
 addFilter( 'stackable.posts.feature-image', 'stackable/3_6_3', determineFeatureImage )
 
 const deprecated = [
+	{
+		// Support the change of type for border radius
+		attributes: attributes( '3.16.3' ),
+		save: withVersion( '3.16.3' )( Save ),
+		isEligible: attributes => {
+			const hasNumberBorderRadius = deprecateImageBorderRadius.isEligible( attributes )
+
+			return hasNumberBorderRadius
+		},
+		migrate: attributes => {
+			let newAttributes = {
+				...attributes,
+				version: 2,
+			}
+
+			// We used to have an "Inner content width" which is now just the block width
+			const hasOldInnerContentWidth = attributes.innerBlockContentWidth || attributes.innerBlockContentWidthTablet || attributes.innerBlockContentWidthMobile
+
+			if ( hasOldInnerContentWidth ) {
+				newAttributes = {
+					...newAttributes,
+					innerBlockContentWidth: '',
+					innerBlockContentWidthTablet: '',
+					innerBlockContentWidthMobile: '',
+					innerBlockContentWidthUnit: 'px',
+					innerBlockContentWidthUnitTablet: '',
+					innerBlockContentWidthUnitMobile: '',
+					blockWidth: attributes.innerBlockContentWidth,
+					blockWidthTablet: attributes.innerBlockContentWidthTablet,
+					blockWidthMobile: attributes.innerBlockContentWidthMobile,
+					blockWidthUnit: attributes.innerBlockContentWidthUnit,
+					blockWidthUnitTablet: attributes.innerBlockContentWidthUnitTablet,
+					blockWidthUnitMobile: attributes.innerBlockContentWidthUnitMobile,
+					innerBlockAlign: '',
+					innerBlockAlignTablet: '',
+					innerBlockAlignMobile: '',
+					blockHorizontalAlign: attributes.innerBlockAlign,
+					blockHorizontalAlignTablet: attributes.innerBlockAlignTablet,
+					blockHorizontalAlignMobile: attributes.innerBlockAlignMobile,
+				}
+			}
+
+			newAttributes = deprecationImageOverlayOpacity.migrate( newAttributes )
+			newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
+			newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
+
+			newAttributes = deprecateTypographyGradientColor.migrate( 'title%s' )( newAttributes )
+			newAttributes = deprecateTypographyGradientColor.migrate( 'category%s' )( newAttributes )
+			newAttributes = deprecateTypographyGradientColor.migrate( 'excerpt%s' )( newAttributes )
+			newAttributes = deprecateTypographyGradientColor.migrate( 'meta%s' )( newAttributes )
+			newAttributes = deprecateTypographyGradientColor.migrate( 'readmore%s' )( newAttributes )
+
+			newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
+			newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
+			newAttributes = deprecateShadowColor.migrate( 'image%s' )( newAttributes )
+
+			newAttributes = deprecateTypographyFontSize.migrate( 'title%s' )( newAttributes )
+			newAttributes = deprecateTypographyFontSize.migrate( 'category%s' )( newAttributes )
+			newAttributes = deprecateTypographyFontSize.migrate( 'excerpt%s' )( newAttributes )
+			newAttributes = deprecateTypographyFontSize.migrate( 'meta%s' )( newAttributes )
+			newAttributes = deprecateTypographyFontSize.migrate( 'readmore%s' )( newAttributes )
+
+			newAttributes = deprecateBlockHeight.migrate( newAttributes )
+			newAttributes = deprecateImageBorderRadius.migrate( newAttributes )
+
+			return newAttributes
+		},
+	},
 	{
 		// Handle the migration of shadow attributes with the change of type in 3.15.3
 		attributes: attributes( '3.16.2' ),