Skip to content

Commit

Permalink
Merge pull request #614 from stellarwp/feature/navigation-parent-alig…
Browse files Browse the repository at this point in the history 
…nment

adding link alignment controls to the parent navigation block
  • Loading branch information
@mark-c-woodard
mark-c-woodard authored Nov 18, 2024
2 parents dc06062 + 640af49 commit 8c4034c
Show file tree
Hide file tree
Showing 7 changed files with 156 additions and 17 deletions.
16 changes: 16 additions & 0 deletions includes/blocks/class-kadence-blocks-navigation-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,22 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
$css->add_property( '--kb-nav-top-not-last-link-border-right', 'var(--kb-nav-link-border-right)' );
}

//link, description, and media alignment
if ($sized_attributes['linkHorizontalAlignment']) {
$css->add_property('--kb-nav-top-link-align', $sized_attributes['linkHorizontalAlignment']);
$link_flex_align = $sized_attributes['linkHorizontalAlignment'] == 'right' ? 'end' : ( $sized_attributes['linkHorizontalAlignment'] == 'center' ? 'center' : 'start' );
$css->add_property('--kb-nav-top-link-flex-justify', $link_flex_align);
$css->add_property('--kb-nav-top-link-media-container-align-self', $link_flex_align);
}

//dropdown link, description, and media alignment
if ($sized_attributes['dropdownLinkHorizontalAlignment']) {
$css->add_property('--kb-nav-dropdown-link-align', $sized_attributes['dropdownLinkHorizontalAlignment']);
$link_flex_align = $sized_attributes['dropdownLinkHorizontalAlignment'] == 'right' ? 'end' : ( $sized_attributes['dropdownLinkHorizontalAlignment'] == 'center' ? 'center' : 'start' );
$css->add_property('--kb-nav-dropdown-link-flex-justify', $link_flex_align);
$css->add_property('--kb-nav-dropdown-link-media-container-align-self', $link_flex_align);
}

if ( str_contains( $sized_attributes['style'], 'fullheight' ) ) {
$css->add_property( '--kb-nav-height', '100%' );
}
Expand Down
3 changes: 1 addition & 2 deletions includes/blocks/class-kadence-blocks-navigation-link-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,9 +390,8 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
}

//link, description, and media alignment
$css->add_property( '--kb-nav-link-align', $sized_attributes['align'] ? $sized_attributes['align'] : 'left' );
if ($sized_attributes['align']) {
$css->add_property('--kb-nav-link-align', $sized_attributes['align'] != '' ? $sized_attributes['align'] : 'left');
$css->add_property( '--kb-nav-link-align', $sized_attributes['align'] );
$sized_flex_align = $sized_attributes['align'] == 'right' ? 'end' : ( $sized_attributes['align'] == 'center' ? 'center' : 'start' );
$css->add_property('--kb-nav-link-flex-justify', $sized_flex_align);
$css->add_property('--kb-nav-link-media-container-align-self', $sized_flex_align);
Expand Down
30 changes: 30 additions & 0 deletions includes/navigation/class-kadence-navigation-cpt.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2073,6 +2073,36 @@ public function register_meta() {
'inset' => array( 'type' => 'boolean' ),
),
),
array(
'key' => '_kad_navigation_linkHorizontalAlignment',
'default' => '',
'type' => 'string',
),
array(
'key' => '_kad_navigation_linkHorizontalAlignmentTablet',
'default' => '',
'type' => 'string',
),
array(
'key' => '_kad_navigation_linkHorizontalAlignmentMobile',
'default' => '',
'type' => 'string',
),
array(
'key' => '_kad_navigation_dropdownLinkHorizontalAlignment',
'default' => '',
'type' => 'string',
),
array(
'key' => '_kad_navigation_dropdownLinkHorizontalAlignmentTablet',
'default' => '',
'type' => 'string',
),
array(
'key' => '_kad_navigation_dropdownLinkHorizontalAlignmentMobile',
'default' => '',
'type' => 'string',
),
);

foreach ( $register_meta as $meta ) {
Expand Down
22 changes: 11 additions & 11 deletions src/blocks/navigation-link/components/backend-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1087,6 +1087,17 @@ export default function BackendStyles(props) {
css.render_color(previewDescriptionColorActive)
);

//link, description, and media alignment
if (previewAlign) {
css.add_property('--kb-nav-link-align', previewAlign);
const previewFlexAlign = previewAlign == 'right' ? 'end' : previewAlign == 'center' ? 'center' : 'start';
css.add_property('--kb-nav-link-flex-justify', previewFlexAlign);
css.add_property('--kb-nav-link-media-container-align-self', previewFlexAlign);
if (previewMediaAlign == 'top' || previewMediaAlign == 'bottom') {
css.add_property('--kb-nav-link-flex-align', previewFlexAlign);
}
}

//media styles
if (mediaType && 'none' !== mediaType) {
css.add_property('--kb-nav-link-icon-font-size', css.render_size(previewMediaIconSize, 'px'));
Expand Down Expand Up @@ -1143,17 +1154,6 @@ export default function BackendStyles(props) {
}
}

//link, description, and media alignment
css.add_property('--kb-nav-link-align', previewAlign != '' ? previewAlign : 'left');
if (previewAlign) {
const previewFlexAlign = previewAlign == 'right' ? 'end' : previewAlign == 'center' ? 'center' : 'start';
css.add_property('--kb-nav-link-flex-justify', previewFlexAlign);
css.add_property('--kb-nav-link-media-container-align-self', previewFlexAlign);
if (previewMediaAlign == 'top' || previewMediaAlign == 'bottom') {
css.add_property('--kb-nav-link-flex-align', previewFlexAlign);
}
}

//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`
Expand Down
44 changes: 44 additions & 0 deletions src/blocks/navigation/components/backend-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,12 @@ export default function BackendStyles(props) {
horizontalGrid,
horizontalGridTablet,
horizontalGridMobile,
dropdownLinkHorizontalAlignment,
dropdownLinkHorizontalAlignmentTablet,
dropdownLinkHorizontalAlignmentMobile,
linkHorizontalAlignment,
linkHorizontalAlignmentTablet,
linkHorizontalAlignmentMobile,
} = metaAttributes;

const css = new KadenceBlocksCSS();
Expand Down Expand Up @@ -464,6 +470,18 @@ export default function BackendStyles(props) {
dropdownHorizontalAlignmentTablet,
dropdownHorizontalAlignmentMobile
);
const previewDropdownLinkHorizontalAlignment = getPreviewSize(
previewDevice,
dropdownLinkHorizontalAlignment,
dropdownLinkHorizontalAlignmentTablet,
dropdownLinkHorizontalAlignmentMobile
);
const previewLinkHorizontalAlignment = getPreviewSize(
previewDevice,
linkHorizontalAlignment,
linkHorizontalAlignmentTablet,
linkHorizontalAlignmentMobile
);
//need to caclulate this outside of conditionals because it uses a hook underneath.
const dividerValue = css.render_border(divider, dividerTablet, dividerMobile, previewDevice, 'bottom');
const dropdownDividerValue = css.render_border(
Expand Down Expand Up @@ -771,6 +789,32 @@ export default function BackendStyles(props) {
css.add_property('--kb-nav-top-not-last-link-border-right', 'var(--kb-nav-link-border-right)');
}

//link, description, and media alignment
if (previewLinkHorizontalAlignment) {
css.add_property('--kb-nav-top-link-align', previewLinkHorizontalAlignment);
const previewLinkFlexAlign =
previewLinkHorizontalAlignment == 'right'
? 'end'
: previewLinkHorizontalAlignment == 'center'
? 'center'
: 'start';
css.add_property('--kb-nav-top-link-flex-justify', previewLinkFlexAlign);
css.add_property('--kb-nav-top-link-media-container-align-self', previewLinkFlexAlign);
}

//dropdown link, description, and media alignment
if (previewDropdownLinkHorizontalAlignment) {
css.add_property('--kb-nav-dropdown-link-align', previewDropdownLinkHorizontalAlignment);
const previewDropdownLinkFlexAlign =
previewDropdownLinkHorizontalAlignment == 'right'
? 'end'
: previewDropdownLinkHorizontalAlignment == 'center'
? 'center'
: 'start';
css.add_property('--kb-nav-dropdown-link-flex-justify', previewDropdownLinkFlexAlign);
css.add_property('--kb-nav-dropdown-link-media-container-align-self', previewDropdownLinkFlexAlign);
}

//placement logic where an additional selector is needed
//not last submenu items and mega menu nav links
css.set_selector(
Expand Down
44 changes: 44 additions & 0 deletions src/blocks/navigation/edit-inner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
ResponsiveButtonStyleControlsWithStates,
KadenceWebfontLoader,
KadenceSubPanelBody,
ResponsiveAlignControls,
} from '@kadence/components';
import { getPreviewSize, mouseOverVisualizer, showSettings, arrayStringToInt } from '@kadence/helpers';

Expand Down Expand Up @@ -422,6 +423,12 @@ export function EditInner(props) {
dropdownDescriptionPositioning: meta?._kad_navigation_dropdownDescriptionPositioning,
dropdownDescriptionPositioningTablet: meta?._kad_navigation_dropdownDescriptionPositioningTablet,
dropdownDescriptionPositioningMobile: meta?._kad_navigation_dropdownDescriptionPositioningMobile,
dropdownLinkHorizontalAlignment: meta?._kad_navigation_dropdownLinkHorizontalAlignment,
dropdownLinkHorizontalAlignmentTablet: meta?._kad_navigation_dropdownLinkHorizontalAlignmentTablet,
dropdownLinkHorizontalAlignmentMobile: meta?._kad_navigation_dropdownLinkHorizontalAlignmentMobile,
linkHorizontalAlignment: meta?._kad_navigation_linkHorizontalAlignment,
linkHorizontalAlignmentTablet: meta?._kad_navigation_linkHorizontalAlignmentTablet,
linkHorizontalAlignmentMobile: meta?._kad_navigation_linkHorizontalAlignmentMobile,
};

const {
Expand Down Expand Up @@ -615,6 +622,12 @@ export function EditInner(props) {
dropdownDescriptionPositioning,
dropdownDescriptionPositioningTablet,
dropdownDescriptionPositioningMobile,
dropdownLinkHorizontalAlignment,
dropdownLinkHorizontalAlignmentTablet,
dropdownLinkHorizontalAlignmentMobile,
linkHorizontalAlignment,
linkHorizontalAlignmentTablet,
linkHorizontalAlignmentMobile,
} = metaAttributes;

const inTemplatePreviewMode = !id && templateKey;
Expand Down Expand Up @@ -1470,6 +1483,16 @@ export function EditInner(props) {
setMetaAttribute={setMetaAttribute}
attributes={metaAttributes}
/>

<ResponsiveAlignControls
label={__('Alignment', 'kadence-blocks')}
value={linkHorizontalAlignment ? linkHorizontalAlignment : ''}
tabletValue={linkHorizontalAlignmentTablet ? linkHorizontalAlignmentTablet : ''}
mobileValue={linkHorizontalAlignmentMobile ? linkHorizontalAlignmentMobile : ''}
onChange={(value) => setMetaAttribute(value, 'linkHorizontalAlignment')}
onChangeTablet={(value) => setMetaAttribute(value, 'linkHorizontalAlignmentTablet')}
onChangeMobile={(value) => setMetaAttribute(value, 'linkHorizontalAlignmentMobile')}
/>
</KadencePanelBody>
{context?.['kadence/headerIsTransparent'] == '1' && (
<KadencePanelBody
Expand Down Expand Up @@ -1949,6 +1972,27 @@ export function EditInner(props) {
units={['px', 'em', 'rem', '%']}
onUnit={(value) => setMetaAttribute(value, 'marginDropdownLinkUnit')}
/>
<ResponsiveAlignControls
label={__('Alignment', 'kadence-blocks')}
value={dropdownLinkHorizontalAlignment ? dropdownLinkHorizontalAlignment : ''}
tabletValue={
dropdownLinkHorizontalAlignmentTablet
? dropdownLinkHorizontalAlignmentTablet
: ''
}
mobileValue={
dropdownLinkHorizontalAlignmentMobile
? dropdownLinkHorizontalAlignmentMobile
: ''
}
onChange={(value) => setMetaAttribute(value, 'dropdownLinkHorizontalAlignment')}
onChangeTablet={(value) =>
setMetaAttribute(value, 'dropdownLinkHorizontalAlignmentTablet')
}
onChangeMobile={(value) =>
setMetaAttribute(value, 'dropdownLinkHorizontalAlignmentMobile')
}
/>
{showSettings('fontSettings', 'kadence/navigation') && (
<KadencePanelBody
title={__('Typography Settings', 'kadence-blocks')}
Expand Down
14 changes: 10 additions & 4 deletions src/blocks/navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,6 @@ $link-color-property: var(

.kb-nav-item-title-wrap {
position: relative;
text-align: left;
}

/**
Expand Down Expand Up @@ -789,6 +788,9 @@ $link-color-property: var(
--kb-nav-link-description-padding-bottom: var(--kb-nav-dropdown-link-description-padding-bottom);
--kb-nav-link-description-padding-left: var(--kb-nav-dropdown-link-description-padding-left);

--kb-nav-link-align: var(--kb-nav-dropdown-link-align);
--kb-nav-link-flex-justify: var(--kb-nav-dropdown-link-flex-justify);

& > .kb-nav-link-content {
width: var(--kb-nav-dropdown-link-width, 200px);
}
Expand Down Expand Up @@ -1031,8 +1033,8 @@ $link-color-property: var(
//color copied here for specifity reasons
color: $link-color-property;
gap: var(--kb-nav-link-gap);
text-align: var(--kb-nav-link-align);
justify-content: var(--kb-nav-link-align);
text-align: var(--kb-nav-link-align, left);
justify-content: var(--kb-nav-link-align, left);

&:not([href]) {
cursor: default;
Expand Down Expand Up @@ -1175,6 +1177,9 @@ $link-color-property: var(
--kb-nav-link-description-padding-bottom: var(--kb-nav-top-link-description-padding-bottom);
--kb-nav-link-description-padding-left: var(--kb-nav-top-link-description-padding-left);

--kb-nav-link-align: var(--kb-nav-top-link-align);
--kb-nav-link-flex-justify: var(--kb-nav-top-link-flex-justify);

& > .kb-nav-link-content {
display: flex;
align-items: center;
Expand Down Expand Up @@ -1374,10 +1379,11 @@ $link-color-property: var(
grid-template-columns: var(--kb-nav-link-title-wrap-grid-template-columns);
flex-direction: var(--kb-nav-link-title-wrap-flex-direction);
display: var(--kb-nav-link-title-wrap-display, flex);
text-align: var(--kb-nav-link-align);
flex-wrap: nowrap;
text-align: var(--kb-nav-link-align, left);
align-items: var(--kb-nav-link-flex-align, center);
justify-items: var(--kb-nav-link-flex-justify, start);
justify-content: var(--kb-nav-link-flex-justify, start);
}

.kb-menu-has-description {
Expand Down

0 comments on commit 8c4034c

Please sign in to comment.