Skip to content

Commit

Permalink
Merge pull request #646 from stellarwp/audit/KAD-4008
Browse files Browse the repository at this point in the history 
audit/KAD-4008
  • Loading branch information
@oakesjosh
oakesjosh authored Jan 20, 2025
2 parents 78b88e5 + e2120a8 commit 9222109
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 30 deletions.
13 changes: 7 additions & 6 deletions includes/blocks/class-kadence-blocks-infobox-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,20 +344,21 @@ 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'] . 'px' );
$css->add_property( 'border-radius', $media_style['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';
if ( isset( $media_style['borderWidth'][0] ) && is_numeric( $media_style['borderWidth'][0] ) ) {
$css->add_property( 'border-top-width', $media_style['borderWidth'][0] . 'px' );
$css->add_property( 'border-top-width', $media_style['borderWidth'][0] . $border_width_unit );
}
if ( isset( $media_style['borderWidth'][1] ) && is_numeric( $media_style['borderWidth'][1] ) ) {
$css->add_property( 'border-right-width', $media_style['borderWidth'][1] . 'px' );
$css->add_property( 'border-right-width', $media_style['borderWidth'][1] . $border_width_unit );
}
if ( isset( $media_style['borderWidth'][2] ) && is_numeric( $media_style['borderWidth'][2] ) ) {
$css->add_property( 'border-bottom-width', $media_style['borderWidth'][2] . 'px' );
$css->add_property( 'border-bottom-width', $media_style['borderWidth'][2] . $border_width_unit );
}
if ( isset( $media_style['borderWidth'][3] ) && is_numeric( $media_style['borderWidth'][3] ) ) {
$css->add_property( 'border-left-width', $media_style['borderWidth'][3] . 'px' );
$css->add_property( 'border-left-width', $media_style['borderWidth'][3] . $border_width_unit );
}
}
$padding_unit = isset( $media_style['paddingUnit'] ) ? $media_style['paddingUnit'] : 'px';
Expand Down Expand Up @@ -407,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'] ) ) {
Expand Down
2 changes: 2 additions & 0 deletions src/blocks/infobox/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,9 @@
"border": "",
"hoverBorder": "",
"borderRadius": 0,
"borderRadiusUnit": "px",
"borderWidth": [0, 0, 0, 0],
"borderWidthUnit": "px",
"padding": [10, 10, 10, 10],
"paddingUnit": "px",
"margin": [0, 15, 0, 15],
Expand Down
120 changes: 96 additions & 24 deletions src/blocks/infobox/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1831,7 +1831,9 @@ 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(
Expand Down Expand Up @@ -2758,18 +2760,38 @@ function KadenceInfoBox(props) {
onChange={(value) => saveMediaStyle({ borderWidth: value })}
onControl={(value) => setMediaBorderControl(value)}
min={0}
max={40}
max={
mediaStyle[0]?.borderWidthUnit === 'px' ||
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')}
label={__('Image Border Radius', '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' ||
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"
Expand Down Expand Up @@ -2949,7 +2971,7 @@ function KadenceInfoBox(props) {
value={mediaIcon[0].width}
defaultValue={2}
onChange={(value) => saveMediaIcon({ width: value })}
step={0.5}
step={0.1}
min={0.5}
max={4}
reset={true}
Expand All @@ -2962,19 +2984,39 @@ function KadenceInfoBox(props) {
onChange={(value) => saveMediaStyle({ borderWidth: value })}
onControl={(value) => setMediaBorderControl(value)}
min={0}
max={40}
max={
mediaStyle[0]?.borderWidthUnit === 'px' ||
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={__('Icon Border Radius (px)', 'kadence-blocks')}
label={__('Icon Border Radius', 'kadence-blocks')}
value={mediaStyle[0].borderRadius}
defaultValue={0}
onChange={(value) => saveMediaStyle({ borderRadius: value })}
step={1}
min={0}
max={200}
reset={true}
max={
mediaStyle[0]?.borderRadiusUnit === 'px' ||
mediaStyle[0]?.borderRadiusUnit === 'undefined'
? 200
: 12
}
reset={() =>
saveMediaStyle({ borderRadius: 0, borderRadiusUnit: 'px' })
}
showUnit={true}
unit={mediaStyle[0].borderRadiusUnit ?? 'px'}
onUnit={(value) => saveMediaStyle({ borderRadiusUnit: value })}
/>
<SelectControl
label={__('Icon Hover Animation', 'kadence-blocks')}
Expand Down Expand Up @@ -3138,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 @@ -3182,18 +3228,41 @@ function KadenceInfoBox(props) {
onChange={(value) => saveMediaStyle({ borderWidth: value })}
onControl={(value) => setMediaBorderControl(value)}
min={0}
max={40}
max={
mediaStyle[0]?.borderWidthUnit === 'px' ||
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' ||
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 Expand Up @@ -4116,16 +4185,19 @@ function KadenceInfoBox(props) {
style={{
borderColor: KadenceColorOutput(mediaStyle[0].border),
backgroundColor: KadenceColorOutput(mediaStyle[0].background),
borderRadius: mediaStyle[0].borderRadius + 'px',
borderRadius: mediaStyle[0].borderRadius + (mediaStyle[0].borderRadiusUnit ?? 'px'),
borderWidth: mediaStyle[0].borderWidth
? mediaStyle[0].borderWidth[0] +
'px ' +
(mediaStyle[0].borderWidthUnit ?? 'px') +
' ' +
mediaStyle[0].borderWidth[1] +
'px ' +
(mediaStyle[0].borderWidthUnit ?? 'px') +
' ' +
mediaStyle[0].borderWidth[2] +
'px ' +
(mediaStyle[0].borderWidthUnit ?? 'px') +
' ' +
mediaStyle[0].borderWidth[3] +
'px'
(mediaStyle[0].borderWidthUnit ?? 'px')
: '',
padding: mediaStyle[0].padding
? mediaStyle[0].padding[0] +
Expand Down

0 comments on commit 9222109

Please sign in to comment.