Skip to content

Commit c03a7d1

Browse files
ArukuenArukuen
authored
fix (presets): if using presets + shadows together, the presets get lost after refresh (#3539)
* fix: correct a typo * fix: only run the migration if text shadow uses rgba * fix: update the shadows option to using hex * fix: border shadows * fix: additional conversion from rgba to hex * fix: typo * fix: add the additional deprecation for handling shadow
1 parent 5c8895e commit c03a7d1

File tree

55 files changed

+2289
-48
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2289
-48
lines changed

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,15 @@ export const deprecateInnerBlockRowGapAndContainerHeight = {
2121
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
2222

2323
const containerHeight = getAttribute( 'containerHeight' )
24+
const containerHeightTablet = getAttribute( 'containerHeightTablet' )
25+
const containerHeightMobile = getAttribute( 'containerHeightMobile' )
2426
const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
27+
const innerBlockRowGapTablet = getAttribute( 'innerBlockRowGapTablet' )
28+
const innerBlockRowGapMobile = getAttribute( 'innerBlockRowGapMobile' )
2529

26-
return typeof containerHeight === 'number' || typeof innerBlockRowGap === 'number'
30+
return typeof containerHeight === 'number' || typeof innerBlockRowGap === 'number' ||
31+
typeof containerHeightTablet === 'number' || typeof innerBlockRowGapTablet === 'number' ||
32+
typeof containerHeightMobile === 'number' || typeof innerBlockRowGapMobile === 'number'
2733
},
2834
migrate: attrNameTemplate => attributes => {
2935
const getAttrName = getAttrNameFunction( attrNameTemplate )
@@ -34,16 +40,36 @@ export const deprecateInnerBlockRowGapAndContainerHeight = {
3440
}
3541

3642
const containerHeight = getAttribute( 'containerHeight' )
43+
const containerHeightTablet = getAttribute( 'containerHeightTablet' )
44+
const containerHeightMobile = getAttribute( 'containerHeightMobile' )
3745
const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
46+
const innerBlockRowGapTablet = getAttribute( 'innerBlockRowGapTablet' )
47+
const innerBlockRowGapMobile = getAttribute( 'innerBlockRowGapMobile' )
3848

3949
if ( typeof containerHeight === 'number' ) {
4050
newAttributes[ getAttrName( 'containerHeight' ) ] = String( containerHeight )
4151
}
4252

53+
if ( typeof containerHeightTablet === 'number' ) {
54+
newAttributes[ getAttrName( 'containerHeightTablet' ) ] = String( containerHeightTablet )
55+
}
56+
57+
if ( typeof containerHeightMobile === 'number' ) {
58+
newAttributes[ getAttrName( 'containerHeightMobile' ) ] = String( containerHeightMobile )
59+
}
60+
4361
if ( typeof innerBlockRowGap === 'number' ) {
4462
newAttributes[ getAttrName( 'innerBlockRowGap' ) ] = String( innerBlockRowGap )
4563
}
4664

65+
if ( typeof innerBlockRowGapTablet === 'number' ) {
66+
newAttributes[ getAttrName( 'innerBlockRowGapTablet' ) ] = String( innerBlockRowGapTablet )
67+
}
68+
69+
if ( typeof innerBlockRowGapMobile === 'number' ) {
70+
newAttributes[ getAttrName( 'innerBlockRowGapMobile' ) ] = String( innerBlockRowGapMobile )
71+
}
72+
4773
return newAttributes
4874
},
4975
}

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

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,34 +32,77 @@ export const deprecateColumnAndRowGap = {
3232
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
3333

3434
const columnSpacing = getAttribute( 'columnSpacing' )
35+
const columnSpacingTablet = getAttribute( 'columnSpacingTablet' )
36+
const columnSpacingMobile = getAttribute( 'columnSpacingMobile' )
37+
3538
const columnGap = getAttribute( 'columnGap' )
39+
const columnGapTablet = getAttribute( 'columnGapTablet' )
40+
const columnGapMobile = getAttribute( 'columnGapMobile' )
41+
3642
const rowGap = getAttribute( 'rowGap' )
43+
const rowGapTablet = getAttribute( 'rowGapTablet' )
44+
const rowGapMobile = getAttribute( 'rowGapMobile' )
3745

38-
return typeof columnSpacing === 'number' || typeof columnGap === 'number' || typeof rowGap === 'number'
46+
return (
47+
typeof columnSpacing === 'number' ||
48+
typeof columnSpacingTablet === 'number' ||
49+
typeof columnSpacingMobile === 'number' ||
50+
typeof columnGap === 'number' ||
51+
typeof columnGapTablet === 'number' ||
52+
typeof columnGapMobile === 'number' ||
53+
typeof rowGap === 'number' ||
54+
typeof rowGapTablet === 'number' ||
55+
typeof rowGapMobile === 'number'
56+
)
3957
},
58+
4059
migrate: attrNameTemplate => attributes => {
4160
const getAttrName = getAttrNameFunction( attrNameTemplate )
4261
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
4362

44-
const newAttributes = {
45-
...attributes,
46-
}
63+
const newAttributes = { ...attributes }
4764

4865
const columnSpacing = getAttribute( 'columnSpacing' )
66+
const columnSpacingTablet = getAttribute( 'columnSpacingTablet' )
67+
const columnSpacingMobile = getAttribute( 'columnSpacingMobile' )
68+
4969
const columnGap = getAttribute( 'columnGap' )
70+
const columnGapTablet = getAttribute( 'columnGapTablet' )
71+
const columnGapMobile = getAttribute( 'columnGapMobile' )
72+
5073
const rowGap = getAttribute( 'rowGap' )
74+
const rowGapTablet = getAttribute( 'rowGapTablet' )
75+
const rowGapMobile = getAttribute( 'rowGapMobile' )
5176

5277
if ( typeof columnSpacing === 'number' ) {
5378
newAttributes[ getAttrName( 'columnSpacing' ) ] = String( columnSpacing )
5479
}
80+
if ( typeof columnSpacingTablet === 'number' ) {
81+
newAttributes[ getAttrName( 'columnSpacingTablet' ) ] = String( columnSpacingTablet )
82+
}
83+
if ( typeof columnSpacingMobile === 'number' ) {
84+
newAttributes[ getAttrName( 'columnSpacingMobile' ) ] = String( columnSpacingMobile )
85+
}
5586

5687
if ( typeof columnGap === 'number' ) {
5788
newAttributes[ getAttrName( 'columnGap' ) ] = String( columnGap )
5889
}
90+
if ( typeof columnGapTablet === 'number' ) {
91+
newAttributes[ getAttrName( 'columnGapTablet' ) ] = String( columnGapTablet )
92+
}
93+
if ( typeof columnGapMobile === 'number' ) {
94+
newAttributes[ getAttrName( 'columnGapMobile' ) ] = String( columnGapMobile )
95+
}
5996

6097
if ( typeof rowGap === 'number' ) {
6198
newAttributes[ getAttrName( 'rowGap' ) ] = String( rowGap )
6299
}
100+
if ( typeof rowGapTablet === 'number' ) {
101+
newAttributes[ getAttrName( 'rowGapTablet' ) ] = String( rowGapTablet )
102+
}
103+
if ( typeof rowGapMobile === 'number' ) {
104+
newAttributes[ getAttrName( 'rowGapMobile' ) ] = String( rowGapMobile )
105+
}
63106

64107
return newAttributes
65108
},

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,9 @@ export const deprecateShadowColor = {
5656
const getAttrName = getAttrNameFunction( attrNameTemplate )
5757
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
5858

59-
if ( getAttribute( 'shadow' ) || getAttribute( 'shadowHover' ) || getAttribute( 'shadowParentHover' ) ) {
59+
if ( ( getAttribute( 'shadow' ) && getAttribute( 'shadow' ).indexOf( 'rgba' ) !== -1 ) ||
60+
( getAttribute( 'shadowHover' ) && getAttribute( 'shadowHover' ).indexOf( 'rgba' ) !== -1 ) ||
61+
( getAttribute( 'shadowParentHover' ) && getAttribute( 'shadowParentHover' ).indexOf( 'rgba' ) !== -1 ) ) {
6062
return true
6163
}
6264

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,12 @@ export const deprecateSizeControlHeight = {
2222
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
2323

2424
const height = getAttribute( 'height' )
25+
const heightTablet = getAttribute( 'heightTablet' )
26+
const heightMobile = getAttribute( 'heightMobile' )
2527

26-
return typeof height === 'number'
28+
return typeof height === 'number' ||
29+
typeof heightTablet === 'number' ||
30+
typeof heightMobile === 'number'
2731
},
2832
migrate: attrNameTemplate => attributes => {
2933
const getAttrName = getAttrNameFunction( attrNameTemplate )
@@ -34,11 +38,21 @@ export const deprecateSizeControlHeight = {
3438
}
3539

3640
const height = getAttribute( 'height' )
41+
const heightTablet = getAttribute( 'heightTablet' )
42+
const heightMobile = getAttribute( 'heightMobile' )
3743

3844
if ( typeof height === 'number' ) {
3945
newAttributes[ getAttrName( 'height' ) ] = String( height )
4046
}
4147

48+
if ( typeof heightTablet === 'number' ) {
49+
newAttributes[ getAttrName( 'heightTablet' ) ] = String( heightTablet )
50+
}
51+
52+
if ( typeof heightMobile === 'number' ) {
53+
newAttributes[ getAttrName( 'heightMobile' ) ] = String( heightMobile )
54+
}
55+
4256
return newAttributes
4357
},
4458
}

‎src/block-components/image/edit.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ import { useBlockEditContext } from '@wordpress/block-editor'
4242
// Note: image drop shadows do not accept negative spread.
4343
export const IMAGE_SHADOWS = [
4444
'none',
45-
'0px 0 1px rgba(120, 120, 120, 0.5)',
46-
'0px 0 2px rgba(120, 120, 120, 0.5)',
47-
'0px 5px 10px rgba(153, 153, 153, 0.35)',
48-
'0px 2px 20px rgba(153, 153, 153, 0.2)',
49-
'25px 10px 30px rgba(18, 63, 82, 0.3)',
50-
'0px 10px 30px rgba(0, 0, 0, 0.1)',
51-
'7px 5px 30px rgba(72, 73, 121, 0.15)',
52-
'0px 10px 60px rgba(0, 0, 0, 0.1)',
53-
'70px 60px 60px rgba(72, 73, 121, 0.2) ',
45+
'0px 0 1px #78787880',
46+
'0px 0 2px #78787880',
47+
'0px 5px 10px #99999959',
48+
'0px 2px 20px #99999933',
49+
'25px 10px 30px #123f524c',
50+
'0px 10px 30px #0000001a',
51+
'7px 5px 30px #48497926',
52+
'0px 10px 60px #0000001a',
53+
'70px 60px 60px #48497933 ',
5454
]
5555

5656
const Controls = props => {

‎src/block-components/separator/edit.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,16 @@ import { getAttributeNameFunc } from '~stackable/util'
3131

3232
const SEPARATOR_SHADOWS = [
3333
'none',
34-
'0px 0 1px rgba(120, 120, 120, 0.5)',
35-
'0px 0 2px rgba(120, 120, 120, 0.5)',
34+
'0px 0 1px #78787880',
35+
'0px 0 2px #78787880',
3636
'2px 4px 6px #000', // This is a dark shadow similar to the shadow we used by default in v2.
37-
'0px 5px 10px rgba(153, 153, 153, 0.35)',
38-
'0px 2px 20px rgba(153, 153, 153, 0.2)',
39-
'25px 10px 30px rgba(18, 63, 82, 0.3)',
40-
'0px 10px 30px rgba(0, 0, 0, 0.05)',
41-
'7px 5px 30px rgba(72, 73, 121, 0.15)',
42-
'0px 10px 60px rgba(0, 0, 0, 0.1)',
43-
'70px 130px -60px rgba(72, 73, 121, 0.38) ',
37+
'0px 5px 10px #99999959',
38+
'0px 2px 20px #99999933',
39+
'25px 10px 30px #123f524c',
40+
'0px 10px 30px #0000000d',
41+
'7px 5px 30px #48497926',
42+
'0px 10px 60px #0000001a',
43+
'70px 130px -60px #48497961 ',
4444
]
4545

4646
const SeparatorControls = props => {

‎src/block-components/typography/deprecated.js

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ export const deprecateTypographyShadowColor = {
7777
const getAttrName = getAttrNameFunction( attrNameTemplate )
7878
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
7979

80-
if ( getAttribute( 'textShadow' ) || getAttribute( 'textShadowHover' ) || getAttribute( 'textShadowParentHover' ) ) {
80+
if ( ( getAttribute( 'textShadow' ) && getAttribute( 'textShadow' ).indexOf( 'rgba' ) !== -1 ) ||
81+
( getAttribute( 'textShadowHover' ) && getAttribute( 'textShadowHover' ).indexOf( 'rgba' ) !== -1 ) ||
82+
( getAttribute( 'textShadowParentHover' ) && getAttribute( 'textShadowParentHover' ).indexOf( 'rgba' ) !== -1 ) ) {
8183
return true
8284
}
8385

@@ -96,7 +98,7 @@ export const deprecateTypographyShadowColor = {
9698
const shadowParentHover = getAttribute( 'textShadowParentHover' ) || shadowHover
9799

98100
if ( getAttribute( 'textShadow' ) && getAttribute( 'textShadow' ).indexOf( 'rgba' ) !== -1 ) {
99-
const { options, color } = extractRgba( shadowHover )
101+
const { options, color } = extractRgba( shadow )
100102
const hex = rgbaToHexAlpha( color )
101103
newAttributes[ getAttrName( 'textShadow' ) ] = `${ options } ${ hex }`
102104
}
@@ -123,8 +125,12 @@ export const deprecateTypographyFontSize = {
123125
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
124126

125127
const fontSize = getAttribute( 'fontSize' )
128+
const fontSizeTablet = getAttribute( 'fontSizeTablet' )
129+
const fontSizeMobile = getAttribute( 'fontSizeMobile' )
126130

127-
return typeof fontSize === 'number'
131+
return typeof fontSize === 'number' ||
132+
typeof fontSizeTablet === 'number' ||
133+
typeof fontSizeMobile === 'number'
128134
},
129135
migrate: attrNameTemplate => attributes => {
130136
const getAttrName = getAttrNameFunction( attrNameTemplate )
@@ -135,11 +141,21 @@ export const deprecateTypographyFontSize = {
135141
}
136142

137143
const fontSize = getAttribute( 'fontSize' )
144+
const fontSizeTablet = getAttribute( 'fontSizeTablet' )
145+
const fontSizeMobile = getAttribute( 'fontSizeMobile' )
138146

139147
if ( typeof fontSize === 'number' ) {
140148
newAttributes[ getAttrName( 'fontSize' ) ] = String( fontSize )
141149
}
142150

151+
if ( typeof fontSizeTablet === 'number' ) {
152+
newAttributes[ getAttrName( 'fontSizeTablet' ) ] = String( fontSizeTablet )
153+
}
154+
155+
if ( typeof fontSizeMobile === 'number' ) {
156+
newAttributes[ getAttrName( 'fontSizeMobile' ) ] = String( fontSizeMobile )
157+
}
158+
143159
return newAttributes
144160
},
145161
}

‎src/block-components/typography/edit.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,17 @@ import { useSelect } from '@wordpress/data'
3434

3535
const TYPOGRAPHY_SHADOWS = [
3636
'none',
37-
'2px 2px 4px rgba(0, 0, 0, 0.2)',
38-
'6px 6px 4px rgba(120, 120, 120, 0.2)',
39-
'2px 4px 5px rgba(0, 0, 0, 0.4)',
40-
'0px 0px 5px rgba(0, 0, 0, 0.4)',
41-
'4px 4px 0px rgba(0, 0, 0, 1)',
42-
'0px 15px 14px rgba(18, 63, 82, 0.3)',
43-
'25px 10px 14px rgba(18, 63, 82, 0.3)',
44-
'25px 10px 30px rgba(18, 63, 82, 0.3)',
45-
'0px 0px 40px rgba(18, 63, 82, 0.6)',
46-
'0px 0px 62px rgba(71, 73, 79, 1)',
47-
'0px 0px 100px rgba(71, 73, 79, 1)',
37+
'2px 2px 4px #00000033',
38+
'6px 6px 4px #78787833',
39+
'2px 4px 5px #00000066',
40+
'0px 0px 5px #00000066',
41+
'4px 4px 0px #000000ff',
42+
'0px 15px 14px #123f524c',
43+
'25px 10px 14px #123f524c',
44+
'25px 10px 30px #123f524c',
45+
'0px 0px 40px #123f5299',
46+
'0px 0px 62px #47494fff',
47+
'0px 0px 100px #47494fff',
4848
]
4949

5050
const GRADIENT_OPTIONS = [

‎src/block/accordion/deprecated.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,28 @@ import {
88
} from '~stackable/block-components'
99

1010
const deprecated = [
11+
{
12+
// Handle the migration of shadow attributes with the change of type in 3.15.3
13+
attributes: attributes( '3.16.2' ),
14+
save: withVersion( '3.16.2' )( Save ),
15+
isEligible: attributes => {
16+
const hasBlockShadow = deprecateBlockShadowColor.isEligible( attributes )
17+
const hasContainerShadow = deprecateContainerShadowColor.isEligible( attributes )
18+
19+
return hasBlockShadow || hasContainerShadow
20+
},
21+
migrate: attributes => {
22+
let newAttributes = { ...attributes }
23+
24+
newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
25+
newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
26+
newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
27+
newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
28+
newAttributes = deprecateBlockHeight.migrate( newAttributes )
29+
30+
return newAttributes
31+
},
32+
},
1133
{
1234
// Support the change of type for block height
1335
attributes: attributes( '3.15.3' ),
@@ -32,6 +54,14 @@ const deprecated = [
3254
attributes: attributes( '3.12.11' ),
3355
save: withVersion( '3.12.11' )( Save ),
3456
isEligible: attributes => {
57+
if ( (
58+
typeof attributes?.blockHeight === 'string' ||
59+
typeof attributes?.blockHeightTablet === 'string' ||
60+
typeof attributes?.blockHeightMobile === 'string' )
61+
) {
62+
return false
63+
}
64+
3565
const hasBlockShadow = deprecateBlockShadowColor.isEligible( attributes )
3666
const hasContainerShadow = deprecateContainerShadowColor.isEligible( attributes )
3767

0 commit comments

Comments
 (0)