import { ToolbarButton, ToolbarGroup } from '@wordpress/components';

import { isURL, prependHTTP } from '@wordpress/url';

import { Controls } from './shared';

This directory contains shared components and utilities used by both the Navigation Link and Navigation Submenu blocks to reduce code duplication and ensure consistent behavior.

The Navigation Link and Navigation Submenu blocks share significant functionality, particularly in their inspector controls (ToolsPanel). This shared directory was created to:

- **Reduce code duplication** - Eliminate identical code between the two blocks

- **Ensure consistency** - Both blocks now use the same components, preventing behavioral differences

- **Reduce maintenance burden** - Changes to shared functionality only need to be made in one place

- **Minimize bugs** - Less duplicated code means fewer places for bugs to hide

- **Improve testability** - Shared components can be tested once and reused

- **`Controls`** - Inspector controls component providing the ToolsPanel interface for both blocks

While this shared directory provides immediate benefits for reducing duplication, the long-term vision is to refactor towards a **unified Navigation Item block** that can behave differently based on context (link vs submenu). This would:

- Eliminate the need for separate Navigation Link and Navigation Submenu blocks

- Provide a single, more maintainable codebase

- Allow for more flexible navigation item types

- Simplify the user experience

However, this refactoring is beyond the current scope and would require significant architectural changes. For now, this shared directory provides a practical solution that:

- Maintains backward compatibility

- Reduces immediate technical debt

- Prepares the foundation for future unification

- Supports the integration of new features like Dynamic URL functionality

All shared components include comprehensive tests in the `test/` directory. The tests use pure mocking strategies to ensure isolated, reliable testing of component behavior.

When adding new shared functionality:

1. Place shared components in this directory

2. Export them from `index.js`

3. Add comprehensive tests

4. Update both Navigation Link and Navigation Submenu blocks to use the shared component

5. Remove any duplicated code from the individual blocks

import {

__experimentalToolsPanel as ToolsPanel,

__experimentalToolsPanelItem as ToolsPanelItem,

CheckboxControl,

TextControl,

TextareaControl,

} from '@wordpress/components';

import { __ } from '@wordpress/i18n';

import { useRef } from '@wordpress/element';

import { safeDecodeURI } from '@wordpress/url';

import { __unstableStripHTML as stripHTML } from '@wordpress/dom';

import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';

import { updateAttributes } from '../update-attributes';

export function Controls( {

attributes,

setAttributes,

setIsEditingControl = () => {},

} ) {

const { label, url, description, rel, opensInNewTab } = attributes;

const lastURLRef = useRef( url );

const dropdownMenuProps = useToolsPanelDropdownMenuProps();

return (

<ToolsPanel

label={ __( 'Settings' ) }

resetAll={ () => {

setAttributes( {

label: '',

url: '',

description: '',

rel: '',

opensInNewTab: false,

} );

} }

dropdownMenuProps={ dropdownMenuProps }

>

<ToolsPanelItem

hasValue={ () => !! label }

label={ __( 'Text' ) }

onDeselect={ () => setAttributes( { label: '' } ) }

isShownByDefault

>

<TextControl

__nextHasNoMarginBottom

__next40pxDefaultSize

label={ __( 'Text' ) }

value={ label ? stripHTML( label ) : '' }

onChange={ ( labelValue ) => {

setAttributes( { label: labelValue } );

} }

autoComplete="off"

onFocus={ () => setIsEditingControl( true ) }

onBlur={ () => setIsEditingControl( false ) }

/>

</ToolsPanelItem>

<ToolsPanelItem

hasValue={ () => !! url }

label={ __( 'Link' ) }

onDeselect={ () => setAttributes( { url: '' } ) }

isShownByDefault

>

<TextControl

__nextHasNoMarginBottom

__next40pxDefaultSize

label={ __( 'Link' ) }

value={ url ? safeDecodeURI( url ) : '' }

onChange={ ( urlValue ) => {

setAttributes( {

url: encodeURI( safeDecodeURI( urlValue ) ),

} );

} }

autoComplete="off"

type="url"

onFocus={ () => {

lastURLRef.current = url;

setIsEditingControl( true );

} }

onBlur={ () => {

// Defer the updateAttributes call to ensure entity connection isn't severed by accident.

updateAttributes(

{ url: ! url ? lastURLRef.current : url },

setAttributes,

{ ...attributes, url: lastURLRef.current }

);

setIsEditingControl( false );

} }

/>

</ToolsPanelItem>

<ToolsPanelItem

hasValue={ () => !! opensInNewTab }

label={ __( 'Open in new tab' ) }

onDeselect={ () => setAttributes( { opensInNewTab: false } ) }

isShownByDefault

>

<CheckboxControl

__nextHasNoMarginBottom

label={ __( 'Open in new tab' ) }

checked={ opensInNewTab }

onChange={ ( value ) =>

setAttributes( { opensInNewTab: value } )

}

/>

</ToolsPanelItem>

<ToolsPanelItem

hasValue={ () => !! description }

label={ __( 'Description' ) }

onDeselect={ () => setAttributes( { description: '' } ) }

isShownByDefault

>

<TextareaControl

__nextHasNoMarginBottom

label={ __( 'Description' ) }

value={ description || '' }

onChange={ ( descriptionValue ) => {

setAttributes( { description: descriptionValue } );

} }

help={ __(

'The description will be displayed in the menu if the current theme supports it.'

) }

/>

</ToolsPanelItem>

<ToolsPanelItem

hasValue={ () => !! rel }

label={ __( 'Rel attribute' ) }

onDeselect={ () => setAttributes( { rel: '' } ) }

isShownByDefault

>

<TextControl

__nextHasNoMarginBottom

__next40pxDefaultSize

label={ __( 'Rel attribute' ) }

value={ rel || '' }

onChange={ ( relValue ) => {

setAttributes( { rel: relValue } );

} }

autoComplete="off"

help={ __(

'The relationship of the linked URL as space-separated link types.'

) }

/>

</ToolsPanelItem>

</ToolsPanel>

);

export { Controls } from './controls';