KAD-4008 image border/border radius now use em/rem

stellarwp · Jan 15, 2025 · fe1a394 · fe1a394
1 parent 3ac71d9
commit fe1a394
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/includes/blocks/class-kadence-blocks-infobox-block.php b/includes/blocks/class-kadence-blocks-infobox-block.php
@@ -408,7 +408,7 @@ 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'] . 'px' );
+			$css->add_property( 'border-radius', $media_style['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
@@ -1831,7 +1831,7 @@ function KadenceInfoBox(props) {
 				  )} !important; }`
 				: ''}
 			{mediaStyle[0].borderRadius && mediaStyle[0].padding.some((number) => number > 0)
-				? `.kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .kadence-info-box-image-intrisic img, .kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .block-editor-media-placeholder { border-radius: ${mediaStyle[0].borderRadius}px !important; }`
+				? `.kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .kadence-info-box-image-intrisic img, .kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .block-editor-media-placeholder { border-radius: ${mediaStyle[0].borderRadius}${mediaStyle[0].borderRadiusUnit ?? 'px'} !important; }`
 				: ''}
 			{titleHoverColor
 				? `.kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-title { color: ${KadenceColorOutput(
@@ -2758,18 +2758,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={__('Image Border Radius (px)', 'kadence-blocks')}
 												value={mediaStyle[0].borderRadius}
 												onChange={(value) => saveMediaStyle({ borderRadius: value })}
 												step={1}
 												min={0}
-												max={200}
-												reset={() => saveMediaStyle({ borderRadius: 0 })}
+												max={
+													mediaStyle[0].borderRadiusUnit === 'px' ||
+													typeof mediaStyle[0].borderRadiusUnit === 'undefined'
+														? 200
+														: 12
+												}
+												reset={() => saveMediaStyle({ borderRadius: 0, borderRadiusUnit: 'px' })}
+												showUnit={true}
+												unit={mediaStyle[0].borderRadiusUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderRadiusUnit: value })}
 											/>
 											<TabPanel
 												className="kt-inspect-tabs kt-hover-tabs"