From 9143aae125a421f8476f66e5e698af65a2073651 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Mon, 25 Nov 2024 11:41:58 +0530 Subject: [PATCH 1/3] Navigation: Add "Open in new tab" toggle to navigation block sidebar --- packages/block-library/src/navigation-link/edit.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 9e2e171975570f..ec8960205376ec 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -15,6 +15,7 @@ import { ToolbarButton, Tooltip, ToolbarGroup, + ToggleControl, } from '@wordpress/components'; import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; @@ -159,9 +160,19 @@ 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 ( + + setAttributes( { opensInNewTab: ! opensInNewTab } ) + } + /> + Date: Tue, 26 Nov 2024 11:13:34 +0530 Subject: [PATCH 2/3] Navigation: Add "Open in New Tab" toggle under Link settings --- .../block-library/src/navigation-link/edit.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index ec8960205376ec..573f6aa71acbc3 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -163,16 +163,6 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) { const { label, url, description, title, rel, opensInNewTab } = attributes; return ( - - setAttributes( { opensInNewTab: ! opensInNewTab } ) - } - /> - + + setAttributes( { opensInNewTab: ! opensInNewTab } ) + } + /> Date: Fri, 3 Jan 2025 12:47:21 +0530 Subject: [PATCH 3/3] Navigation Link: Move "Open in new tab" toggle into separate ToolsPanelItem --- .../block-library/src/navigation-link/edit.js | 50 +++++++++++-------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 539b89df4411e5..61280c08c66938 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -6,43 +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, - ToggleControl, -} 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' }; @@ -204,6 +204,13 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) { } } autoComplete="off" /> + + !! opensInNewTab } + label={ __( 'Open in new tab' ) } + onDeselect={ () => setAttributes( { opensInNewTab: false } ) } + isShownByDefault + > - !! description } label={ __( 'Description' ) }