Skip to content

Commit

Permalink
KAD-4008 number size/border/border radius now use em/rem
Browse files Browse the repository at this point in the history
  • Loading branch information
@gilbert-hernandez
gilbert-hernandez committed Jan 15, 2025
1 parent e754028 commit 8a6490e
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 11 deletions.
6 changes: 4 additions & 2 deletions includes/blocks/class-kadence-blocks-infobox-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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'] ) ) {
Expand Down
36 changes: 28 additions & 8 deletions src/blocks/infobox/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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'}
Expand Down Expand Up @@ -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')}
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/infobox/save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 8a6490e

Please sign in to comment.