fix (icon label): change how icon gap works (#3209)

* fix icon label gap * change implementation * check icon size * fix isEligible * update comments * minor fix * Update src/block/icon-label/style.scss [skip ci] * Update src/block/icon-label/schema.js [skip ci] * fix flex value in editor * fix deprecation for tablet and mobile --------- Co-authored-by: Benjamin Intal <bfintal@gmail.com>
gambitph · Jul 11, 2024 · 7c2d8f7 · 7c2d8f7
1 parent fa0c6a1
commit 7c2d8f7
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 13 deletions.
diff --git a/plugin.php b/plugin.php
@@ -250,6 +250,7 @@ function is_frontend() {
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block-components/alignment/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/columns/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/timeline/index.php' );
+	require_once( plugin_dir_path( __FILE__ ) . 'src/block/icon-label/deprecated.php' );
 }
 
 /**

diff --git a/src/block/icon-label/deprecated.js b/src/block/icon-label/deprecated.js
@@ -8,6 +8,51 @@ import {
 } from '~stackable/block-components'
 
 const deprecated = [
+	{
+		attributes: attributes( '3.13.1' ),
+		save: withVersion( '3.13.1' )( Save ),
+		isEligible: ( attributes, innerBlocks ) => {
+			const iconBlockAttributes = innerBlocks[ 0 ].attributes
+			const hasIconSize = iconBlockAttributes.iconSize || iconBlockAttributes.iconSizeTablet || iconBlockAttributes.iconSizeMobile ? true : false
+			const hasIconGap = attributes.iconGap || attributes.iconGapTablet || attributes.iconGapMobile ? true : false
+			const hasIconGap2 = attributes.iconGap2 || attributes.iconGap2Tablet || attributes.iconGap2Mobile ? true : false
+			return hasIconGap || ( hasIconSize && ! hasIconGap2 )
+		},
+		migrate: ( attributes, innerBlocks ) => {
+			const newAttributes = { ...attributes }
+
+			const {
+				iconGap, iconGapTablet, iconGapMobile,
+			} = attributes
+
+			const iconBlockAttributes = innerBlocks[ 0 ].attributes
+			const {
+				iconSize, iconSizeTablet, iconSizeMobile,
+			} = iconBlockAttributes
+
+			const _iconSize = iconSize ? iconSize : 36
+			const _iconSizeTablet = iconSizeTablet ? iconSizeTablet : _iconSize
+			const _iconSizeMobile = iconSizeMobile ? iconSizeMobile : _iconSizeTablet
+
+			const _iconGap = iconGap ? iconGap : 64
+			const _iconGapTablet = iconGapTablet ? iconGapTablet : _iconGap
+			const _iconGapMobile = iconGapMobile ? iconGapMobile : _iconGapTablet
+
+			const newIconGap = _iconGap - _iconSize >= 0 ? _iconGap - _iconSize : 0
+			const newIconGapTablet = _iconGapTablet - _iconSizeTablet >= 0 ? _iconGapTablet - _iconSizeTablet : 0
+			const newIconGapMobile = _iconGapMobile - _iconSizeMobile >= 0 ? _iconGapMobile - _iconSizeMobile : 0
+
+			newAttributes.iconGap2 = newIconGap === 28 ? '' : newIconGap
+			newAttributes.iconGap2Tablet = newIconGapTablet === 28 ? '' : newIconGapTablet
+			newAttributes.iconGap2Mobile = newIconGapMobile === 28 ? '' : newIconGapMobile
+
+			newAttributes.iconGap = ''
+			newAttributes.iconGapTablet = ''
+			newAttributes.iconGapMobile = ''
+
+			return newAttributes
+		},
+	},
 	{
 		// Support the new shadow color.
 		attributes: attributes( '3.12.11' ),

diff --git a/src/block/icon-label/deprecated.php b/src/block/icon-label/deprecated.php
@@ -0,0 +1,37 @@
+<?php
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! function_exists( 'stackable_render_block_icon_label' ) ) {
+	/**
+	 * Adds a special class if block uses the old icon gap attribute
+	 */
+	function stackable_render_block_icon_label( $block_content, $block ) {
+		$attributes = $block[ 'attrs' ];
+
+		// check if inner blocks contain an icon block
+		if ( ! isset( $block[ 'innerBlocks' ][0] ) || ! isset( $block[ 'innerBlocks' ][0]['blockName'] ) || $block[ 'innerBlocks' ][0]['blockName'] !== 'stackable/icon' ) {
+			return $block_content;
+		}
+
+		$has_icon_gap = isset( $attributes[ 'iconGap' ] ) || isset( $attributes[ 'iconGapTablet' ] ) || isset( $attributes[ 'iconGapMobile' ] );
+		$has_icon_gap2 = isset( $attributes[ 'iconGap2' ] ) || isset( $attributes[ 'iconGap2Tablet' ] ) || isset( $attributes[ 'iconGap2Mobile' ] );
+
+		$icon_block_attrs = $block[ 'innerBlocks' ][0]['attrs'];
+		$has_icon_size = isset( $icon_block_attrs['iconSize'] ) || isset( $icon_block_attrs['iconSizeTablet'] ) || isset( $icon_block_attrs['iconSizeMobile'] );
+
+
+		// check if the block uses the old icon gap attribute
+		$use_old_styles = ( $has_icon_gap || $has_icon_size ) && ! $has_icon_gap2;
+
+		if ( $use_old_styles ) {
+			return preg_replace( '/stk-block-icon-label/i', 'stk-block-icon-label stk-block-icon-label--use-flex-basis', $block_content );
+		}
+
+		return $block_content;
+	}
+	add_filter( 'render_block_stackable/icon-label', 'stackable_render_block_icon_label', 10, 2 );
+}
diff --git a/src/block/icon-label/edit.js b/src/block/icon-label/edit.js
@@ -88,11 +88,11 @@ const Edit = props => {
 						>
 							<AdvancedRangeControl
 								label={ __( 'Icon Gap', i18n ) }
-								attribute="iconGap"
+								attribute="iconGap2"
 								responsive="all"
 								min={ 0 }
 								sliderMax={ 300 }
-								placeholder="64"
+								placeholder="28"
 							/>
 						</PanelAdvancedSettings>
 

diff --git a/src/block/icon-label/editor.scss b/src/block/icon-label/editor.scss
@@ -1,9 +1,9 @@
 .stk-block-icon-label [data-type="stackable/icon"] {
-	flex: 0 0 64px;
+	flex: 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;
 }
 .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;
+}
diff --git a/src/block/icon-label/schema.js b/src/block/icon-label/schema.js
@@ -32,11 +32,18 @@ export const attributes = ( version = VERSION ) => {
 	ConditionalDisplay.addAttributes( attrObject )
 	attrObject.add( {
 		attributes: {
+			// iconGap is deprecated but is kept for migration purposes
 			iconGap: {
 				type: 'number',
 				stkResponsive: true,
 				default: '',
 			},
+			// This replaces iconGap above, the old attribute changes the flex basis, now it's gap
+			iconGap2: {
+				type: 'number',
+				stkResponsive: true,
+				default: '',
+			},
 		},
 		versionAdded: '3.0.0',
 		versionDeprecated: '',

diff --git a/src/block/icon-label/style.js b/src/block/icon-label/style.js
@@ -29,20 +29,20 @@ const Styles = props => {
 			<BlockCss
 				{ ...propsToPass }
 				renderIn="save"
-				selector=".stk-block-icon"
-				attrName="iconGap"
+				selector=".stk-inner-blocks"
+				attrName="iconGap2"
 				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"]` }
-				attrName="iconGap"
+				selector=".stk-inner-blocks .block-editor-block-list__layout"
+				attrName="iconGap2"
 				key="iconGap"
-				styleRule="flexBasis"
+				styleRule="gap"
 				format="%spx"
 				responsive="all"
 			/>

diff --git a/src/block/icon-label/style.scss b/src/block/icon-label/style.scss
@@ -1,8 +1,9 @@
 .stk-block-icon-label {
-	// Default width of the icon width.
-	.stk-block-icon {
-		flex: 0 0 64px;
+	// used by iconGap2
+	.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;
@@ -25,3 +26,14 @@
 		width: inherit;
 	}
 }
+
+// Deprecated styles: we changed how icon gap works. Before it was flex basis, now it's a gap
+.stk-block-icon-label.stk-block-icon-label--use-flex-basis {
+	// Default width of the icon width.
+	.stk-block-icon {
+		flex: 0 0 64px;
+	}
+	.stk-inner-blocks {
+		gap: 0;
+	}
+}