From 8a6490eefccbed6611149b491b7e790c65b6c424 Mon Sep 17 00:00:00 2001
From: gilbert-hernandez <gilbert.hernandez@kadencewp.com>
Date: Wed, 15 Jan 2025 14:38:39 -0700
Subject: [PATCH] KAD-4008 number size/border/border radius now use em/rem

---
 .../class-kadence-blocks-infobox-block.php    |  6 ++--
 src/blocks/infobox/edit.js                    | 36 ++++++++++++++-----
 src/blocks/infobox/save.js                    |  2 +-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/includes/blocks/class-kadence-blocks-infobox-block.php b/includes/blocks/class-kadence-blocks-infobox-block.php
index 6b1dcfc4b..6a33a1e74 100644
--- a/includes/blocks/class-kadence-blocks-infobox-block.php
+++ b/includes/blocks/class-kadence-blocks-infobox-block.php
@@ -344,7 +344,8 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 			$css->add_property( 'border-color', $css->render_color( $media_style['border'] ) );
 		}
 		if ( isset( $media_style['borderRadius'] ) && ! empty( $media_style['borderRadius'] ) ) {
-			$css->add_property( 'border-radius', $media_style['borderRadius'] . ( isset( $media_style['borderRadiusUnit'] )  ? $media_style['borderRadiusUnit'] : 'px' ) );
+//			$css->add_property( 'border-radius', $media_style['borderRadius'] . ( isset( $media_style['borderRadiusUnit'] )  ? $media_style['borderRadiusUnit'] : 'px' ) );
+			$css->render_border_radius( $attributes, 'borderRadius', ( isset( $media_style['borderRadiusUnit'] ) ? $media_style['borderRadiusUnit'] : 'px' ) );
 		}
 		if ( isset( $media_style['borderWidth'] ) && is_array( $media_style['borderWidth'] ) ) {
 			$border_width_unit = isset( $media_style['borderWidthUnit'] ) ? $media_style['borderWidthUnit'] : 'px';
@@ -408,7 +409,8 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 		}
 		if ( isset( $media_style['borderRadius'] ) && ! empty( $media_style['borderRadius'] ) && isset( $media_style['padding'] ) && is_array( $media_style['padding'] ) && ! empty( array_filter( $media_style['padding'], fn($value) => $value > 0 ) ) ) {
 			$css->set_selector( $base_selector . ' .kt-blocks-info-box-media .kadence-info-box-image-intrisic img' );
-			$css->add_property( 'border-radius', $media_style['borderRadius'] . (isset( $media_style['borderRadiusUnit'] ) ? $media_style['borderRadiusUnit'] : 'px') );
+//			$css->add_property( 'border-radius', $media_style['borderRadius'] . (isset( $media_style['borderRadiusUnit'] ) ? $media_style['borderRadiusUnit'] : 'px') );
+			$css->render_border_radius( $attributes, 'borderRadius', ( isset( $media_style['borderRadiusUnit'] ) ? $media_style['borderRadiusUnit'] : 'px' ) );
 		}
 		$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media' );
 		if ( isset( $media_icon['hoverColor'] ) && ! empty( $media_icon['hoverColor'] ) ) {
diff --git a/src/blocks/infobox/edit.js b/src/blocks/infobox/edit.js
index dbabe06a9..133448a0e 100644
--- a/src/blocks/infobox/edit.js
+++ b/src/blocks/infobox/edit.js
@@ -2775,7 +2775,7 @@ function KadenceInfoBox(props) {
 												onUnit={(value) => saveMediaStyle({ borderWidthUnit: value })}
 											/>
 											<RangeControl
-												label={__('Image Border Radius (px)', 'kadence-blocks')}
+												label={__('Image Border Radius', 'kadence-blocks')}
 												value={mediaStyle[0].borderRadius}
 												onChange={(value) => saveMediaStyle({ borderRadius: value })}
 												step={1}
@@ -3180,10 +3180,14 @@ function KadenceInfoBox(props) {
 												onChange={(value) => saveMediaIcon({ size: value })}
 												onChangeTablet={(value) => saveMediaIcon({ tabletSize: value })}
 												onChangeMobile={(value) => saveMediaIcon({ mobileSize: value })}
-												min={5}
-												max={250}
+												min={['em', 'rem'].includes(mediaIcon[0].unit) ? 1 : 5}
+												max={['em', 'rem'].includes(mediaIcon[0].unit) ? 12 : 250}
 												step={1}
 												reset={true}
+												showUnit={true}
+												onUnit={(value) => saveMediaIcon({ unit: value })}
+												units={['px', 'em', 'rem']}
+												unit={mediaIcon[0].unit ? mediaIcon[0].unit : 'px'}
 											/>
 											<TypographyControls
 												fontGroup={'body'}
@@ -3224,18 +3228,34 @@ function KadenceInfoBox(props) {
 												onChange={(value) => saveMediaStyle({ borderWidth: value })}
 												onControl={(value) => setMediaBorderControl(value)}
 												min={0}
-												max={40}
+												max={
+													mediaStyle[0].borderWidthUnit === 'px' ||
+													typeof mediaStyle[0].borderWidthUnit === 'undefined'
+														? 40
+														: 12
+												}
 												step={1}
-												reset={() => saveMediaStyle({ borderWidth: [0, 0, 0, 0] })}
+												reset={() => saveMediaStyle({ borderWidth: [0, 0, 0, 0], borderWidthUnit: 'px' })}
+												showUnit={true}
+												unit={mediaStyle[0].borderWidthUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderWidthUnit: value })}
 											/>
 											<RangeControl
-												label={__('Number Border Radius (px)', 'kadence-blocks')}
+												label={__('Number Border Radius', 'kadence-blocks')}
 												value={mediaStyle[0].borderRadius}
 												onChange={(value) => saveMediaStyle({ borderRadius: value })}
 												step={1}
 												min={0}
-												max={200}
-												reset={() => saveMediaStyle({ borderRadius: [0, 15, 0, 15] })}
+												max={
+													mediaStyle[0].borderRadiusUnit === 'px' ||
+													typeof mediaStyle[0].borderRadiusUnit === 'undefined'
+														? 200
+														: 12
+												}
+												reset={() => saveMediaStyle({ borderRadius: [0, 15, 0, 15], borderRadiusUnit: 'px' })}
+												showUnit={true}
+												unit={mediaStyle[0].borderRadiusUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderRadiusUnit: value })}
 											/>
 											<SelectControl
 												label={__('Number Hover Animation', 'kadence-blocks')}
diff --git a/src/blocks/infobox/save.js b/src/blocks/infobox/save.js
index 72c838694..ad9c68cb7 100644
--- a/src/blocks/infobox/save.js
+++ b/src/blocks/infobox/save.js
@@ -135,7 +135,7 @@ function Save({ attributes, className }) {
 			}`}
 		>
 			<div className={'kadence-info-box-number-inner-container'}>
-				<RichText.Content className="kt-blocks-info-box-number" tagName={'div'} value={number ? number : ''} />
+				<RichText.Content className="kt-blocks-info-box-number" tagName={'div'} value={number.text ? number.text : ''} />
 			</div>
 		</div>
 	);