fix/3538 shadow migration

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

@@ -21,9 +21,15 @@ export const deprecateInnerBlockRowGapAndContainerHeight = {
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
 		const containerHeight = getAttribute( 'containerHeight' )
+		const containerHeightTablet = getAttribute( 'containerHeightTablet' )
+		const containerHeightMobile = getAttribute( 'containerHeightMobile' )
 		const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
+		const innerBlockRowGapTablet = getAttribute( 'innerBlockRowGapTablet' )
+		const innerBlockRowGapMobile = getAttribute( 'innerBlockRowGapMobile' )
 
-		return typeof containerHeight === 'number' || typeof innerBlockRowGap === 'number'
+		return typeof containerHeight === 'number' || typeof innerBlockRowGap === 'number' ||
+			typeof containerHeightTablet === 'number' || typeof innerBlockRowGapTablet === 'number' ||
+			typeof containerHeightMobile === 'number' || typeof innerBlockRowGapMobile === 'number'
 	},
 	migrate: attrNameTemplate => attributes => {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
@@ -34,16 +40,36 @@ export const deprecateInnerBlockRowGapAndContainerHeight = {
 		}
 
 		const containerHeight = getAttribute( 'containerHeight' )
+		const containerHeightTablet = getAttribute( 'containerHeightTablet' )
+		const containerHeightMobile = getAttribute( 'containerHeightMobile' )
 		const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
+		const innerBlockRowGapTablet = getAttribute( 'innerBlockRowGapTablet' )
+		const innerBlockRowGapMobile = getAttribute( 'innerBlockRowGapMobile' )
 
 		if ( typeof containerHeight === 'number' ) {
 			newAttributes[ getAttrName( 'containerHeight' ) ] = String( containerHeight )
 		}
 
+		if ( typeof containerHeightTablet === 'number' ) {
+			newAttributes[ getAttrName( 'containerHeightTablet' ) ] = String( containerHeightTablet )
+		}
+
+		if ( typeof containerHeightMobile === 'number' ) {
+			newAttributes[ getAttrName( 'containerHeightMobile' ) ] = String( containerHeightMobile )
+		}
+
 		if ( typeof innerBlockRowGap === 'number' ) {
 			newAttributes[ getAttrName( 'innerBlockRowGap' ) ] = String( innerBlockRowGap )
 		}
 
+		if ( typeof innerBlockRowGapTablet === 'number' ) {
+			newAttributes[ getAttrName( 'innerBlockRowGapTablet' ) ] = String( innerBlockRowGapTablet )
+		}
+
+		if ( typeof innerBlockRowGapMobile === 'number' ) {
+			newAttributes[ getAttrName( 'innerBlockRowGapMobile' ) ] = String( innerBlockRowGapMobile )
+		}
+
 		return newAttributes
 	},
 }

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

@@ -32,34 +32,77 @@ export const deprecateColumnAndRowGap = {
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
 		const columnSpacing = getAttribute( 'columnSpacing' )
+		const columnSpacingTablet = getAttribute( 'columnSpacingTablet' )
+		const columnSpacingMobile = getAttribute( 'columnSpacingMobile' )
+
 		const columnGap = getAttribute( 'columnGap' )
+		const columnGapTablet = getAttribute( 'columnGapTablet' )
+		const columnGapMobile = getAttribute( 'columnGapMobile' )
+
 		const rowGap = getAttribute( 'rowGap' )
+		const rowGapTablet = getAttribute( 'rowGapTablet' )
+		const rowGapMobile = getAttribute( 'rowGapMobile' )
 
-		return typeof columnSpacing === 'number' || typeof columnGap === 'number' || typeof rowGap === 'number'
+		return (
+			typeof columnSpacing === 'number' ||
+			typeof columnSpacingTablet === 'number' ||
+			typeof columnSpacingMobile === 'number' ||
+			typeof columnGap === 'number' ||
+			typeof columnGapTablet === 'number' ||
+			typeof columnGapMobile === 'number' ||
+			typeof rowGap === 'number' ||
+			typeof rowGapTablet === 'number' ||
+			typeof rowGapMobile === 'number'
+		)
 	},
+
 	migrate: attrNameTemplate => attributes => {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
-		const newAttributes = {
-			...attributes,
-		}
+		const newAttributes = { ...attributes }
 
 		const columnSpacing = getAttribute( 'columnSpacing' )
+		const columnSpacingTablet = getAttribute( 'columnSpacingTablet' )
+		const columnSpacingMobile = getAttribute( 'columnSpacingMobile' )
+
 		const columnGap = getAttribute( 'columnGap' )
+		const columnGapTablet = getAttribute( 'columnGapTablet' )
+		const columnGapMobile = getAttribute( 'columnGapMobile' )
+
 		const rowGap = getAttribute( 'rowGap' )
+		const rowGapTablet = getAttribute( 'rowGapTablet' )
+		const rowGapMobile = getAttribute( 'rowGapMobile' )
 
 		if ( typeof columnSpacing === 'number' ) {
 			newAttributes[ getAttrName( 'columnSpacing' ) ] = String( columnSpacing )
 		}
+		if ( typeof columnSpacingTablet === 'number' ) {
+			newAttributes[ getAttrName( 'columnSpacingTablet' ) ] = String( columnSpacingTablet )
+		}
+		if ( typeof columnSpacingMobile === 'number' ) {
+			newAttributes[ getAttrName( 'columnSpacingMobile' ) ] = String( columnSpacingMobile )
+		}
 
 		if ( typeof columnGap === 'number' ) {
 			newAttributes[ getAttrName( 'columnGap' ) ] = String( columnGap )
 		}
+		if ( typeof columnGapTablet === 'number' ) {
+			newAttributes[ getAttrName( 'columnGapTablet' ) ] = String( columnGapTablet )
+		}
+		if ( typeof columnGapMobile === 'number' ) {
+			newAttributes[ getAttrName( 'columnGapMobile' ) ] = String( columnGapMobile )
+		}
 
 		if ( typeof rowGap === 'number' ) {
 			newAttributes[ getAttrName( 'rowGap' ) ] = String( rowGap )
 		}
+		if ( typeof rowGapTablet === 'number' ) {
+			newAttributes[ getAttrName( 'rowGapTablet' ) ] = String( rowGapTablet )
+		}
+		if ( typeof rowGapMobile === 'number' ) {
+			newAttributes[ getAttrName( 'rowGapMobile' ) ] = String( rowGapMobile )
+		}
 
 		return newAttributes
 	},

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

@@ -56,7 +56,9 @@ export const deprecateShadowColor = {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
-		if ( getAttribute( 'shadow' ) || getAttribute( 'shadowHover' ) || getAttribute( 'shadowParentHover' ) ) {
+		if ( ( getAttribute( 'shadow' ) && getAttribute( 'shadow' ).indexOf( 'rgba' ) !== -1 ) ||
+			( getAttribute( 'shadowHover' ) && getAttribute( 'shadowHover' ).indexOf( 'rgba' ) !== -1 ) ||
+			( getAttribute( 'shadowParentHover' ) && getAttribute( 'shadowParentHover' ).indexOf( 'rgba' ) !== -1 ) ) {
 			return true
 		}
 

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

@@ -22,8 +22,12 @@ export const deprecateSizeControlHeight = {
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
 		const height = getAttribute( 'height' )
+		const heightTablet = getAttribute( 'heightTablet' )
+		const heightMobile = getAttribute( 'heightMobile' )
 
-		return typeof height === 'number'
+		return typeof height === 'number' ||
+			typeof heightTablet === 'number' ||
+			typeof heightMobile === 'number'
 	},
 	migrate: attrNameTemplate => attributes => {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
@@ -34,11 +38,21 @@ export const deprecateSizeControlHeight = {
 		}
 
 		const height = getAttribute( 'height' )
+		const heightTablet = getAttribute( 'heightTablet' )
+		const heightMobile = getAttribute( 'heightMobile' )
 
 		if ( typeof height === 'number' ) {
 			newAttributes[ getAttrName( 'height' ) ] = String( height )
 		}
 
+		if ( typeof heightTablet === 'number' ) {
+			newAttributes[ getAttrName( 'heightTablet' ) ] = String( heightTablet )
+		}
+
+		if ( typeof heightMobile === 'number' ) {
+			newAttributes[ getAttrName( 'heightMobile' ) ] = String( heightMobile )
+		}
+
 		return newAttributes
 	},
 }

src/block-components/image/edit.js

@@ -42,15 +42,15 @@ import { useBlockEditContext } from '@wordpress/block-editor'
 // Note: image drop shadows do not accept negative spread.
 export const IMAGE_SHADOWS = [
 	'none',
-	'0px 0 1px rgba(120, 120, 120, 0.5)',
-	'0px 0 2px rgba(120, 120, 120, 0.5)',
-	'0px 5px 10px rgba(153, 153, 153, 0.35)',
-	'0px 2px 20px rgba(153, 153, 153, 0.2)',
-	'25px 10px 30px rgba(18, 63, 82, 0.3)',
-	'0px 10px 30px rgba(0, 0, 0, 0.1)',
-	'7px 5px 30px rgba(72, 73, 121, 0.15)',
-	'0px 10px 60px rgba(0, 0, 0, 0.1)',
-	'70px 60px 60px rgba(72, 73, 121, 0.2) ',
+	'0px 0 1px #78787880',
+	'0px 0 2px #78787880',
+	'0px 5px 10px #99999959',
+	'0px 2px 20px #99999933',
+	'25px 10px 30px #123f524c',
+	'0px 10px 30px #0000001a',
+	'7px 5px 30px #48497926',
+	'0px 10px 60px #0000001a',
+	'70px 60px 60px #48497933 ',
 ]
 
 const Controls = props => {

src/block-components/separator/edit.js

@@ -31,16 +31,16 @@ import { getAttributeNameFunc } from '~stackable/util'
 
 const SEPARATOR_SHADOWS = [
 	'none',
-	'0px 0 1px rgba(120, 120, 120, 0.5)',
-	'0px 0 2px rgba(120, 120, 120, 0.5)',
+	'0px 0 1px #78787880',
+	'0px 0 2px #78787880',
 	'2px 4px 6px #000', // This is a dark shadow similar to the shadow we used by default in v2.
-	'0px 5px 10px rgba(153, 153, 153, 0.35)',
-	'0px 2px 20px rgba(153, 153, 153, 0.2)',
-	'25px 10px 30px rgba(18, 63, 82, 0.3)',
-	'0px 10px 30px rgba(0, 0, 0, 0.05)',
-	'7px 5px 30px rgba(72, 73, 121, 0.15)',
-	'0px 10px 60px rgba(0, 0, 0, 0.1)',
-	'70px 130px -60px rgba(72, 73, 121, 0.38) ',
+	'0px 5px 10px #99999959',
+	'0px 2px 20px #99999933',
+	'25px 10px 30px #123f524c',
+	'0px 10px 30px #0000000d',
+	'7px 5px 30px #48497926',
+	'0px 10px 60px #0000001a',
+	'70px 130px -60px #48497961 ',
 ]
 
 const SeparatorControls = props => {

src/block-components/typography/deprecated.js

@@ -77,7 +77,9 @@ export const deprecateTypographyShadowColor = {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
-		if ( getAttribute( 'textShadow' ) || getAttribute( 'textShadowHover' ) || getAttribute( 'textShadowParentHover' ) ) {
+		if ( ( getAttribute( 'textShadow' ) && getAttribute( 'textShadow' ).indexOf( 'rgba' ) !== -1 ) ||
+			( getAttribute( 'textShadowHover' ) && getAttribute( 'textShadowHover' ).indexOf( 'rgba' ) !== -1 ) ||
+			( getAttribute( 'textShadowParentHover' ) && getAttribute( 'textShadowParentHover' ).indexOf( 'rgba' ) !== -1 ) ) {
 			return true
 		}
 
@@ -96,7 +98,7 @@ export const deprecateTypographyShadowColor = {
 		const shadowParentHover = getAttribute( 'textShadowParentHover' ) || shadowHover
 
 		if ( getAttribute( 'textShadow' ) && getAttribute( 'textShadow' ).indexOf( 'rgba' ) !== -1 ) {
-			const { options, color } = extractRgba( shadowHover )
+			const { options, color } = extractRgba( shadow )
 			const hex = rgbaToHexAlpha( color )
 			newAttributes[ getAttrName( 'textShadow' ) ] = `${ options } ${ hex }`
 		}
@@ -123,8 +125,12 @@ export const deprecateTypographyFontSize = {
 		const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
 
 		const fontSize = getAttribute( 'fontSize' )
+		const fontSizeTablet = getAttribute( 'fontSizeTablet' )
+		const fontSizeMobile = getAttribute( 'fontSizeMobile' )
 
-		return typeof fontSize === 'number'
+		return typeof fontSize === 'number' ||
+			typeof fontSizeTablet === 'number' ||
+			typeof fontSizeMobile === 'number'
 	},
 	migrate: attrNameTemplate => attributes => {
 		const getAttrName = getAttrNameFunction( attrNameTemplate )
@@ -135,11 +141,21 @@ export const deprecateTypographyFontSize = {
 		}
 
 		const fontSize = getAttribute( 'fontSize' )
+		const fontSizeTablet = getAttribute( 'fontSizeTablet' )
+		const fontSizeMobile = getAttribute( 'fontSizeMobile' )
 
 		if ( typeof fontSize === 'number' ) {
 			newAttributes[ getAttrName( 'fontSize' ) ] = String( fontSize )
 		}
 
+		if ( typeof fontSizeTablet === 'number' ) {
+			newAttributes[ getAttrName( 'fontSizeTablet' ) ] = String( fontSizeTablet )
+		}
+
+		if ( typeof fontSizeMobile === 'number' ) {
+			newAttributes[ getAttrName( 'fontSizeMobile' ) ] = String( fontSizeMobile )
+		}
+
 		return newAttributes
 	},
 }

src/block-components/typography/edit.js

@@ -34,17 +34,17 @@ import { useSelect } from '@wordpress/data'
 
 const TYPOGRAPHY_SHADOWS = [
 	'none',
-	'2px 2px 4px rgba(0, 0, 0, 0.2)',
-	'6px 6px 4px rgba(120, 120, 120, 0.2)',
-	'2px 4px 5px rgba(0, 0, 0, 0.4)',
-	'0px 0px 5px rgba(0, 0, 0, 0.4)',
-	'4px 4px 0px rgba(0, 0, 0, 1)',
-	'0px 15px 14px rgba(18, 63, 82, 0.3)',
-	'25px 10px 14px rgba(18, 63, 82, 0.3)',
-	'25px 10px 30px rgba(18, 63, 82, 0.3)',
-	'0px 0px 40px rgba(18, 63, 82, 0.6)',
-	'0px 0px 62px rgba(71, 73, 79, 1)',
-	'0px 0px 100px rgba(71, 73, 79, 1)',
+	'2px 2px 4px #00000033',
+	'6px 6px 4px #78787833',
+	'2px 4px 5px #00000066',
+	'0px 0px 5px #00000066',
+	'4px 4px 0px #000000ff',
+	'0px 15px 14px #123f524c',
+	'25px 10px 14px #123f524c',
+	'25px 10px 30px #123f524c',
+	'0px 0px 40px #123f5299',
+	'0px 0px 62px #47494fff',
+	'0px 0px 100px #47494fff',
 ]
 
 const GRADIENT_OPTIONS = [

src/block/accordion/deprecated.js

@@ -8,6 +8,28 @@ import {
 } from '~stackable/block-components'
 
 const deprecated = [
+	{
+		// Handle the migration of shadow attributes with the change of type in 3.15.3
+		attributes: attributes( '3.16.2' ),
+		save: withVersion( '3.16.2' )( Save ),
+		isEligible: attributes => {
+			const hasBlockShadow = deprecateBlockShadowColor.isEligible( attributes )
+			const hasContainerShadow = deprecateContainerShadowColor.isEligible( attributes )
+
+			return hasBlockShadow || hasContainerShadow
+		},
+		migrate: attributes => {
+			let newAttributes = { ...attributes }
+
+			newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
+			newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
+			newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
+			newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
+			newAttributes = deprecateBlockHeight.migrate( newAttributes )
+
+			return newAttributes
+		},
+	},
 	{
 		// Support the change of type for block height
 		attributes: attributes( '3.15.3' ),
@@ -32,6 +54,14 @@ const deprecated = [
 		attributes: attributes( '3.12.11' ),
 		save: withVersion( '3.12.11' )( Save ),
 		isEligible: attributes => {
+			if ( (
+				typeof attributes?.blockHeight === 'string' ||
+				typeof attributes?.blockHeightTablet === 'string' ||
+				typeof attributes?.blockHeightMobile === 'string' )
+			) {
+				return false
+			}
+
 			const hasBlockShadow = deprecateBlockShadowColor.isEligible( attributes )
 			const hasContainerShadow = deprecateContainerShadowColor.isEligible( attributes )