Skip to content

Commit

Permalink
Merge pull request #636 from stellarwp/audit/KAD-3783
Browse files Browse the repository at this point in the history 
audit/KAD-3783
  • Loading branch information
@oakesjosh
oakesjosh authored Jan 6, 2025
2 parents 7d5b821 + 75f95d9 commit 5ca55b8
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 47 deletions.
48 changes: 27 additions & 21 deletions includes/blocks/class-kadence-blocks-infobox-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,20 +301,22 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->add_property( 'fill', $media_icon['hoverColor'] );
}
}
// Media icon unit
$media_icon_unit = isset( $media_icon['unit'] ) ? $media_icon['unit'] : 'px' ;
if ( ! empty( $media_icon['size'] ) ) {
$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
$css->add_property( 'font-size', $media_icon['size'] . 'px' );
$css->add_property( 'font-size', $media_icon['size'] . $media_icon_unit );
}
if ( isset( $media_icon['tabletSize'] ) && is_numeric( $media_icon['tabletSize'] ) ) {
$css->set_media_state( 'tablet' );
$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
$css->add_property( 'font-size', $media_icon['tabletSize'] . 'px' );
$css->add_property( 'font-size', $media_icon['tabletSize'] . $media_icon_unit );
$css->set_media_state( 'desktop' );
}
if ( isset( $media_icon['mobileSize'] ) && is_numeric( $media_icon['mobileSize'] ) ) {
$css->set_media_state( 'mobile' );
$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
$css->add_property( 'font-size', $media_icon['mobileSize'] . 'px' );
$css->add_property( 'font-size', $media_icon['mobileSize'] . $media_icon_unit );
$css->set_media_state( 'desktop' );
}
if ( ( isset( $media_number['family'] ) && ! empty( $media_number['family'] ) ) || ( isset( $media_number['style'] ) && ! empty( $media_number['style'] ) ) || ( isset( $media_number['weight'] ) && ! empty( $media_number['weight'] ) ) ) {
Expand Down Expand Up @@ -358,47 +360,49 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->add_property( 'border-left-width', $media_style['borderWidth'][3] . 'px' );
}
}
$padding_unit = isset( $media_style['paddingUnit'] ) ? $media_style['paddingUnit'] : 'px';
if ( isset( $media_style['padding'] ) && is_array( $media_style['padding'] ) ) {
if ( isset( $media_style['padding'][0] ) && is_numeric( $media_style['padding'][0] ) ) {
$css->add_property( 'padding-top', $media_style['padding'][0] . 'px' );
$css->add_property( 'padding-top', $media_style['padding'][0] . $padding_unit );
}
if ( isset( $media_style['padding'][1] ) && is_numeric( $media_style['padding'][1] ) ) {
$css->add_property( 'padding-right', $media_style['padding'][1] . 'px' );
$css->add_property( 'padding-right', $media_style['padding'][1] . $padding_unit );
}
if ( isset( $media_style['padding'][2] ) && is_numeric( $media_style['padding'][2] ) ) {
$css->add_property( 'padding-bottom', $media_style['padding'][2] . 'px' );
$css->add_property( 'padding-bottom', $media_style['padding'][2] . $padding_unit );
}
if ( isset( $media_style['padding'][3] ) && is_numeric( $media_style['padding'][3] ) ) {
$css->add_property( 'padding-left', $media_style['padding'][3] . 'px' );
$css->add_property( 'padding-left', $media_style['padding'][3] . $padding_unit );
}
}
$margin_unit = isset( $media_style['marginUnit'] ) ? $media_style['marginUnit'] : 'px';
if ( isset( $media_style['margin'] ) && is_array( $media_style['margin'] ) && isset( $attributes['mediaAlign'] ) && 'top' !== $attributes['mediaAlign'] ) {
if ( isset( $media_style['margin'][0] ) && is_numeric( $media_style['margin'][0] ) ) {
$css->add_property( 'margin-top', $media_style['margin'][0] . 'px' );
$css->add_property( 'margin-top', $media_style['margin'][0] . $margin_unit );
}
if ( isset( $media_style['margin'][1] ) && is_numeric( $media_style['margin'][1] ) ) {
$css->add_property( 'margin-right', $media_style['margin'][1] . 'px' );
$css->add_property( 'margin-right', $media_style['margin'][1] . $margin_unit );
}
if ( isset( $media_style['margin'][2] ) && is_numeric( $media_style['margin'][2] ) ) {
$css->add_property( 'margin-bottom', $media_style['margin'][2] . 'px' );
$css->add_property( 'margin-bottom', $media_style['margin'][2] . $margin_unit );
}
if ( isset( $media_style['margin'][3] ) && is_numeric( $media_style['margin'][3] ) ) {
$css->add_property( 'margin-left', $media_style['margin'][3] . 'px' );
$css->add_property( 'margin-left', $media_style['margin'][3] . $margin_unit );
}
}
if ( isset( $media_style['margin'] ) && is_array( $media_style['margin'] ) && ( ! isset( $attributes['mediaAlign'] ) || 'top' === $attributes['mediaAlign'] ) ) {
$css->set_selector( $base_selector . ' .kt-blocks-info-box-media-container' );
if ( isset( $media_style['margin'][0] ) && is_numeric( $media_style['margin'][0] ) ) {
$css->add_property( 'margin-top', $media_style['margin'][0] . 'px' );
$css->add_property( 'margin-top', $media_style['margin'][0] . $margin_unit );
}
if ( isset( $media_style['margin'][1] ) && is_numeric( $media_style['margin'][1] ) ) {
$css->add_property( 'margin-right', $media_style['margin'][1] . 'px' );
$css->add_property( 'margin-right', $media_style['margin'][1] . $margin_unit );
}
if ( isset( $media_style['margin'][2] ) && is_numeric( $media_style['margin'][2] ) ) {
$css->add_property( 'margin-bottom', $media_style['margin'][2] . 'px' );
$css->add_property( 'margin-bottom', $media_style['margin'][2] . $margin_unit );
}
if ( isset( $media_style['margin'][3] ) && is_numeric( $media_style['margin'][3] ) ) {
$css->add_property( 'margin-left', $media_style['margin'][3] . 'px' );
$css->add_property( 'margin-left', $media_style['margin'][3] . $margin_unit );
}
}
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 ) ) ) {
Expand Down Expand Up @@ -534,21 +538,22 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
}
$css->set_media_state( 'desktop' );
}
$title_min_height_unit = isset( $attributes['titleMinHeightUnit'] ) ? $attributes['titleMinHeightUnit'] : 'px';
if ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][0] ) ) {
if ( is_numeric( $attributes['titleMinHeight'][0] ) ) {
$css->set_selector( $base_selector . ' ' . $titleTag . '.kt-blocks-info-box-title' );
$css->add_property( 'min-height', $attributes['titleMinHeight'][0] . 'px' );
$css->add_property( 'min-height', $attributes['titleMinHeight'][0] . $title_min_height_unit );
}
if ( isset( $attributes['titleMinHeight'][1] ) && is_numeric( $attributes['titleMinHeight'][1] ) ) {
$css->set_media_state( 'tablet' );
$css->set_selector( $base_selector . ' ' . $titleTag . '.kt-blocks-info-box-title' );
$css->add_property( 'min-height', $attributes['titleMinHeight'][1] . 'px' );
$css->add_property( 'min-height', $attributes['titleMinHeight'][1] . $title_min_height_unit );
$css->set_media_state( 'desktop' );
}
if ( isset( $attributes['titleMinHeight'][2] ) && is_numeric( $attributes['titleMinHeight'][2] ) ) {
$css->set_media_state( 'mobile' );
$css->set_selector( $base_selector . ' ' . $titleTag . '.kt-blocks-info-box-title' );
$css->add_property( 'min-height', $attributes['titleMinHeight'][2] . 'px' );
$css->add_property( 'min-height', $attributes['titleMinHeight'][2] . $title_min_height_unit );
$css->set_media_state( 'desktop' );
}
}
Expand Down Expand Up @@ -708,21 +713,22 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
}
$css->set_media_state( 'desktop' );
}
$text_min_height_unit = isset( $attributes['textMinHeightUnit'] ) ? $attributes['textMinHeightUnit'] : 'px';
if ( isset( $attributes['textMinHeight'] ) && is_array( $attributes['textMinHeight'] ) && isset( $attributes['textMinHeight'][0] ) ) {
if ( is_numeric( $attributes['textMinHeight'][0] ) ) {
$css->set_selector( $base_selector . ' .kt-blocks-info-box-text' );
$css->add_property( 'min-height', $attributes['textMinHeight'][0] . 'px' );
$css->add_property( 'min-height', $attributes['textMinHeight'][0] . $text_min_height_unit );
}
if ( isset( $attributes['textMinHeight'][1] ) && is_numeric( $attributes['textMinHeight'][1] ) ) {
$css->set_media_state( 'tablet' );
$css->set_selector( $base_selector . ' .kt-blocks-info-box-text' );
$css->add_property( 'min-height', $attributes['textMinHeight'][1] . 'px' );
$css->add_property( 'min-height', $attributes['textMinHeight'][1] . $text_min_height_unit );
$css->set_media_state( 'desktop' );
}
if ( isset( $attributes['textMinHeight'][2] ) && is_numeric( $attributes['textMinHeight'][2] ) ) {
$css->set_media_state( 'mobile' );
$css->set_selector( $base_selector . ' .kt-blocks-info-box-text' );
$css->add_property( 'min-height', $attributes['textMinHeight'][2] . 'px' );
$css->add_property( 'min-height', $attributes['textMinHeight'][2] . $text_min_height_unit );
$css->set_media_state( 'desktop' );
}
}
Expand Down
13 changes: 12 additions & 1 deletion src/blocks/infobox/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@
{
"icon": "fe_aperture",
"size": 50,
"unit": "px",
"width": 2,
"title": "",
"color": "",
Expand All @@ -159,7 +160,9 @@
"borderRadius": 0,
"borderWidth": [0, 0, 0, 0],
"padding": [10, 10, 10, 10],
"margin": [0, 15, 0, 15]
"paddingUnit": "px",
"margin": [0, 15, 0, 15],
"marginUnit": "px"
}
]
},
Expand All @@ -185,6 +188,10 @@
"type": "array",
"default": ["", "", ""]
},
"titleMinHeightUnit": {
"type": "string",
"default": "px"
},
"titleTagType": {
"type": "string",
"default": "heading"
Expand Down Expand Up @@ -238,6 +245,10 @@
"type": "array",
"default": ["", "", ""]
},
"textMinHeightUnit": {
"type": "string",
"default": "px"
},
"textFont": {
"type": "array",
"default": [
Expand Down
75 changes: 50 additions & 25 deletions src/blocks/infobox/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,9 @@ function KadenceInfoBox(props) {
containerHoverBorderOpacity,
containerBorderOpacity,
textMinHeight,
textMinHeightUnit,
titleMinHeight,
titleMinHeightUnit,
maxWidthUnit,
maxWidthTabletUnit,
maxWidthMobileUnit,
Expand Down Expand Up @@ -2730,9 +2732,13 @@ 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}
showUnit={true}
onUnit={(value) => saveMediaIcon({ unit: value })}
units={['px', 'em', 'rem']}
unit={mediaIcon[0].unit ? mediaIcon[0].unit : 'px'}
/>
{mediaIcon[0].icon && 'fe' === mediaIcon[0].icon.substring(0, 2) && (
<RangeControl
Expand Down Expand Up @@ -3128,18 +3134,26 @@ function KadenceInfoBox(props) {
onChange={(value) => saveMediaStyle({ padding: value })}
onControl={(value) => setMediaPaddingControl(value)}
min={0}
max={100}
max={['em', 'rem'].includes(mediaStyle[0].paddingUnit) ? 12 : 100}
step={1}
onUnit={(value) => saveMediaStyle({ paddingUnit: value })}
units={['px', 'em', 'rem']}
unit={mediaStyle[0].paddingUnit ? mediaStyle[0].paddingUnit : 'px'}
showUnit={true}
/>
<MeasurementControls
label={__('Media Margin', 'kadence-blocks')}
measurement={mediaStyle[0].margin}
control={mediaMarginControl}
onChange={(value) => saveMediaStyle({ margin: value })}
onControl={(value) => setMediaMarginControl(value)}
min={-200}
max={200}
min={['em', 'rem'].includes(mediaStyle[0].marginUnit) ? -12 : -200}
max={['em', 'rem'].includes(mediaStyle[0].marginUnit) ? 12 : 200}
step={1}
onUnit={(value) => saveMediaStyle({ marginUnit: value })}
units={['px', 'em', 'rem']}
unit={mediaStyle[0].marginUnit ? mediaStyle[0].marginUnit : 'px'}
showUnit={true}
/>
</KadencePanelBody>
)}
Expand Down Expand Up @@ -3281,10 +3295,13 @@ function KadenceInfoBox(props) {
}
step={1}
min={0}
max={600}
unit={'px'}
units={['px']}
max={['em', 'rem'].includes(titleMinHeightUnit) ? 12 : 600}
unit={titleMinHeightUnit ? titleMinHeightUnit : 'px'}
units={['px', 'em', 'rem']}
showUnit={true}
onUnit={(value) => {
setAttributes({ titleMinHeightUnit: value });
}}
reset={() => {
//empty value does not re-render component. Need to pass 0.
setAttributes({
Expand Down Expand Up @@ -3462,10 +3479,13 @@ function KadenceInfoBox(props) {
}
step={1}
min={0}
max={600}
unit={'px'}
units={['px']}
max={['em', 'rem'].includes(textMinHeightUnit) ? 12 : 600}
unit={titleMinHeightUnit ? textMinHeightUnit : 'px'}
units={['px', 'em', 'rem']}
showUnit={true}
onUnit={(value) => {
setAttributes({ textMinHeightUnit: value });
}}
/>
</Fragment>
)}
Expand Down Expand Up @@ -3830,13 +3850,13 @@ function KadenceInfoBox(props) {
style={{
margin: mediaStyle[0].margin
? mediaStyle[0].margin[0] +
'px ' +
(mediaStyle[0].marginUnit ? mediaStyle[0].marginUnit + ' ' : 'px ') +
mediaStyle[0].margin[1] +
'px ' +
(mediaStyle[0].marginUnit ? mediaStyle[0].marginUnit + ' ' : 'px ') +
mediaStyle[0].margin[2] +
'px ' +
(mediaStyle[0].marginUnit ? mediaStyle[0].marginUnit + ' ' : 'px ') +
mediaStyle[0].margin[3] +
'px'
(mediaStyle[0].marginUnit ? mediaStyle[0].marginUnit : 'px')
: '',
}}
>
Expand All @@ -3862,13 +3882,13 @@ function KadenceInfoBox(props) {
: '',
padding: mediaStyle[0].padding
? mediaStyle[0].padding[0] +
'px ' +
(mediaStyle[0].paddingUnit ? mediaStyle[0].paddingUnit + ' ' : 'px ') +
mediaStyle[0].padding[1] +
'px ' +
(mediaStyle[0].paddingUnit ? mediaStyle[0].paddingUnit + ' ' : 'px ') +
mediaStyle[0].padding[2] +
'px ' +
(mediaStyle[0].paddingUnit ? mediaStyle[0].paddingUnit + ' ' : 'px ') +
mediaStyle[0].padding[3] +
'px'
(mediaStyle[0].paddingUnit ? mediaStyle[0].paddingUnit : 'px')
: '',
}}
>
Expand Down Expand Up @@ -3963,11 +3983,15 @@ function KadenceInfoBox(props) {
<div
className={`kadence-info-box-icon-container kt-info-icon-animate-${mediaIcon[0].hoverAnimation}`}
>
<div className={'kadence-info-box-icon-inner-container'}>
<div
className={'kadence-info-box-icon-inner-container'}
style={{ fontSize: previewMediaIconSize + mediaIcon[0].unit }}
>
<IconRender
className={`kt-info-svg-icon kt-info-svg-icon-${mediaIcon[0].icon}`}
name={mediaIcon[0].icon}
size={previewMediaIconSize}
size={'1em'}
unit={mediaIcon[0].unit ? mediaIcon[0].unit : ''}
htmltag="span"
strokeWidth={
'fe' === mediaIcon[0].icon.substring(0, 2)
Expand All @@ -3985,7 +4009,7 @@ function KadenceInfoBox(props) {
<IconRender
className={`kt-info-svg-icon-flip kt-info-svg-icon-${mediaIcon[0].flipIcon}`}
name={mediaIcon[0].flipIcon}
size={previewMediaIconSize}
size={'1em'}
htmltag="span"
strokeWidth={
'fe' === mediaIcon[0].flipIcon.substring(0, 2)
Expand Down Expand Up @@ -4019,7 +4043,8 @@ function KadenceInfoBox(props) {
color: mediaIcon[0].color
? KadenceColorOutput(mediaIcon[0].color)
: undefined,
fontSize: mediaIcon[0].size + 'px',
fontSize:
mediaIcon[0].size + (mediaIcon[0].unit ? mediaIcon[0].unit : 'px'),
fontFamily: mediaNumber[0].family ? mediaNumber[0].family : undefined,
}}
>
Expand Down Expand Up @@ -4107,7 +4132,7 @@ function KadenceInfoBox(props) {
titleFont[0].margin[3] +
'px'
: '',
minHeight: previewTitleMinHeight + 'px',
minHeight: previewTitleMinHeight + (titleMinHeightUnit ? titleMinHeightUnit : 'px'),
}}
keepPlaceholderOnFocus
/>
Expand Down Expand Up @@ -4173,7 +4198,7 @@ function KadenceInfoBox(props) {
textSpacing[0].margin[3] +
'px'
: '',
minHeight: previewTextMinHeight + 'px',
minHeight: previewTextMinHeight + (textMinHeightUnit ? textMinHeightUnit : 'px'),
}}
keepPlaceholderOnFocus
/>
Expand Down

0 comments on commit 5ca55b8

Please sign in to comment.