From a0483c76c63a864071380a9527b72b8ea4133e54 Mon Sep 17 00:00:00 2001 From: Gilbert Hernandez Date: Wed, 7 Aug 2024 19:24:06 -0600 Subject: [PATCH 1/2] KAD-3086 fix for image (adv) overlay border radius --- .../class-kadence-blocks-image-block.php | 28 ++++++++++++++++++- src/blocks/image/image.js | 12 ++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/includes/blocks/class-kadence-blocks-image-block.php b/includes/blocks/class-kadence-blocks-image-block.php index fc76105f2..f49c3a220 100644 --- a/includes/blocks/class-kadence-blocks-image-block.php +++ b/includes/blocks/class-kadence-blocks-image-block.php @@ -139,6 +139,11 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { $overlay_type = ! empty( $attributes['overlayType'] ) ? $attributes['overlayType'] : 'normal'; $css->set_selector( '.kb-image' . $unique_id . ' .kb-image-has-overlay:after' ); $opacity = isset( $attributes['overlayOpacity'] ) ? $attributes['overlayOpacity'] : 0.3; + $desktopBorderRadius = isset( $attributes['borderRadius'] ) ? $attributes['borderRadius'] : '0'; + $tabletBorderRadius = isset( $attributes['tabletBorderRadius'] ) ? $attributes['tabletBorderRadius'] : '0'; + $mobileBorderRadius = isset( $attributes['mobileBorderRadius'] ) ? $attributes['mobileBorderRadius'] : '0'; + $borderRadiusUnit = isset( $attributes['borderRadiusUnit'] ) ? $attributes['borderRadiusUnit'] : 'px'; + if ( $css->is_number( $opacity ) ) { $css->add_property( 'opacity', $opacity ); } @@ -157,8 +162,29 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { } break; } - $css->set_selector( '.kb-image' . $unique_id . ' img.kb-img, .kb-image' . $unique_id . ' .kb-img img' ); + if ( $desktopBorderRadius ) { + $css->add_property( 'border-top-left-radius', $desktopBorderRadius[0] . $borderRadiusUnit ); + $css->add_property( 'border-top-right-radius', $desktopBorderRadius[1] . $borderRadiusUnit ); + $css->add_property( 'border-bottom-right-radius', $desktopBorderRadius[2] . $borderRadiusUnit ); + $css->add_property( 'border-bottom-left-radius', $desktopBorderRadius[3] . $borderRadiusUnit ); + } + $css->set_media_state( 'tablet' ); + if ( $tabletBorderRadius ) { + $css->add_property( 'border-top-left-radius', $tabletBorderRadius[0] . $borderRadiusUnit ); + $css->add_property( 'border-top-right-radius', $tabletBorderRadius[1] . $borderRadiusUnit ); + $css->add_property( 'border-bottom-right-radius', $tabletBorderRadius[2] . $borderRadiusUnit ); + $css->add_property( 'border-bottom-left-radius', $tabletBorderRadius[3] . $borderRadiusUnit ); + } + $css->set_media_state( 'mobile' ); + if ( $mobileBorderRadius ) { + $css->add_property( 'border-top-left-radius', $mobileBorderRadius[0] . $borderRadiusUnit ); + $css->add_property( 'border-top-right-radius', $mobileBorderRadius[1] . $borderRadiusUnit ); + $css->add_property( 'border-bottom-right-radius', $mobileBorderRadius[2] . $borderRadiusUnit ); + $css->add_property( 'border-bottom-left-radius', $mobileBorderRadius[3] . $borderRadiusUnit ); + } + $css->set_media_state( 'desktop' ); + $css->set_selector( '.kb-image' . $unique_id . ' img.kb-img, .kb-image' . $unique_id . ' .kb-img img' ); // Support borders saved pre 3.0 if ( !empty( $attributes['borderColor'] ) ) { $css->add_property( 'border-style', 'solid' ); diff --git a/src/blocks/image/image.js b/src/blocks/image/image.js index c540f291b..8b3b93a10 100644 --- a/src/blocks/image/image.js +++ b/src/blocks/image/image.js @@ -1780,6 +1780,18 @@ export default function Image({ {previewOverlay ? `.kadence-image${uniqueID} .kb-image-has-overlay:after { background:${previewOverlay}; }` : ''} + {previewOverlay && previewRadiusTop + ? `.kadence-image${uniqueID} .kb-image-has-overlay:after { border-top-left-radius:${previewRadiusTop}${borderRadiusUnit}; }` + : ''} + {previewOverlay && previewRadiusRight + ? `.kadence-image${uniqueID} .kb-image-has-overlay:after { border-top-right-radius:${previewRadiusRight}${borderRadiusUnit}; }` + : ''} + {previewOverlay && previewRadiusBottom + ? `.kadence-image${uniqueID} .kb-image-has-overlay:after { border-bottom-right-radius:${previewRadiusBottom}${borderRadiusUnit}; }` + : ''} + {previewOverlay && previewRadiusLeft + ? `.kadence-image${uniqueID} .kb-image-has-overlay:after { border-bottom-left-radius:${previewRadiusLeft}${borderRadiusUnit}; }` + : ''} {previewMaxWidth ? `.kadence-inner-column-inner:where(.section-is-flex) > .kadence-image${uniqueID} { max-width: ${previewMaxWidth}px; }` : ''} From 9c5141edfb3c201c291b186d89552a973e5c8de6 Mon Sep 17 00:00:00 2001 From: Gilbert Hernandez Date: Tue, 13 Aug 2024 09:41:21 -0600 Subject: [PATCH 2/2] KAD-3086 implemented render_measure_output for overlay border radius --- .../class-kadence-blocks-image-block.php | 27 +++---------------- 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/includes/blocks/class-kadence-blocks-image-block.php b/includes/blocks/class-kadence-blocks-image-block.php index f49c3a220..9c26c1804 100644 --- a/includes/blocks/class-kadence-blocks-image-block.php +++ b/includes/blocks/class-kadence-blocks-image-block.php @@ -139,10 +139,6 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { $overlay_type = ! empty( $attributes['overlayType'] ) ? $attributes['overlayType'] : 'normal'; $css->set_selector( '.kb-image' . $unique_id . ' .kb-image-has-overlay:after' ); $opacity = isset( $attributes['overlayOpacity'] ) ? $attributes['overlayOpacity'] : 0.3; - $desktopBorderRadius = isset( $attributes['borderRadius'] ) ? $attributes['borderRadius'] : '0'; - $tabletBorderRadius = isset( $attributes['tabletBorderRadius'] ) ? $attributes['tabletBorderRadius'] : '0'; - $mobileBorderRadius = isset( $attributes['mobileBorderRadius'] ) ? $attributes['mobileBorderRadius'] : '0'; - $borderRadiusUnit = isset( $attributes['borderRadiusUnit'] ) ? $attributes['borderRadiusUnit'] : 'px'; if ( $css->is_number( $opacity ) ) { $css->add_property( 'opacity', $opacity ); @@ -162,26 +158,9 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { } break; } - if ( $desktopBorderRadius ) { - $css->add_property( 'border-top-left-radius', $desktopBorderRadius[0] . $borderRadiusUnit ); - $css->add_property( 'border-top-right-radius', $desktopBorderRadius[1] . $borderRadiusUnit ); - $css->add_property( 'border-bottom-right-radius', $desktopBorderRadius[2] . $borderRadiusUnit ); - $css->add_property( 'border-bottom-left-radius', $desktopBorderRadius[3] . $borderRadiusUnit ); - } - $css->set_media_state( 'tablet' ); - if ( $tabletBorderRadius ) { - $css->add_property( 'border-top-left-radius', $tabletBorderRadius[0] . $borderRadiusUnit ); - $css->add_property( 'border-top-right-radius', $tabletBorderRadius[1] . $borderRadiusUnit ); - $css->add_property( 'border-bottom-right-radius', $tabletBorderRadius[2] . $borderRadiusUnit ); - $css->add_property( 'border-bottom-left-radius', $tabletBorderRadius[3] . $borderRadiusUnit ); - } - $css->set_media_state( 'mobile' ); - if ( $mobileBorderRadius ) { - $css->add_property( 'border-top-left-radius', $mobileBorderRadius[0] . $borderRadiusUnit ); - $css->add_property( 'border-top-right-radius', $mobileBorderRadius[1] . $borderRadiusUnit ); - $css->add_property( 'border-bottom-right-radius', $mobileBorderRadius[2] . $borderRadiusUnit ); - $css->add_property( 'border-bottom-left-radius', $mobileBorderRadius[3] . $borderRadiusUnit ); - } + + // Border Radius. + $css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) ); $css->set_media_state( 'desktop' ); $css->set_selector( '.kb-image' . $unique_id . ' img.kb-img, .kb-image' . $unique_id . ' .kb-img img' );