updating some navigation link controls

https://stellarwp.atlassian.net/browse/KAD-4010
stellarwp · Jan 10, 2025 · 08f7d50 · 08f7d50
1 parent ed000e7
commit 08f7d50
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 55 deletions.
diff --git a/includes/blocks/class-kadence-blocks-navigation-link-block.php b/includes/blocks/class-kadence-blocks-navigation-link-block.php
@@ -673,29 +673,44 @@ public function build_html( $attributes, $unique_id, $content, $block_instance )
 			}
 			$highlight_label = '<span class="link-highlight-label"><span class="link-highlight-label-text">' . $attributes['highlightLabel'] . '</span>' . $hl_icon . '</span>';
 		}
+
 		$title_html = ! empty( $media ) || ! empty( $attributes['description'] ) ? '<span class="kb-nav-item-title-wrap">' : '';
 		if ( $has_highlight_label && $highlight_with_title ) {
 			$title .= $highlight_label;
 		}
 		$title_html .= ! empty( $attributes['description'] ) || ! empty( $media ) || ( $has_highlight_label && $highlight_with_title ) ? '<span class="kb-nav-label-content">' . $title . '</span>' : $title;
 		$title_html .= $media;
 		$title_html .= ! empty( $attributes['description'] ) ? '<span class="kb-nav-label-description">' . $attributes['description'] . '</span>' : '';
-
 		// $title_html .= $has_children ? '<span class="kb-nav-dropdown-toggle">' . $down_arrow_icon . '</span>' : '';
 		$title_html .= ! empty( $media ) || ! empty( $attributes['description'] ) ? '</span>' : '';
 		if ( ! $highlight_with_title ) {
 			$title_html .= $highlight_label;
 		}
+
 		$link_class = implode( ' ', $link_classes );
-		$link_url   = ( ! empty( $attributes['disableLink'] ) && true === $attributes['disableLink'] ) || ( $has_children && isset( $attributes['dropdownClick'] ) && true === $attributes['dropdownClick'] ) ? '' : ' href="' . esc_url( $url ) . '"';
+
+		$link_url = ( ! empty( $attributes['disableLink'] ) && true === $attributes['disableLink'] ) || ( $has_children && isset( $attributes['dropdownClick'] ) && true === $attributes['dropdownClick'] ) ? '' : ' href="' . esc_url( $url ) . '"';
 		if ( ! empty( $attributes['name'] ) ) {
 			$link_url .= ' aria-label="' . esc_attr( $attributes['name'] ) . '"';
 		}
+
+		$link_target = '';
+		if ( $attributes['target'] ) {
+			$link_target .= 'target="' . esc_attr( $attributes['target'] ) . '"';
+		}
+
+		$link_rel = '';
+		if ( $attributes['rel'] ) {
+			$link_rel .= 'rel="' . esc_attr( $attributes['rel'] ) . '"';
+		}
+
 		return sprintf(
-			'<li %1$s><div class="kb-link-wrap"><a class="%2$s"%3$s>%4$s</a>%5$s</div>%6$s</li>',
+			'<li %1$s><div class="kb-link-wrap"><a class="%2$s"%3$s %4$s %5$s>%6$s</a>%7$s</div>%8$s</li>',
 			$wrapper_attributes,
 			$link_class,
 			$link_url,
+			$link_target,
+			$link_rel,
 			$title_html,
 			$sub_menu_btn,
 			$sub_menu_content,

diff --git a/src/blocks/navigation-link/block.json b/src/blocks/navigation-link/block.json
@@ -32,6 +32,10 @@
 			"type": "string",
 			"default": ""
 		},
+		"target": {
+			"type": "string",
+			"default": ""
+		},
 		"id": {
 			"type": "number"
 		},

diff --git a/src/blocks/navigation-link/edit.js b/src/blocks/navigation-link/edit.js
@@ -203,7 +203,7 @@ export default function Edit(props) {
 		disableLink,
 		description,
 		rel,
-		title,
+		target,
 		kind,
 		isMegaMenu,
 		uniqueID,
@@ -1136,43 +1136,63 @@ export default function Edit(props) {
 								checked={hideLabel}
 								onChange={(value) => setAttributes({ hideLabel: value })}
 							/>
-							<TextControl
-								__nextHasNoMarginBottom
-								value={url ? url : ''}
-								onChange={(value) => {
-									setAttributes({ url: value });
-								}}
-								label={__('URL')}
-								autoComplete="off"
-								disabled={hasSyncedLink}
-							/>
-							<Button
-								variant="link"
-								onClick={() => {
-									setAttributes({ type: '', kind: 'custom' });
-								}}
-								label={__('Label')}
-								autoComplete="off"
-								onFocus={() => setIsLabelFieldFocused(true)}
-								onBlur={() => setIsLabelFieldFocused(false)}
-							/>
-							{hasSyncedLink && (
-								<Button
-									variant="link"
-									onClick={() => {
-										setAttributes({ type: '', kind: 'custom' });
-									}}
-									className={'components-base-control kb-nav-link-edit-link-button'}
-								>
-									{__('Edit URL', 'kadence-blocks')}
-								</Button>
-							)}
 							<ToggleControl
 								label={__('Disable Link', 'kadence-blocks')}
 								checked={disableLink}
 								onChange={(value) => setAttributes({ disableLink: value })}
 							/>
 
+							{!disableLink && (
+								<>
+									<ToggleControl
+										label={__('Open in new tab', 'kadence-blocks')}
+										checked={target == '_blank'}
+										onChange={(value) => setAttributes({ target: value ? '_blank' : '' })}
+									/>
+									<TextControl
+										__nextHasNoMarginBottom
+										value={url ? url : ''}
+										onChange={(value) => {
+											setAttributes({ url: value });
+										}}
+										label={__('URL')}
+										autoComplete="off"
+										disabled={hasSyncedLink}
+									/>
+									<Button
+										variant="link"
+										onClick={() => {
+											setAttributes({ type: '', kind: 'custom' });
+										}}
+										label={__('Label')}
+										autoComplete="off"
+										onFocus={() => setIsLabelFieldFocused(true)}
+										onBlur={() => setIsLabelFieldFocused(false)}
+									/>
+									{hasSyncedLink && (
+										<Button
+											variant="link"
+											onClick={() => {
+												setAttributes({ type: '', kind: 'custom' });
+											}}
+											className={'components-base-control kb-nav-link-edit-link-button'}
+										>
+											{__('Edit URL', 'kadence-blocks')}
+										</Button>
+									)}
+									<TextControl
+										__nextHasNoMarginBottom
+										value={rel || ''}
+										onChange={(relValue) => {
+											setAttributes({ rel: relValue });
+										}}
+										label={__('Rel attribute')}
+										autoComplete="off"
+										help={__('The relationship of the linked URL as space-separated link types.')}
+									/>
+								</>
+							)}
+
 							<TextareaControl
 								__nextHasNoMarginBottom
 								value={description || ''}
@@ -1182,26 +1202,6 @@ export default function Edit(props) {
 								label={__('Description', 'kadence-blocks')}
 								help={__('Supporting text for this item.', 'kadence-blocks')}
 							/>
-							<TextControl
-								__nextHasNoMarginBottom
-								value={title || ''}
-								onChange={(titleValue) => {
-									setAttributes({ title: titleValue });
-								}}
-								label={__('Title attribute')}
-								autoComplete="off"
-								help={__('Additional information to help clarify the purpose of the link.')}
-							/>
-							<TextControl
-								__nextHasNoMarginBottom
-								value={rel || ''}
-								onChange={(relValue) => {
-									setAttributes({ rel: relValue });
-								}}
-								label={__('Rel attribute')}
-								autoComplete="off"
-								help={__('The relationship of the linked URL as space-separated link types.')}
-							/>
 						</KadencePanelBody>
 
 						{/* only show this section if there will actually be something inside it */}