Skip to content

Commit

Permalink
navigation and link backgrounds and a few other miscelanious options …
Browse files Browse the repository at this point in the history 
…into the new system
  • Loading branch information
@mark-c-woodard
mark-c-woodard committed Sep 3, 2024
1 parent f799711 commit 235f17d
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 98 deletions.
31 changes: 10 additions & 21 deletions includes/blocks/class-kadence-blocks-navigation-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,8 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$css->add_property( '--kb-nav-dropdown-link-color-active', $css->render_color( $sized_attributes['linkColorDropdownActive']) );
$css->add_property( '--kb-nav-dropdown-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorDropdownActive']), $sized_attributes['parentActive'] );
$css->add_property( '--kb-nav-dropdown-background', $css->render_color( $sized_attributes['backgroundDropdown'] ) );
$css->add_property( '--kb-nav-dropdown-link-background-hover', $css->render_color( $sized_attributes['backgroundDropdownHover'] ));
$css->add_property( '--kb-nav-dropdown-link-background-active', $css->render_color( $sized_attributes['backgroundDropdownActive']));
$css->add_property( '--kb-nav-dropdown-border-bottom', $css->render_border( $sized_attributes['dropdownBorder'], 'bottom' ) );
$css->add_property( '--kb-nav-dropdown-border-top', $css->render_border( $sized_attributes['dropdownBorder'], 'top' ) );
$css->add_property( '--kb-nav-dropdown-border-left', $css->render_border( $sized_attributes['dropdownBorder'], 'left' ) );
Expand All @@ -176,6 +178,9 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
}

if ( $sized_attributes['orientation'] != 'vertical' ) {
$css->add_property( '--kb-nav-dropdown-link-width', $css->render_size( $sized_attributes['dropdownWidth'], $sized_attributes['dropdownWidthUnit'] ) );
$css->add_property( '--kb-nav-top-not-last-link-border-right', $css->render_border( $sized_attributes['divider'], 'bottom' ) );

if ( $sized_attributes['dropdownShadow'] && isset( $sized_attributes['dropdownShadow'][0] ) && $sized_attributes['dropdownShadow'][0]['enable'] ) {
$css->add_property( '--kb-nav-dropdown-box-shadow', $css->render_shadow( $sized_attributes['dropdownShadow'][0] ) );
}
Expand All @@ -186,35 +191,19 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
} else if ( $sized_attributes['dropdownHorizontalAlignment'] == 'right' ) {
$css->add_property( '--kb-nav-dropdown-show-right', '0' );
}
}

if ( $sized_attributes['orientation'] != 'vertical' ) {
$css->add_property( '--kb-nav-dropdown-link-width', $css->render_size( $sized_attributes['dropdownWidth'], $sized_attributes['dropdownWidthUnit'] ) );
} else {
$css->add_property( '--kb-nav-link-border-bottom', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
$css->add_property( '--kb-nav-dropdown-toggle-border-left', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
}

//placement logic where an additional selector is needed
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .menu > .menu-item.kadence-menu-mega-enabled > .sub-menu > .menu-item:not(:last-of-type), .wp-block-kadence-navigation' . $unique_id . ' .menu > .menu-item.kadence-menu-mega-enabled > .sub-menu > .menu-item' );
$css->add_property( '--kb-nav-link-border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );
$css->add_property( '--kb-nav-menu-item-border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );

//can't do a slot/css var with this one. "right" messes with the margin-inline positioning.
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container > ul > li.menu-item .dropdown-navigation-toggle' );
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container > .menu > .menu-item .kb-nav-dropdown-toggle-btn' );
$css->add_property( 'right', $css->render_half_size( $navigation_horizontal_spacing, $attributes['spacingUnit']), $navigation_horizontal_spacing );

$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container ul ul li.menu-item > .kb-link-wrap > a:hover' );
$css->add_property( 'background', $css->render_color( $sized_attributes['backgroundDropdownHover'] ));
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . '.navigation .menu-container ul ul li.menu-item.current-menu-item > .kb-link-wrap > a' );
$css->add_property( 'background', $css->render_color( $sized_attributes['backgroundDropdownActive']));

//divider
if ( $sized_attributes['orientation'] == 'vertical' ) {
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container ul li .kb-link-wrap' );
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation:not(.drawer-navigation-parent-toggle-true) ul li .kb-link-wrap button' );
$css->add_property( 'border-left', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
} else {
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation > .menu-container > ul > li:not(:last-of-type) > .kb-link-wrap' );
$css->add_property( 'border-right', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
}

//transparent styles
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-navigation' . $unique_id . ' .menu-container > ul > li.menu-item > .kb-link-wrap > a, .header-' . strtolower( $size ) . '-transparent .wp-block-kadence-navigation' . $unique_id . ' .menu-container > ul > li.menu-item > .kb-link-wrap' );
Expand Down
39 changes: 17 additions & 22 deletions includes/blocks/class-kadence-blocks-navigation-link-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,9 +248,9 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
'borderRadiusBase' => 'borderRadius',
'borderRadiusUnitBase' => 'borderRadiusUnit',
'shadowBase' => 'shadow',
'selector' => '.wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-' . $unique_id . ' > .kb-link-wrap',
'selectorHover' => '.wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-' . $unique_id . ' > .kb-link-wrap:hover',
'selectorActive' => '.wp-block-kadence-navigation .navigation .menu-container > ul > li.menu-item.current-menu-item.kb-nav-link-' . $unique_id . ' > .kb-link-wrap',
'selector' => '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap ',
'selectorHover' => '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap:hover > .kb-nav-link-content',
'selectorActive' => '.current-menu-item.kb-nav-link-' . $unique_id . ' > .kb-link-wrap > .kb-nav-link-content',
),
$nav_link_attributes
);
Expand Down Expand Up @@ -344,6 +344,13 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$css->add_property( '--kb-nav-dropdown-link-color-hover', $css->render_color( $sized_attributes['linkColorDropdownHover'] ), $sized_attributes['linkColorDropdownHover'] );
$css->add_property( '--kb-nav-dropdown-link-color-active', $css->render_color( $sized_attributes['linkColorDropdownActive']), $sized_attributes['linkColorDropdownActive'] );
$css->add_property( '--kb-nav-dropdown-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorDropdownActive']), $sized_attributes['parentActive'] && $sized_attributes['linkColorDropdownActive'] );
$css->add_property( '--kb-nav-dropdown-background', $css->render_color( $sized_attributes['backgroundDropdown'] ) );
$css->add_property( '--kb-nav-dropdown-link-background-hover', $css->render_color( $sized_attributes['backgroundDropdownHover'] ));
$css->add_property( '--kb-nav-dropdown-link-background-active', $css->render_color( $sized_attributes['backgroundDropdownActive']));
$css->add_property( '--kb-nav-dropdown-link-width', $css->render_size( $sized_attributes['dropdownWidth'], $sized_attributes['dropdownWidthUnit'] ) );
$css->add_property( '--kb-nav-dropdown-link-padding-top', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );
$css->add_property( '--kb-nav-dropdown-link-padding-bottom', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );


//no bleed variables (extra specific to beat things like dropdown or top level styling)
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap' );
Expand All @@ -353,8 +360,15 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$css->add_property( '--kb-nav-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorActive']), $sized_attributes['parentActive'] && $sized_attributes['linkColorActive'] );



//additional dynamic logic, but still lands in a slot in the static stylesheet


//placement logic where an additional selector is needed
$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul li:not(:last-of-type), .wp-block-kadence-navigation .menu-container ul.menu > li.kb-nav-link-' . $unique_id . '.kadence-menu-mega-enabled > ul > li.menu-item > a' );
$css->add_property( '--kb-nav-menu-item-border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );


// Styles For Links in Transparent Header.
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-' . $unique_id . ' > .kb-link-wrap > a, .header-' . strtolower( $size ) . '-transparent .wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-' . $unique_id . ' > .kb-link-wrap' );
$css->add_property( 'color', $css->render_color( $sized_attributes['linkColorTransparent'] ), $sized_attributes['linkColorTransparent'] );
Expand All @@ -377,24 +391,6 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$css->add_property( 'color', $css->render_color( $sized_attributes['linkColorStickyActive'] ) );
$css->add_property( 'background', $css->render_color( $sized_attributes['backgroundStickyActive'] ) );

// Dropdown logic from theme Styles Component.
// Dropdown.
$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul.sub-menu, .wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul.submenu' );
$css->add_property( 'background', $css->render_color( $sized_attributes['backgroundDropdown'] ) );

$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul li:not(:last-of-type), .wp-block-kadence-navigation .menu-container ul.menu > li.kb-nav-link-' . $unique_id . '.kadence-menu-mega-enabled > ul > li.menu-item > a' );
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );

$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul li.menu-item > .kb-link-wrap > a' );
$css->add_property( 'width', $css->render_size( $sized_attributes['dropdownWidth'], $sized_attributes['dropdownWidthUnit'] ) );
$css->add_property( 'padding-top', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );
$css->add_property( 'padding-bottom', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );

$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul li.menu-item > .kb-link-wrap > a:hover' );
$css->add_property( 'background', $css->render_color( $sized_attributes['backgroundDropdownHover'] ));
$css->set_selector( '.wp-block-kadence-navigation.navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul li.menu-item.current-menu-item > .kb-link-wrap > a' );
$css->add_property( 'background', $css->render_color( $sized_attributes['backgroundDropdownActive']));

// Media styles (icons).
if ( $attributes['mediaType'] && 'none' !== $attributes['mediaType'] ) {
// Normal styles.
Expand Down Expand Up @@ -468,7 +464,6 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
if( isset( $sized_attributes['descriptionSpacing'] ) ) {
$css->add_property( 'padding-top', $css->render_size( $sized_attributes['descriptionSpacing'], $sized_attributes['descriptionSpacingUnit'] ?? 'px' ) );
}

if( isset( $sized_attributes['descriptionColor'] ) ) {
$css->add_property( 'color', $css->render_color( $sized_attributes['descriptionColor'] ) );
}
Expand Down
51 changes: 25 additions & 26 deletions src/blocks/navigation-link/components/backend-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -608,9 +608,9 @@ export default function BackendStyles(props) {
borderRadiusBase: 'borderRadius',
borderRadiusUnitBase: 'borderRadiusUnit',
shadowBase: 'shadow',
selector: `.wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-${uniqueID} > .kb-link-wrap`,
selectorHover: `.wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-${uniqueID} > .kb-link-wrap:hover`,
selectorActive: `.wp-block-kadence-navigation .navigation .menu-container > ul > li.menu-item.current-menu-item.kb-nav-link-${uniqueID} > .kb-link-wrap`,
selector: `.kb-nav-link-${uniqueID} > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap `,
selectorHover: `.kb-nav-link-${uniqueID} > .kb-link-wrap:hover > .kb-nav-link-content`,
selectorActive: `.current-menu-item.kb-nav-link-${uniqueID} > .kb-link-wrap > .kb-nav-link-content`,
},
attributes,
previewDevice
Expand All @@ -619,14 +619,6 @@ export default function BackendStyles(props) {
//no added specificty needed for these variables
//these variable will slot into selectors found in the static stylesheet.
css.set_selector(`.kb-nav-link-${uniqueID}`);
css.add_property(
'--kb-nav-dropdown-link-padding-top',
css.render_size(previewDropdownVerticalSpacing, dropdownVerticalSpacingUnit)
);
css.add_property(
'--kb-nav-dropdown-link-padding-bottom',
css.render_size(previewDropdownVerticalSpacing, dropdownVerticalSpacingUnit)
);
css.render_measure_output(
paddingDropdown,
tabletPaddingDropdown,
Expand Down Expand Up @@ -663,6 +655,19 @@ export default function BackendStyles(props) {
css.render_color(previewLinkColorDropdownActive),
previewLinkColorDropdownActive
);
css.add_property('--kb-nav-dropdown-background', css.render_color(previewBackgroundDropdown));

css.add_property('--kb-nav-dropdown-link-background-hover', css.render_color(previewBackgroundDropdownHover));
css.add_property('--kb-nav-dropdown-link-background-active', css.render_color(previewBackgroundDropdownActive));
css.add_property('width', previewDropdownWidth + dropdownWidthUnit);
css.add_property(
'--kb-nav-dropdown-link-padding-top',
css.render_size(previewDropdownVerticalSpacing, dropdownVerticalSpacingUnit)
);
css.add_property(
'--kb-nav-dropdown-link-padding-bottom',
css.render_size(previewDropdownVerticalSpacing, dropdownVerticalSpacingUnit)
);

//no bleed variables (extra specific to beat things like dropdown or top level styling)
css.set_selector(`.kb-nav-link-${uniqueID} > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap`);
Expand All @@ -675,6 +680,15 @@ export default function BackendStyles(props) {
previewLinkColorActive
);

//placement logic where an additional selector is needed
css.set_selector(
`.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-${uniqueID} ul li:not(:last-of-type), .wp-block-kadence-navigation .menu-container ul.menu li.kb-nav-link-${uniqueID}.kadence-menu-mega-enabled > ul > li.menu-item > a`
);
css.add_property(
'--kb-nav-menu-item-border-bottom',
css.render_border(dropdownDivider, dropdownDividerTablet, dropdownDividerMobile, previewDevice, 'bottom')
);

css.set_selector(
`.wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-${uniqueID} > .kb-link-wrap`
);
Expand Down Expand Up @@ -764,8 +778,6 @@ export default function BackendStyles(props) {
css.set_selector(
`.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-${uniqueID} ul.sub-menu, .wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-${uniqueID} ul.submenu`
);
css.add_property('width', previewDropdownWidth + dropdownWidthUnit);
css.add_property('background', css.render_color(previewBackgroundDropdown));

css.add_property(
'border-top',
Expand All @@ -791,13 +803,6 @@ export default function BackendStyles(props) {
'border-radius',
dropdownBorderRadiusUnit
);
css.set_selector(
`.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-${uniqueID} ul li:not(:last-of-type), .wp-block-kadence-navigation .menu-container ul.menu li.kb-nav-link-${uniqueID}.kadence-menu-mega-enabled > ul > li.menu-item > a`
);
css.add_property(
'border-bottom',
css.render_border(dropdownDivider, dropdownDividerTablet, dropdownDividerMobile, previewDevice, 'bottom')
);

//dropdown nav link
css.set_selector(`.kb-nav-link-${uniqueID} .sub-menu li.menu-item > .kb-link-wrap > a`);
Expand All @@ -820,12 +825,6 @@ export default function BackendStyles(props) {
marginDropdownLinkUnit
);

css.add_property('background', css.render_color(previewBackgroundDropdownHover));
css.set_selector(
`.wp-block-kadence-navigation.navigation .menu-container ul .kb-nav-link-${uniqueID} ul li.menu-item.current-menu-item > .kb-link-wrap > a`
);
css.add_property('background', css.render_color(previewBackgroundDropdownActive));

css.set_selector(
`.wp-block-kadence-navigation .navigation .menu-container > ul li.kb-nav-link-${uniqueID} > .kb-link-wrap.kb-link-wrap.kb-link-wrap > a`
);
Expand Down
Loading

0 comments on commit 235f17d

Please sign in to comment.