fix icon label gap

src/block/icon-label/deprecated.js

@@ -6,8 +6,48 @@ import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
 	deprecateBlockShadowColor, deprecateContainerShadowColor,
 } from '~stackable/block-components'
+import classnames from 'classnames/dedupe'
+import { addFilter } from '@wordpress/hooks'
+import { semverCompare } from '~stackable/util'
+
+addFilter( 'stackable.icon-label.save.blockClassNames', 'stackable/3.13.2', ( output, props ) => {
+	if ( semverCompare( props.version, '<=', '3.13.1' ) ) {
+		return classnames( output, {
+			'stk-block-icon-label--v2': false,
+		} )
+	}
+
+	return output
+} )
 
 const deprecated = [
+	{
+		attributes: attributes( '3.13.1' ),
+		save: withVersion( '3.13.1' )( Save ),
+		isEligible: attributes => {
+			const isNotV2 = attributes.version < 2 || typeof attributes.version === 'undefined'
+			return isNotV2
+		},
+		migrate: ( attributes, innerBlocks ) => {
+			const newAttributes = {
+				...attributes,
+				version: 2,
+			}
+
+			const { iconGap } = attributes
+
+			const iconBlockAttributes = innerBlocks[ 0 ].attributes
+			const { iconSize } = iconBlockAttributes
+
+			const _iconSize = iconSize ? iconSize : 36
+			const _iconGap = iconGap ? iconGap : 64
+
+			const newIconGap = _iconGap - _iconSize >= 0 ? _iconGap - _iconSize : 0
+			newAttributes.iconGap = newIconGap === 28 ? '' : newIconGap
+
+			return newAttributes
+		},
+	},
 	{
 		// Support the new shadow color.
 		attributes: attributes( '3.12.11' ),

src/block/icon-label/edit.js

@@ -65,6 +65,7 @@ const Edit = props => {
 	const blockClassNames = classnames( [
 		className,
 		'stk-block-icon-label',
+		'stk-block-icon-label--v2',
 		rowClass,
 	] )
 
@@ -92,7 +93,7 @@ const Edit = props => {
 								responsive="all"
 								min={ 0 }
 								sliderMax={ 300 }
-								placeholder="64"
+								placeholder="28"
 							/>
 						</PanelAdvancedSettings>
 

src/block/icon-label/editor.scss

@@ -1,9 +1,9 @@
 .stk-block-icon-label [data-type="stackable/icon"] {
-	flex: 0 0 64px;
+	flex: 0 0 0;
 }
 // Icon label can collapse in mobile in the editor.
 .stk-preview-device-mobile .stk-block-icon-label .block-editor-block-list__layout [data-type="stackable/icon"] {
-	flex: 0 0 64px;
+	flex: 0 0 0;
 }
 .stk-preview-device-mobile .stk-block-icon-label .block-editor-block-list__layout [data-type="stackable/heading"] {
 	flex: 1 1 0;
@@ -14,3 +14,7 @@
 		max-width: unset !important;
 	}
 }
+
+.stk-block-icon-label .stk-inner-blocks .block-editor-block-list__layout {
+	gap: 28px;
+}

src/block/icon-label/save.js

@@ -22,6 +22,7 @@ import {
  */
 import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
+import { applyFilters } from '@wordpress/hooks'
 
 export const Save = props => {
 	const {
@@ -32,11 +33,13 @@ export const Save = props => {
 	const blockAlignmentClass = getAlignmentClasses( attributes )
 	const responsiveClass = getResponsiveClasses( attributes )
 
-	const blockClassNames = classnames( [
+	const blockClassNames = classnames( applyFilters( 'stackable.icon-label.save.blockClassNames', [
 		className,
 		'stk-block-icon-label',
+		'stk-block-icon-label--v2',
 		responsiveClass,
-	] )
+	], props )
+	)
 
 	const contentClassNames = classnames( [
 		rowClass,
@@ -50,6 +53,7 @@ export const Save = props => {
 			className={ blockClassNames }
 			attributes={ attributes }
 			version={ props.version }
+			data-v={ props.attributes.version }
 		>
 			<IconLabelStyles.Content version={ props.version } attributes={ attributes } />
 			<CustomCSS.Content attributes={ attributes } />

src/block/icon-label/schema.js

@@ -37,11 +37,25 @@ export const attributes = ( version = VERSION ) => {
 				stkResponsive: true,
 				default: '',
 			},
+			version: {
+				type: 'number',
+				source: 'attribute',
+				attribute: 'data-v',
+				default: undefined,
+			},
 		},
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	} )
 
+	attrObject.addDefaultValues( {
+		attributes: {
+			version: 2,
+		},
+		versionAdded: '3.13.2',
+		versionDeprecated: '',
+	} )
+
 	return attrObject.getMerged( version )
 }
 

src/block/icon-label/style.js

@@ -29,20 +29,20 @@ const Styles = props => {
 			<BlockCss
 				{ ...propsToPass }
 				renderIn="save"
-				selector=".stk-block-icon"
+				selector=".stk-inner-blocks"
 				attrName="iconGap"
 				key="iconGap-save"
-				styleRule="flexBasis"
+				styleRule="gap"
 				format="%spx"
 				responsive="all"
 			/>
 			<BlockCss
 				{ ...propsToPass }
 				renderIn="edit"
-				selector={ `.stk-inner-blocks [data-block][data-type="stackable/icon"]` }
+				selector=".stk-inner-blocks .block-editor-block-list__layout"
 				attrName="iconGap"
 				key="iconGap"
-				styleRule="flexBasis"
+				styleRule="gap"
 				format="%spx"
 				responsive="all"
 			/>

src/block/icon-label/style.scss

@@ -1,8 +1,13 @@
 .stk-block-icon-label {
 	// Default width of the icon width.
-	.stk-block-icon {
+	&:not(.stk-block-icon-label--v2) .stk-block-icon {
 		flex: 0 0 64px;
 	}
+
+	&.stk-block-icon-label--v2 .stk-inner-blocks {
+		gap: 28px;
+	}
+
 	// Remove margins and make sure the icon and text are both centered.
 	:is(.stk-block-icon, .stk-block-heading) {
 		--stk-block-margin-bottom: 0;