Skip to content

Commit

Permalink
Merge pull request #620 from stellarwp/bugfix/headerrowbg
Browse files Browse the repository at this point in the history 
Bugfix/headerrowbg
  • Loading branch information
@kadencewp
kadencewp authored Dec 3, 2024
2 parents 563395b + 62c42bd commit f75bab6
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 733 deletions.
47 changes: 9 additions & 38 deletions includes/blocks/class-kadence-blocks-header-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,8 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );

$bg = $sized_attributes['background'];
// $hover_bg = $sized_attributes['backgroundHover'];
$bg_transparent = $sized_attributes['backgroundTransparent'];
// $hover_bg_transparent = $sized_attributes['backgroundTransparentHover'];
$bg_sticky = $sized_attributes['backgroundSticky'];
// $hover_bg_sticky = $sized_attributes['backgroundStickyHover'];
$border = $sized_attributes['border'];
$typography = $sized_attributes['typography'];
$min_height = $css->get_inherited_value($sized_attributes['height'][0], $sized_attributes['height'][1], $sized_attributes['height'][2], $size);
Expand Down Expand Up @@ -146,23 +143,13 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$css->render_background( $bg, $css );
}

// //hover styles
// $css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container:hover' );
// $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderHover'], 'bottom' ) );
// $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderHover'], 'top' ) );
// $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderHover'], 'left' ) );
// $css->add_property( 'border-right', $css->render_border( $sized_attributes['borderHover'], 'right' ) );
// $css->render_measure_range( $sized_attributes, ( 'Desktop' === $size ? 'borderRadiusHover' : 'borderRadiusHover' . $size ), 'border-radius', '', ['unit_key' => 'borderRadiusHoverUnit']);

// if ( $sized_attributes['isTransparent'] != '1' ) {
// $css->render_background( $hover_bg, $css );
// }

//transparent normal
$css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent' );
if ( $this->is_header_transparent( $attributes, $unique_id, $size ) ) {
$css->render_background( $bg_transparent, $css, '--kb-transparent-header-bg' );
}
$css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent .kb-header-container' );
if ( $this->is_header_transparent( $attributes, $unique_id, $size ) ) {
$css->render_background( $bg_transparent, $css );
$css->add_property( 'background-color', $css->render_color( ! empty( $bg_transparent['color'] ) ? $bg_transparent['color'] : '') );
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderTransparent'], 'bottom' ) );
$css->add_property( 'border-top', $css->render_border( $sized_attributes['borderTransparent'], 'top' ) );
$css->add_property( 'border-left', $css->render_border( $sized_attributes['borderTransparent'], 'left' ) );
Expand All @@ -174,20 +161,13 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
}
}

// //transparent hover
// $css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent .kb-header-container:hover' );
// if ( $sized_attributes['isTransparent'] == '1' ) {
// $css->render_background( $hover_bg_transparent, $css );
// $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderTransparentHover'], 'bottom' ) );
// $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderTransparentHover'], 'top' ) );
// $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderTransparentHover'], 'left' ) );
// $css->add_property( 'border-right', $css->render_border( $sized_attributes['borderTransparentHover'], 'right' ) );
// }

//sticky normal
// Sticky normal
$css->set_selector( '.wp-block-kadence-header' . $unique_id );
if ( $sized_attributes['isSticky'] == '1' ) {
$css->render_background( $bg_sticky, $css, '--kb-stuck-header-bg' );
}
$css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container.item-is-stuck' );
if ( $sized_attributes['isSticky'] == '1' ) {
$css->render_background( $bg_sticky, $css );
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderSticky'], 'bottom' ) );
$css->add_property( 'border-top', $css->render_border( $sized_attributes['borderSticky'], 'top' ) );
$css->add_property( 'border-left', $css->render_border( $sized_attributes['borderSticky'], 'left' ) );
Expand All @@ -199,15 +179,6 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
}
}

// //sticky hover
// $css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container.item-is-stuck:hover' );
// if ( $sized_attributes['isSticky'] == '1' ) {
// $css->render_background( $hover_bg_sticky, $css );
// $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderStickyHover'], 'bottom' ) );
// $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderStickyHover'], 'top' ) );
// $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderStickyHover'], 'left' ) );
// $css->add_property( 'border-right', $css->render_border( $sized_attributes['borderStickyHover'], 'right' ) );
// }
}

/**
Expand Down
17 changes: 7 additions & 10 deletions includes/blocks/header/class-kadence-blocks-header-row-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,13 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->add_property( 'max-width', $attributes['maxWidthMobile'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
$css->set_media_state( 'desktop' );
}

// Background Variables.
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id );
$css->render_background( $bg, $css, '--kb-header-row-bg' );
$css->render_background( $bg, $css, '--kb-stuck-header-bg' );
$css->render_background( $bg_transparent, $css, '--kb-transparent-header-row-bg' );
if ( 'contained' !== $layout ) {
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ', .wp-block-kadence-header-row' . $unique_id . '.item-is-stuck.item-is-stuck');
$css->render_background( $bg, $css );
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array(
'desktop_key' => 'borderRadius',
'tablet_key' => 'borderRadiusTablet',
Expand All @@ -132,14 +135,10 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
'tablet_key' => 'borderTablet',
'mobile_key' => 'borderMobile',
) );
// Transparent overrides.
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-header-row' . $unique_id . ', .header-' . strtolower( $size ) . '-transparent .wp-block-kadence-header-row' . $unique_id . '.item-is-stuck' );
$css->render_background( $bg_transparent, $css );
}
// Container.
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
if ( 'contained' === $layout ) {
$css->render_background( $bg, $css );
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array(
'desktop_key' => 'borderRadius',
'tablet_key' => 'borderRadiusTablet',
Expand All @@ -150,10 +149,8 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
'tablet_key' => 'borderTablet',
'mobile_key' => 'borderMobile',
) );
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
$css->render_background( $bg_transparent, $css );
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
}
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
$css->render_measure_output( $attributes, 'padding', 'padding', array(
'desktop_key' => 'padding',
'tablet_key' => 'paddingTablet',
Expand Down
43 changes: 30 additions & 13 deletions includes/class-kadence-blocks-css.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2392,7 +2392,7 @@ public function render_opacity_from_100( $attributes, $name = null ) {
* @param array $background an array of background settings.
* @param object $css an object of css output.
*/
public function render_background( $background, $css ) {
public function render_background( $background, $css, $property = 'normal' ) {
if ( empty( $background ) ) {
return false;
}
Expand All @@ -2401,20 +2401,37 @@ public function render_background( $background, $css ) {
}
$type = ( isset( $background['type'] ) && ! empty( $background['type'] ) ? $background['type'] : 'normal' );
if ( 'normal' === $type ) {
if ( ! empty( $background['color'] ) ) {
$css->add_property( 'background-color', $this->render_color( $background['color'] ) );
}
$image_url = ( ! empty( $background['image'] ) ? 'url("' . $background['image'] . '")' : '' );
if ( ! empty( $image_url ) ) {
$css->add_property( 'background-image', $image_url );
$css->add_property( 'background-size', ( ! empty( $background['size'] ) ? $background['size'] : 'cover' ) );
$css->add_property( 'background-position', ( ! empty( $background['position'] ) ? $background['position'] : 'center center' ) );
$css->add_property( 'background-attachment', ( ! empty( $background['attachment'] ) ? $background['attachment'] : 'scroll' ) );
$css->add_property( 'background-repeat', ( ! empty( $background['repeat'] ) ? $background['repeat'] : 'no-repeat' ) );

if ( $property !== 'normal' ) {
$background_color = ( ! empty( $background['color'] ) ? $background['color'] : '' );
$image_url = ( ! empty( $background['image'] ) ? 'url("' . $background['image'] . '")' : '' );
if ( ! empty( $image_url ) ) {
$background_size = ( ! empty( $background['size'] ) ? $background['size'] : '' );
$background_position = ( ! empty( $background['position'] ) ? $background['position'] : 'center center' );
$background_attachment = ( ! empty( $background['attachment'] ) ? $background['attachment'] : 'scroll' );
$background_repeat = ( ! empty( $background['repeat'] ) ? $background['repeat'] : 'no-repeat' );
$css->add_property( $property, ( ! empty( $background_color ) ? $this->render_color( $background_color ) . ' ' : '' ) . $image_url . ' ' . $background_repeat . ' ' . $background_position . ( ! empty( $background_size ) ? ' / ' . $background_size : '' ) . ' ' . $background_attachment );
} else {
$css->add_property( $property, $this->render_color( $background_color ) );
}
} else {
if ( ! empty( $background['color'] ) ) {
$css->add_property( 'background-color', $this->render_color( $background['color'] ) );
}
$image_url = ( ! empty( $background['image'] ) ? 'url("' . $background['image'] . '")' : '' );
if ( ! empty( $image_url ) ) {
$css->add_property( 'background-image', $image_url );
$css->add_property( 'background-size', ( ! empty( $background['size'] ) ? $background['size'] : 'cover' ) );
$css->add_property( 'background-position', ( ! empty( $background['position'] ) ? $background['position'] : 'center center' ) );
$css->add_property( 'background-attachment', ( ! empty( $background['attachment'] ) ? $background['attachment'] : 'scroll' ) );
$css->add_property( 'background-repeat', ( ! empty( $background['repeat'] ) ? $background['repeat'] : 'no-repeat' ) );
}
}
} elseif ( 'gradient' === $type && isset( $background['gradient'] ) && ! empty( $background['gradient'] ) ) {
$css->add_property( 'background', $this->render_gradient( $background['gradient'] ) );
if ( $property !== 'normal' ) {
$css->add_property( $property, $this->render_gradient( $background['gradient'] ) );
} else {
$css->add_property( 'background', $this->render_gradient( $background['gradient'] ) );
}
}
}

Expand Down
Loading

0 comments on commit f75bab6

Please sign in to comment.