Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

audit/KAD-3783 #636

Merged
merged 5 commits into from
Jan 6, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 27 additions & 21 deletions includes/blocks/class-kadence-blocks-infobox-block.php
Original file line number Diff line number Diff line change
@@ -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'] ) ) ) {
@@ -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 ) ) ) {
@@ -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' );
}
}
@@ -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' );
}
}
13 changes: 12 additions & 1 deletion src/blocks/infobox/block.json
Original file line number Diff line number Diff line change
@@ -137,6 +137,7 @@
{
"icon": "fe_aperture",
"size": 50,
"unit": "px",
"width": 2,
"title": "",
"color": "",
@@ -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"
}
]
},
@@ -185,6 +188,10 @@
"type": "array",
"default": ["", "", ""]
},
"titleMinHeightUnit": {
"type": "string",
"default": "px"
},
"titleTagType": {
"type": "string",
"default": "heading"
@@ -238,6 +245,10 @@
"type": "array",
"default": ["", "", ""]
},
"textMinHeightUnit": {
"type": "string",
"default": "px"
},
"textFont": {
"type": "array",
"default": [
75 changes: 50 additions & 25 deletions src/blocks/infobox/edit.js
Original file line number Diff line number Diff line change
@@ -152,7 +152,9 @@ function KadenceInfoBox(props) {
containerHoverBorderOpacity,
containerBorderOpacity,
textMinHeight,
textMinHeightUnit,
titleMinHeight,
titleMinHeightUnit,
maxWidthUnit,
maxWidthTabletUnit,
maxWidthMobileUnit,
@@ -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
@@ -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>
)}
@@ -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({
@@ -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>
)}
@@ -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')
: '',
}}
>
@@ -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')
: '',
}}
>
@@ -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)
@@ -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)
@@ -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,
}}
>
@@ -4107,7 +4132,7 @@ function KadenceInfoBox(props) {
titleFont[0].margin[3] +
'px'
: '',
minHeight: previewTitleMinHeight + 'px',
minHeight: previewTitleMinHeight + (titleMinHeightUnit ? titleMinHeightUnit : 'px'),
}}
keepPlaceholderOnFocus
/>
@@ -4173,7 +4198,7 @@ function KadenceInfoBox(props) {
textSpacing[0].margin[3] +
'px'
: '',
minHeight: previewTextMinHeight + 'px',
minHeight: previewTextMinHeight + (textMinHeightUnit ? textMinHeightUnit : 'px'),
}}
keepPlaceholderOnFocus
/>