From d14b01fc0fb6b7ab352fdd1d00b0e265b8e66cd2 Mon Sep 17 00:00:00 2001 From: Alquen Sarmiento Date: Mon, 7 Jul 2025 13:35:07 +0800 Subject: [PATCH] fix: add presets to image border radius, and deprecation --- src/block-components/image/attributes.js | 15 +++- .../image/deprecated/index.js | 32 ++++++++ src/block-components/image/edit.js | 5 ++ src/block-components/image/index.js | 2 +- src/block-components/image/style.js | 14 +++- src/block/card/deprecated.js | 74 ++++++++++++++++++- src/block/image/deprecated.js | 27 ++++++- src/block/posts/deprecated.js | 70 +++++++++++++++++- 8 files changed, 229 insertions(+), 10 deletions(-) diff --git a/src/block-components/image/attributes.js b/src/block-components/image/attributes.js index da756b491a..eec9f7dc87 100644 --- a/src/block-components/image/attributes.js +++ b/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: '', + } ) } diff --git a/src/block-components/image/deprecated/index.js b/src/block-components/image/deprecated/index.js index f09f2fb532..cda398e594 100644 --- a/src/block-components/image/deprecated/index.js +++ b/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 + }, +} diff --git a/src/block-components/image/edit.js b/src/block-components/image/edit.js index 2277968427..54a6296d0a 100644 --- a/src/block-components/image/edit.js +++ b/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 } /> } diff --git a/src/block-components/image/index.js b/src/block-components/image/index.js index 2d30fa17f4..8ef9f64b0e 100644 --- a/src/block-components/image/index.js +++ b/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 => { diff --git a/src/block-components/image/style.js b/src/block-components/image/style.js index 62dc4d15ec..000c695fba 100644 --- a/src/block-components/image/style.js +++ b/src/block-components/image/style.js @@ -242,7 +242,12 @@ 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`, @@ -250,7 +255,12 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => { 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', [ { diff --git a/src/block/card/deprecated.js b/src/block/card/deprecated.js index 1840966585..38bf3e6b8d 100644 --- a/src/block/card/deprecated.js +++ b/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' ), diff --git a/src/block/image/deprecated.js b/src/block/image/deprecated.js index 2a31e92763..823370205c 100644 --- a/src/block/image/deprecated.js +++ b/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' ), diff --git a/src/block/posts/deprecated.js b/src/block/posts/deprecated.js index 0b525a7200..4df0b3c283 100644 --- a/src/block/posts/deprecated.js +++ b/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' ),