Skip to content

Commit

Permalink
Merge pull request #664 from stellarwp/quickwin/KAD-4019
Browse files Browse the repository at this point in the history 
quickwin/KAD-4019
This adds Advanced Highlight feature to Icon List block.
Mark said ok since Josh approved. Merged
  • Loading branch information
@gilbert-hernandez
gilbert-hernandez authored Feb 24, 2025
2 parents b68b08e + 026c809 commit e58c665
Show file tree
Hide file tree
Showing 6 changed files with 748 additions and 89 deletions.
96 changes: 96 additions & 0 deletions includes/blocks/class-kadence-blocks-single-icon-list-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,102 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
if ( ! empty( $attributes['borderRadius'] ) && ! empty( $attributes['style'] ) && 'default' !== $attributes['style'] ) {
$css->add_property( 'border-radius', $attributes['borderRadius'] . '% !important' );
}

// Highlight.
$css->set_selector( '.kt-svg-icon-list-item-' . $unique_id . ' .kt-svg-icon-list-text mark.kt-highlight' );
// Defaults.
$css->add_property( 'background-color', 'unset' );

if ( isset( $attributes['markLetterSpacing'] ) && ! empty( $attributes['markLetterSpacing'] ) ) {
$css->add_property( 'letter-spacing', $attributes['markLetterSpacing'] . ( ! isset( $attributes['markLetterSpacingType'] ) ? 'px' : $attributes['markLetterSpacingType'] ) );
}
if ( ! empty( $attributes['markSize'][0] ) ) {
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][0], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
}
if ( ! empty( $attributes['markLineHeight'][0] ) ) {
$css->add_property( 'line-height', $attributes['markLineHeight'][0] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
}
if ( ! empty( $attributes['markTypography'] ) ) {
$google = isset( $attributes['markGoogleFont'] ) && $attributes['markGoogleFont'] ? true : false;
$google = $google && ( isset( $attributes['markLoadGoogleFont'] ) && $attributes['markLoadGoogleFont'] || ! isset( $attributes['markLoadGoogleFont'] ) ) ? true : false;
$variant = ! empty( $attributes['markFontVariant'] ) ? $attributes['markFontVariant'] : null;
$css->add_property( 'font-family', $css->render_font_family( $attributes['markTypography'], $google, $variant ) );
}
if ( ! empty( $attributes['markFontWeight'] ) ) {
$css->add_property( 'font-weight', $css->render_font_weight( $attributes['markFontWeight'] ) );
}
if ( ! empty( $attributes['markFontStyle'] ) ) {
$css->add_property( 'font-style', $attributes['markFontStyle'] );
}
if( !empty( $attributes['textGradient'] ) && ! empty( $attributes['enableTextGradient'] ) ) {
$css->add_property( '-webkit-text-fill-color', 'initial !important' );
$css->add_property( '-webkit-background-clip', 'initial !important' );
$css->add_property( 'background-clip', 'initial !important' );
}
if ( empty( $attributes['enableMarkGradient'] ) ) {
$css->add_property( 'color', $css->render_color( $attributes['markColor'] ?? '#f76a0c' ) );
} else if ( !empty( $attributes['markGradient'] ) && ! empty( $attributes['enableMarkGradient'] ) ) {
$css->add_property( 'background-image', $attributes['markGradient'] );
$css->add_property( '-webkit-background-clip', 'text' );
$css->add_property( 'background-clip', 'text' );
$css->add_property( '-webkit-text-fill-color', 'transparent' );
}
if ( ! empty($attributes['enableMarkBackgroundGradient']) && ! empty($attributes['markBackgroundGradient']) ) {
$css->add_property( 'background-image', $attributes['markBackgroundGradient'] );
}
if ( ! empty( $attributes['markTextTransform'] ) ) {
$css->add_property( 'text-transform', $attributes['markTextTransform'] );
}
if ( ! empty( $attributes['markBG'] ) && empty( $attributes['enableMarkGradient'] ) && empty( $attributes['enableMarkBackgroundGradient'] ) ) {
$alpha = ( isset( $attributes['markBGOpacity'] ) && ! empty( $attributes['markBGOpacity'] ) ? $attributes['markBGOpacity'] : 1 );
$css->add_property( 'background', $css->render_color( $attributes['markBG'], $alpha ) );
}
if ( ! empty( $attributes['markBorder'] ) ) {
$alpha = ( isset( $attributes['markBorderOpacity'] ) && ! empty( $attributes['markBorderOpacity'] ) ? $attributes['markBorderOpacity'] : 1 );
$css->add_property( 'border-color', $css->render_color( $attributes['markBorder'], $alpha ) );
}
if ( ! empty( $attributes['markBorderWidth'] ) ) {
$css->add_property( 'border-width', $attributes['markBorderWidth'] . 'px' );
}
if ( ! empty( $attributes['markBorderStyle'] ) && 'solid' !== $attributes['markBorderStyle'] ) {
$css->add_property( 'border-style', $attributes['markBorderStyle'] );
}
$css->render_border_styles( $attributes, 'markBorderStyles' );
$css->render_border_radius( $attributes, 'markBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
$css->add_property( '-webkit-box-decoration-break', 'clone' );
$css->add_property( 'box-decoration-break', 'clone' );
$css->set_media_state( 'tablet' );
$css->render_border_radius( $attributes, 'tabletMarkBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
$css->set_media_state( 'desktop' );

$css->set_media_state( 'mobile' );
$css->render_border_radius( $attributes, 'mobileMarkBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
$css->set_media_state( 'desktop' );
$mark_padding_args = array(
'desktop_key' => 'markPadding',
'tablet_key' => 'markTabPadding',
'mobile_key' => 'markMobilePadding',
);
$css->render_measure_output( $attributes, 'markPadding', 'padding', $mark_padding_args );

// Tablet.
$css->set_media_state( 'tablet' );
$css->set_selector( '.kt-svg-icon-list-item-' . $unique_id . ' .kt-svg-icon-list-text mark.kt-highlight' );
if ( ! empty( $attributes['markSize'][1] ) ) {
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][1], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
}
if ( ! empty( $attributes['markLineHeight'][1] ) ) {
$css->add_property( 'line-height', $attributes['markLineHeight'][1] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
}
$css->set_media_state( 'mobile' );
if ( ! empty( $attributes['markSize'][2] ) ) {
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][2], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
}
if ( ! empty( $attributes['markLineHeight'][2] ) ) {
$css->add_property( 'line-height', $attributes['markLineHeight'][2] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
}
$css->set_media_state( 'desktop' );

return $css->css_output();
}

Expand Down
1 change: 1 addition & 0 deletions readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ Release Date: TBD February 2025
* Fix: Warning handled for CSS class.
* Fix: Gallery (Adv) arrow strings added to pot file.
* Fix: issue with row layout tablet column widths in certain setups.
* Add: Advanced Highlight feature added to Icon List block.

= 3.4.9 =
Release Date: 11th February 2025
Expand Down
5 changes: 3 additions & 2 deletions src/blocks/advancedheading/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -979,7 +979,8 @@ function KadenceAdvancedHeading(props) {
marginLeft:
'' !== previewMarginLeft ? getSpacingOptionOutput(previewMarginLeft, marginType) : undefined,
lineHeight: previewLineHeight ? previewLineHeight + (fontHeightType ? fontHeightType : '') : undefined,
color: color && (!enableTextGradient || textGradient !== '') ? KadenceColorOutput(color) : undefined,
color:
color && (!enableTextGradient || textGradient !== '') ? KadenceColorOutput(color) : 'transparent',
fontSize: previewFontSize
? getFontSizeOptionOutput(previewFontSize, sizeType ? sizeType : 'px')
: undefined,
Expand Down Expand Up @@ -1152,7 +1153,7 @@ function KadenceAdvancedHeading(props) {
<div {...blockProps}>
<style>
{`.kt-adv-heading${uniqueID} mark.kt-highlight, .kt-adv-heading${uniqueID} .rich-text:focus mark.kt-highlight[data-rich-text-format-boundary] {
color: ${!enableMarkGradient ? KadenceColorOutput(markColor) : undefined};
color: ${!enableMarkGradient ? KadenceColorOutput(markColor) : 'transparent'};
background: ${markBG && !enableMarkGradient ? markBGString : 'transparent'};
background-image: ${enableMarkGradient ? markGradient : enableMarkBackgroundGradient ? markBackgroundGradient : 'none'};
-webkit-background-clip: ${enableMarkGradient ? 'text' : enableTextGradient ? 'initial !important' : undefined};
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/advancedheading/formats/markformat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const icon = (
</svg>
);
const name = 'kadence/mark';
const allowedBlocks = ['kadence/advancedheading'];
const allowedBlocks = ['kadence/advancedheading', 'kadence/listitem'];

const kadenceMarkHighlight = {
title: __('Adv Highlight', 'kadence-blocks'),
Expand Down
175 changes: 175 additions & 0 deletions src/blocks/listitem/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,181 @@
"tooltipDash": {
"type": "boolean",
"default": true
},
"markSize": {
"type": "array",
"default": ["", "", ""]
},
"markSizeType": {
"type": "string",
"default": "px"
},
"markLineHeight": {
"type": "array",
"default": ["", "", ""]
},
"markLineType": {
"type": "string",
"default": "px"
},
"markLetterSpacing": {
"type": "number"
},
"tabletMarkLetterSpacing": {
"type": "number"
},
"mobileMarkLetterSpacing": {
"type": "number"
},
"markLetterSpacingType": {
"type": "string",
"default": "px"
},
"markTypography": {
"type": "string",
"default": ""
},
"markGoogleFont": {
"type": "boolean",
"default": false
},
"markLoadGoogleFont": {
"type": "boolean",
"default": true
},
"markFontSubset": {
"type": "string",
"default": ""
},
"markFontVariant": {
"type": "string",
"default": ""
},
"markFontWeight": {
"type": "string",
"default": ""
},
"markFontStyle": {
"type": "string",
"default": "normal"
},
"enableMarkGradient": {
"type": "boolean",
"default": false
},
"enableMarkBackgroundGradient": {
"type": "boolean",
"default": false
},
"markGradient": {
"type": "string",
"default": ""
},
"markBackgroundGradient": {
"type": "string",
"default": ""
},
"markColor": {
"type": "string",
"default": "#f76a0c"
},
"markBG": {
"type": "string"
},
"markBGOpacity": {
"type": "number",
"default": 1
},
"markPadding": {
"type": "array",
"default": [0, 0, 0, 0]
},
"markTabPadding": {
"type": "array",
"default": ["", "", "", ""]
},
"markMobilePadding": {
"type": "array",
"default": ["", "", "", ""]
},
"markPaddingControl": {
"type": "string",
"default": "linked"
},
"markPaddingType": {
"type": "string",
"default": "px"
},
"markBorder": {
"type": "string"
},
"markBorderStyles": {
"type": "array",
"default": [
{
"top": ["", "", ""],
"right": ["", "", ""],
"bottom": ["", "", ""],
"left": ["", "", ""],
"unit": "px"
}
]
},
"tabletMarkBorderStyles": {
"type": "array",
"default": [
{
"top": ["", "", ""],
"right": ["", "", ""],
"bottom": ["", "", ""],
"left": ["", "", ""],
"unit": "px"
}
]
},
"mobileMarkBorderStyles": {
"type": "array",
"default": [
{
"top": ["", "", ""],
"right": ["", "", ""],
"bottom": ["", "", ""],
"left": ["", "", ""],
"unit": "px"
}
]
},
"markBorderOpacity": {
"type": "number",
"default": 1
},
"markBorderWidth": {
"type": "number",
"default": 0
},
"markBorderStyle": {
"type": "string",
"default": "solid"
},
"markTextTransform": {
"type": "string",
"default": ""
},
"markBorderRadius": {
"type": "array",
"default": ["", "", "", ""]
},
"tabletMarkBorderRadius": {
"type": "array",
"default": ["", "", "", ""]
},
"mobileMarkBorderRadius": {
"type": "array",
"default": ["", "", "", ""]
},
"markBorderRadiusUnit": {
"type": "string",
"default": "px"
}
},
"usesContext": [
Expand Down
Loading

0 comments on commit e58c665

Please sign in to comment.