Navigation Link: Add "Open in new tab" toggle to navigation block sidebar

packages/block-library/src/navigation-link/edit.js

@@ -6,42 +6,43 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	TextControl,
-	TextareaControl,
-	ToolbarButton,
-	Tooltip,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
-import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	useBlockProps,
 	store as blockEditorStore,
 	getColorClassName,
+	useBlockProps,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
-import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+import {
+	TextControl,
+	TextareaControl,
+	ToggleControl,
+	ToolbarButton,
+	ToolbarGroup,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	Tooltip,
+} from '@wordpress/components';
+import { useMergeRefs, usePrevious } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { link as linkIcon, addSubmenu } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs, usePrevious } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { addSubmenu, link as linkIcon } from '@wordpress/icons';
+import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
+import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import { getColors } from '../navigation/edit/utils';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
-import { getColors } from '../navigation/edit/utils';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 
@@ -160,7 +161,7 @@ function getMissingText( type ) {
  * Consider reuseing this components for both blocks.
  */
 function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
-	const { label, url, description, title, rel } = attributes;
+	const { label, url, description, title, rel, opensInNewTab } = attributes;
 	return (
 		<ToolsPanel label={ __( 'Settings' ) }>
 			<ToolsPanelItem
@@ -204,7 +205,24 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 					autoComplete="off"
 				/>
 			</ToolsPanelItem>
-
+			<ToolsPanelItem
+				hasValue={ () => !! opensInNewTab }
+				label={ __( 'Open in new tab' ) }
+				onDeselect={ () => setAttributes( { opensInNewTab: false } ) }
+				isShownByDefault
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Open in new tab' ) }
+					help={ __(
+						'The link will open in a new tab when clicked.'
+					) }
+					checked={ opensInNewTab }
+					onChange={ () =>
+						setAttributes( { opensInNewTab: ! opensInNewTab } )
+					}
+				/>
+			</ToolsPanelItem>
 			<ToolsPanelItem
 				hasValue={ () => !! description }
 				label={ __( 'Description' ) }