Skip to content

Commit ac622e1

Browse files
ArukuenArukuen
authored
fix (presets): add presets to image border radius, and deprecation (#3545)
1 parent 7d68db3 commit ac622e1

File tree

8 files changed

+229
-10
lines changed

8 files changed

+229
-10
lines changed

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,6 @@ export const addAttributes = ( attrObject, options = {} ) => {
5555
type: 'number',
5656
default: '',
5757
},
58-
imageBorderRadius: {
59-
type: 'number',
60-
default: '',
61-
},
6258

6359
imageOverlayColorType: {
6460
type: 'string',
@@ -147,4 +143,15 @@ export const addAttributes = ( attrObject, options = {} ) => {
147143
versionAdded: '3.0.0',
148144
versionDeprecated: '',
149145
} )
146+
147+
attrObject.add( {
148+
attributes: {
149+
imageBorderRadius: {
150+
type: 'string',
151+
default: '',
152+
},
153+
},
154+
versionAdded: '3.16.4',
155+
versionDeprecated: '',
156+
} )
150157
}

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,17 @@ export const deprecatedAddAttributes = attrObject => {
2727
versionAdded: '3.0.0',
2828
versionDeprecated: '3.12.0',
2929
} )
30+
31+
attrObject.add( {
32+
attributes: {
33+
imageBorderRadius: {
34+
type: 'number',
35+
default: '',
36+
},
37+
},
38+
versionAdded: '3.0.0',
39+
versionDeprecated: '3.16.4',
40+
} )
3041
}
3142

3243
export const deprecationImageOverlayOpacity = {
@@ -102,3 +113,24 @@ export const deprecationImageOverlayOpacity = {
102113
return newAttributes
103114
},
104115
}
116+
117+
export const deprecateImageBorderRadius = {
118+
isEligible: attributes => {
119+
const imageBorderRadius = attributes.imageBorderRadius
120+
121+
return typeof imageBorderRadius === 'number'
122+
},
123+
migrate: attributes => {
124+
const newAttributes = {
125+
...attributes,
126+
}
127+
128+
const imageBorderRadius = attributes.imageBorderRadius
129+
130+
if ( typeof imageBorderRadius === 'number' ) {
131+
newAttributes.imageBorderRadius = String( imageBorderRadius )
132+
}
133+
134+
return newAttributes
135+
},
136+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
useBlockSetAttributesContext,
2828
useDeviceType,
2929
useBlockLayoutDefaults,
30+
usePresetControls,
3031
} from '~stackable/hooks'
3132
import { getAttributeName } from '~stackable/util'
3233

@@ -124,6 +125,9 @@ const Controls = props => {
124125
return 100
125126
}, [ attributes.imageWidth, attributes.imageWidthUnit, attributes.imageHeight, attributes.imageHeightUnit ] )
126127

128+
const presetMarks = usePresetControls( 'borderRadius' )
129+
?.getPresetMarks( { addNonePreset: true } ) || null
130+
127131
return (
128132
<>
129133
{ applyFilters( 'stackable.block-component.image.before', null, props ) }
@@ -438,6 +442,7 @@ const Controls = props => {
438442
video: 'image-border-radius',
439443
description: __( 'Adjusts the radius of image corners to make them more rounded', i18n ),
440444
} }
445+
marks={ presetMarks }
441446
/>
442447
}
443448

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { useBlockEditContext } from '@wordpress/block-editor'
2020
import { applyFilters } from '@wordpress/hooks'
2121
import { useSelect } from '@wordpress/data'
2222

23-
export { deprecationImageOverlayOpacity } from './deprecated'
23+
export { deprecationImageOverlayOpacity, deprecateImageBorderRadius } from './deprecated'
2424
export { IMAGE_SHADOWS } from './edit'
2525

2626
export const Image = props => {

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -242,15 +242,25 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
242242
styleRule: 'borderRadius',
243243
attrName: 'imageBorderRadius',
244244
key: 'imageBorderRadius',
245-
format: '%spx',
245+
valueCallback: value => {
246+
if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
247+
return value
248+
}
249+
return value + 'px'
250+
},
246251
}, {
247252
...propsToPass,
248253
selector: `${ selector } img`,
249254
renderIn: 'save',
250255
styleRule: 'borderRadius',
251256
attrName: 'imageBorderRadius',
252257
key: 'imageBorderRadius-save',
253-
format: '%spx',
258+
valueCallback: value => {
259+
if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
260+
return value
261+
}
262+
return value + 'px'
263+
},
254264
} ] )
255265

256266
blockStyleGenerator.addBlockStyles( 'imageFocalPoint', [ {

‎src/block/card/deprecated.js‎

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
1414
deprecationImageOverlayOpacity, getAlignmentClasses,
1515
deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateBlockHeight,
16-
deprecateInnerBlockRowGapAndContainerHeight,
16+
deprecateInnerBlockRowGapAndContainerHeight, deprecateImageBorderRadius,
1717
} from '~stackable/block-components'
1818

1919
/**
@@ -87,6 +87,78 @@ addFilter( 'stackable.card.save.innerClassNames', 'stackable/3.0.2', ( output, p
8787
} )
8888

8989
const deprecated = [
90+
{
91+
// Support the change of type for border radius
92+
attributes: attributes( '3.16.3' ),
93+
save: withVersion( '3.16.3' )( Save ),
94+
isEligible: attributes => {
95+
const hasNumberBorderRadius = deprecateImageBorderRadius.isEligible( attributes )
96+
97+
return hasNumberBorderRadius
98+
},
99+
migrate: ( attributes, innerBlocks ) => {
100+
const isNotV4 = attributes.version < 2 || typeof attributes.version === 'undefined'
101+
102+
let newAttributes = {
103+
...attributes,
104+
}
105+
106+
if ( isNotV4 ) {
107+
newAttributes = {
108+
...newAttributes,
109+
version: 2,
110+
}
111+
112+
// Update the vertical align into flexbox
113+
const hasOldVerticalAlign = !! attributes.containerVerticalAlign // Column only, this was changed to flexbox
114+
115+
if ( hasOldVerticalAlign ) {
116+
newAttributes = {
117+
...newAttributes,
118+
containerVerticalAlign: '',
119+
innerBlockAlign: attributes.containerVerticalAlign,
120+
}
121+
}
122+
123+
// If the inner blocks are horizontal, adjust to accomodate the new
124+
// column gap, it will modify blocks because people used block
125+
// margins before instead of a proper column gap.
126+
if ( attributes.innerBlockOrientation === 'horizontal' ) {
127+
innerBlocks.forEach( ( block, index ) => {
128+
if ( index ) {
129+
if ( ! block.attributes.blockMargin ) {
130+
block.attributes.blockMargin = {
131+
top: '',
132+
right: '',
133+
bottom: '',
134+
left: '',
135+
}
136+
}
137+
if ( block.attributes.blockMargin.left === '' ) {
138+
block.attributes.blockMargin.left = 24
139+
}
140+
}
141+
} )
142+
143+
newAttributes = {
144+
...newAttributes,
145+
innerBlockColumnGap: 0,
146+
}
147+
}
148+
}
149+
150+
newAttributes = deprecationImageOverlayOpacity.migrate( newAttributes ),
151+
newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
152+
newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
153+
newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
154+
newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
155+
newAttributes = deprecateBlockHeight.migrate( newAttributes )
156+
newAttributes = deprecateInnerBlockRowGapAndContainerHeight.migrate( '%s' )( newAttributes )
157+
newAttributes = deprecateImageBorderRadius.migrate( newAttributes )
158+
159+
return [ newAttributes, innerBlocks ]
160+
},
161+
},
90162
{
91163
// Handle the migration of shadow attributes with the change of type in 3.15.3
92164
attributes: attributes( '3.16.2' ),

‎src/block/image/deprecated.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { withVersion } from '~stackable/higher-order'
55
import {
66
deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity, deprecationImageOverlayOpacity,
77
deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateShadowColor, deprecateTypographyFontSize,
8-
deprecateBlockHeight,
8+
deprecateBlockHeight, deprecateImageBorderRadius,
99
} from '~stackable/block-components'
1010

1111
import { RichText } from '@wordpress/block-editor'
@@ -60,6 +60,31 @@ addFilter( 'stackable.image.save.wrapper', 'stackable/image-caption-wrapper', (
6060
} )
6161

6262
const deprecated = [
63+
{
64+
// Support the change of type for border radius
65+
attributes: attributes( '3.16.3' ),
66+
save: withVersion( '3.16.3' )( Save ),
67+
isEligible: attributes => {
68+
const hasNumberBorderRadius = deprecateImageBorderRadius.isEligible( attributes )
69+
70+
return hasNumberBorderRadius
71+
},
72+
migrate: attributes => {
73+
let newAttributes = { ...attributes }
74+
75+
newAttributes = deprecationImageOverlayOpacity.migrate( newAttributes )
76+
newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
77+
newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
78+
newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
79+
newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
80+
newAttributes = deprecateShadowColor.migrate( 'image%s' )( newAttributes )
81+
newAttributes = deprecateTypographyFontSize.migrate( 'figcaption%s' )( newAttributes )
82+
newAttributes = deprecateBlockHeight.migrate( newAttributes )
83+
newAttributes = deprecateImageBorderRadius.migrate( newAttributes )
84+
85+
return newAttributes
86+
},
87+
},
6388
{
6489
// Handle the migration of shadow attributes with the change of type in 3.15.3
6590
attributes: attributes( '3.16.2' ),

‎src/block/posts/deprecated.js‎

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
Image, deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
1414
deprecateTypographyGradientColor, deprecationImageOverlayOpacity,
1515
deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateShadowColor,
16-
deprecateTypographyFontSize, deprecateBlockHeight,
16+
deprecateTypographyFontSize, deprecateBlockHeight, deprecateImageBorderRadius,
1717
} from '~stackable/block-components'
1818

1919
/**
@@ -42,6 +42,74 @@ addFilter( 'stackable.posts.title.readmore-content', 'stackable/3_0_2', addUndef
4242
addFilter( 'stackable.posts.feature-image', 'stackable/3_6_3', determineFeatureImage )
4343

4444
const deprecated = [
45+
{
46+
// Support the change of type for border radius
47+
attributes: attributes( '3.16.3' ),
48+
save: withVersion( '3.16.3' )( Save ),
49+
isEligible: attributes => {
50+
const hasNumberBorderRadius = deprecateImageBorderRadius.isEligible( attributes )
51+
52+
return hasNumberBorderRadius
53+
},
54+
migrate: attributes => {
55+
let newAttributes = {
56+
...attributes,
57+
version: 2,
58+
}
59+
60+
// We used to have an "Inner content width" which is now just the block width
61+
const hasOldInnerContentWidth = attributes.innerBlockContentWidth || attributes.innerBlockContentWidthTablet || attributes.innerBlockContentWidthMobile
62+
63+
if ( hasOldInnerContentWidth ) {
64+
newAttributes = {
65+
...newAttributes,
66+
innerBlockContentWidth: '',
67+
innerBlockContentWidthTablet: '',
68+
innerBlockContentWidthMobile: '',
69+
innerBlockContentWidthUnit: 'px',
70+
innerBlockContentWidthUnitTablet: '',
71+
innerBlockContentWidthUnitMobile: '',
72+
blockWidth: attributes.innerBlockContentWidth,
73+
blockWidthTablet: attributes.innerBlockContentWidthTablet,
74+
blockWidthMobile: attributes.innerBlockContentWidthMobile,
75+
blockWidthUnit: attributes.innerBlockContentWidthUnit,
76+
blockWidthUnitTablet: attributes.innerBlockContentWidthUnitTablet,
77+
blockWidthUnitMobile: attributes.innerBlockContentWidthUnitMobile,
78+
innerBlockAlign: '',
79+
innerBlockAlignTablet: '',
80+
innerBlockAlignMobile: '',
81+
blockHorizontalAlign: attributes.innerBlockAlign,
82+
blockHorizontalAlignTablet: attributes.innerBlockAlignTablet,
83+
blockHorizontalAlignMobile: attributes.innerBlockAlignMobile,
84+
}
85+
}
86+
87+
newAttributes = deprecationImageOverlayOpacity.migrate( newAttributes )
88+
newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes )
89+
newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes )
90+
91+
newAttributes = deprecateTypographyGradientColor.migrate( 'title%s' )( newAttributes )
92+
newAttributes = deprecateTypographyGradientColor.migrate( 'category%s' )( newAttributes )
93+
newAttributes = deprecateTypographyGradientColor.migrate( 'excerpt%s' )( newAttributes )
94+
newAttributes = deprecateTypographyGradientColor.migrate( 'meta%s' )( newAttributes )
95+
newAttributes = deprecateTypographyGradientColor.migrate( 'readmore%s' )( newAttributes )
96+
97+
newAttributes = deprecateBlockShadowColor.migrate( newAttributes )
98+
newAttributes = deprecateContainerShadowColor.migrate( newAttributes )
99+
newAttributes = deprecateShadowColor.migrate( 'image%s' )( newAttributes )
100+
101+
newAttributes = deprecateTypographyFontSize.migrate( 'title%s' )( newAttributes )
102+
newAttributes = deprecateTypographyFontSize.migrate( 'category%s' )( newAttributes )
103+
newAttributes = deprecateTypographyFontSize.migrate( 'excerpt%s' )( newAttributes )
104+
newAttributes = deprecateTypographyFontSize.migrate( 'meta%s' )( newAttributes )
105+
newAttributes = deprecateTypographyFontSize.migrate( 'readmore%s' )( newAttributes )
106+
107+
newAttributes = deprecateBlockHeight.migrate( newAttributes )
108+
newAttributes = deprecateImageBorderRadius.migrate( newAttributes )
109+
110+
return newAttributes
111+
},
112+
},
45113
{
46114
// Handle the migration of shadow attributes with the change of type in 3.15.3
47115
attributes: attributes( '3.16.2' ),

0 commit comments

Comments
 (0)