adding link alignment controls to the parent navigation block to matc…

…h controls for the nav item Also cleaning up some styling around nav link alignment not applying correctly https://stellarwp.atlassian.net/browse/KAD-3694
stellarwp · Nov 18, 2024 · 640af49 · 640af49
1 parent dc06062
commit 640af49
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 17 deletions.
diff --git a/includes/blocks/class-kadence-blocks-navigation-block.php b/includes/blocks/class-kadence-blocks-navigation-block.php
@@ -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%' );
 		}

diff --git a/includes/blocks/class-kadence-blocks-navigation-link-block.php b/includes/blocks/class-kadence-blocks-navigation-link-block.php
@@ -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);

diff --git a/includes/navigation/class-kadence-navigation-cpt.php b/includes/navigation/class-kadence-navigation-cpt.php
@@ -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 ) {

diff --git a/src/blocks/navigation-link/components/backend-styles/index.js b/src/blocks/navigation-link/components/backend-styles/index.js
@@ -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'));
@@ -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`

diff --git a/src/blocks/navigation/components/backend-styles/index.js b/src/blocks/navigation/components/backend-styles/index.js
@@ -197,6 +197,12 @@ export default function BackendStyles(props) {
 		horizontalGrid,
 		horizontalGridTablet,
 		horizontalGridMobile,
+		dropdownLinkHorizontalAlignment,
+		dropdownLinkHorizontalAlignmentTablet,
+		dropdownLinkHorizontalAlignmentMobile,
+		linkHorizontalAlignment,
+		linkHorizontalAlignmentTablet,
+		linkHorizontalAlignmentMobile,
 	} = metaAttributes;
 
 	const css = new KadenceBlocksCSS();
@@ -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(
@@ -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(

diff --git a/src/blocks/navigation/edit-inner.js b/src/blocks/navigation/edit-inner.js
@@ -35,6 +35,7 @@ import {
 	ResponsiveButtonStyleControlsWithStates,
 	KadenceWebfontLoader,
 	KadenceSubPanelBody,
+	ResponsiveAlignControls,
 } from '@kadence/components';
 import { getPreviewSize, mouseOverVisualizer, showSettings, arrayStringToInt } from '@kadence/helpers';
 
@@ -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 {
@@ -615,6 +622,12 @@ export function EditInner(props) {
 		dropdownDescriptionPositioning,
 		dropdownDescriptionPositioningTablet,
 		dropdownDescriptionPositioningMobile,
+		dropdownLinkHorizontalAlignment,
+		dropdownLinkHorizontalAlignmentTablet,
+		dropdownLinkHorizontalAlignmentMobile,
+		linkHorizontalAlignment,
+		linkHorizontalAlignmentTablet,
+		linkHorizontalAlignmentMobile,
 	} = metaAttributes;
 
 	const inTemplatePreviewMode = !id && templateKey;
@@ -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
@@ -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')}

diff --git a/src/blocks/navigation/style.scss b/src/blocks/navigation/style.scss
@@ -230,7 +230,6 @@ $link-color-property: var(
 
 	.kb-nav-item-title-wrap {
 		position: relative;
-		text-align: left;
 	}
 
 	/**
@@ -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);
 			}
@@ -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;
@@ -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;
@@ -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 {