@wordpress/block-library 9.31.1-next.233ccab9b.0 → 9.32.0

package/src/navigation-link/shared/README.md

@@ -0,0 +1,47 @@
+# Navigation Blocks Shared Components
+
+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.
+
+## Purpose
+
+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
+
+## Current Shared Components
+
+-   **`Controls`** - Inspector controls component providing the ToolsPanel interface for both blocks
+
+## Future Direction
+
+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
+
+## Testing
+
+All shared components include comprehensive tests in the `test/` directory. The tests use pure mocking strategies to ensure isolated, reliable testing of component behavior.
+
+## Contributing
+
+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

package/src/navigation-link/shared/controls.js

@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+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';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import { updateAttributes } from '../update-attributes';
+
+/**
+ * Shared Controls component for Navigation Link and Navigation Submenu blocks.
+ *
+ * This component provides the inspector controls (ToolsPanel) that are identical
+ * between both navigation blocks.
+ *
+ * @param {Object}   props                     - Component props
+ * @param {Object}   props.attributes          - Block attributes
+ * @param {Function} props.setAttributes       - Function to update block attributes
+ * @param {Function} props.setIsEditingControl - Function to set editing state (optional)
+ */
+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>
+	);
+}

package/src/navigation-link/shared/index.js

@@ -0,0 +1,8 @@
+/**
+ * Shared components for Navigation Link and Navigation Submenu blocks.
+ *
+ * This module provides common functionality that can be used by both blocks
+ * to reduce code duplication and ensure consistent behavior.
+ */
+
+export { Controls } from './controls';

package/src/navigation-link/shared/test/controls.js

@@ -0,0 +1,210 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Controls } from '../controls';
+
+// Mock the updateAttributes function
+let mockUpdateAttributes;
+jest.mock( '../../update-attributes', () => ( {
+	updateAttributes: ( ...args ) => mockUpdateAttributes( ...args ),
+} ) );
+
+// Mock the useToolsPanelDropdownMenuProps hook
+jest.mock( '../../../utils/hooks', () => ( {
+	useToolsPanelDropdownMenuProps: () => ( {} ),
+} ) );
+
+describe( 'Controls', () => {
+	// Initialize the mock function
+	beforeAll( () => {
+		mockUpdateAttributes = jest.fn();
+	} );
+
+	const defaultProps = {
+		attributes: {
+			label: 'Test Link',
+			url: 'https://example.com',
+			description: 'Test description',
+			rel: 'nofollow',
+			opensInNewTab: false,
+		},
+		setAttributes: jest.fn(),
+		setIsEditingControl: jest.fn(),
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockUpdateAttributes.mockClear();
+	} );
+
+	it( 'renders all form controls', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( 'Text' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Link' ) ).toBeInTheDocument();
+		expect(
+			screen.getByLabelText( 'Open in new tab' )
+		).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Description' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Rel attribute' ) ).toBeInTheDocument();
+	} );
+
+	it( 'strips HTML from label values', () => {
+		const propsWithHtml = {
+			...defaultProps,
+			attributes: {
+				...defaultProps.attributes,
+				label: '<strong>Bold Text</strong>',
+			},
+		};
+		render( <Controls { ...propsWithHtml } /> );
+
+		const textInput = screen.getByLabelText( 'Text' );
+		expect( textInput.value ).toBe( 'Bold Text' );
+	} );
+
+	it( 'decodes URL values for display', () => {
+		const propsWithEncodedUrl = {
+			...defaultProps,
+			attributes: {
+				...defaultProps.attributes,
+				url: 'https://example.com/test%20page',
+			},
+		};
+		render( <Controls { ...propsWithEncodedUrl } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+		expect( urlInput.value ).toBe( 'https://example.com/test page' );
+	} );
+
+	it( 'encodes URL values when changed', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		fireEvent.change( urlInput, {
+			target: { value: 'https://example.com/test page' },
+		} );
+
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			url: 'https://example.com/test%20page',
+		} );
+	} );
+
+	it( 'calls updateAttributes on URL blur', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		fireEvent.focus( urlInput );
+		fireEvent.blur( urlInput );
+
+		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
+			{ url: 'https://example.com' },
+			defaultProps.setAttributes,
+			{ ...defaultProps.attributes, url: 'https://example.com' }
+		);
+	} );
+
+	it( 'stores last URL value on focus and uses it in updateAttributes', () => {
+		const propsWithDifferentUrl = {
+			...defaultProps,
+			attributes: {
+				...defaultProps.attributes,
+				url: 'https://different.com',
+			},
+		};
+		render( <Controls { ...propsWithDifferentUrl } /> );
+
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		fireEvent.focus( urlInput );
+
+		// Change the URL
+		fireEvent.change( urlInput, {
+			target: { value: 'https://new.com' },
+		} );
+
+		// Blur should call updateAttributes with the current URL (since url exists)
+		fireEvent.blur( urlInput );
+
+		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
+			{ url: 'https://different.com' }, // Current URL from attributes (not input value)
+			defaultProps.setAttributes,
+			{
+				...propsWithDifferentUrl.attributes,
+				url: 'https://different.com',
+			} // lastURLRef.current
+		);
+	} );
+
+	it( 'calls setIsEditingControl on focus and blur for all inputs', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		const textInput = screen.getByLabelText( 'Text' );
+		const urlInput = screen.getByLabelText( 'Link' );
+
+		// Test text input
+		fireEvent.focus( textInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith( true );
+
+		fireEvent.blur( textInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith(
+			false
+		);
+
+		// Test URL input
+		fireEvent.focus( urlInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith( true );
+
+		fireEvent.blur( urlInput );
+		expect( defaultProps.setIsEditingControl ).toHaveBeenCalledWith(
+			false
+		);
+	} );
+
+	it( 'handles all form field changes correctly', () => {
+		render( <Controls { ...defaultProps } /> );
+
+		// Test text change
+		const textInput = screen.getByLabelText( 'Text' );
+		fireEvent.change( textInput, { target: { value: 'New Label' } } );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			label: 'New Label',
+		} );
+
+		// Test description change
+		const descriptionInput = screen.getByLabelText( 'Description' );
+		fireEvent.change( descriptionInput, {
+			target: { value: 'New Description' },
+		} );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			description: 'New Description',
+		} );
+
+		// Test rel change
+		const relInput = screen.getByLabelText( 'Rel attribute' );
+		fireEvent.change( relInput, {
+			target: { value: 'nofollow noopener' },
+		} );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			rel: 'nofollow noopener',
+		} );
+
+		// Test checkbox change
+		const checkbox = screen.getByLabelText( 'Open in new tab' );
+		fireEvent.click( checkbox );
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			opensInNewTab: true,
+		} );
+	} );
+} );

package/src/navigation-submenu/edit.js

@@ -7,15 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	CheckboxControl,
-	TextControl,
-	TextareaControl,
-	ToolbarButton,
-	ToolbarGroup,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import {
@@ -41,11 +33,11 @@ import { useMergeRefs, usePrevious } from '@wordpress/compose';
 import { ItemSubmenuIcon } from './icons';
 import { LinkUI } from '../navigation-link/link-ui';
 import { updateAttributes } from '../navigation-link/update-attributes';
+import { Controls } from '../navigation-link/shared';
 import {
 	getColors,
 	getNavigationChildBlockProps,
 } from '../navigation/edit/utils';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { DEFAULT_BLOCK } from '../navigation/constants';
 
 const ALLOWED_BLOCKS = [
@@ -132,7 +124,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, url, description, rel, opensInNewTab } = attributes;
+	const { label, url, description } = attributes;
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
@@ -151,7 +143,6 @@ export default function NavigationSubmenuEdit( {
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add text…' );
 	const ref = useRef();
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const {
 		parentCount,
@@ -380,120 +371,11 @@ export default function NavigationSubmenuEdit( {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
-			{ /* Warning, this duplicated in packages/block-library/src/navigation-link/edit.js */ }
 			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						setAttributes( {
-							label: '',
-							url: '',
-							description: '',
-							rel: '',
-							opensInNewTab: false,
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<ToolsPanelItem
-						label={ __( 'Text' ) }
-						isShownByDefault
-						hasValue={ () => !! label }
-						onDeselect={ () => setAttributes( { label: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ label || '' }
-							onChange={ ( labelValue ) => {
-								setAttributes( { label: labelValue } );
-							} }
-							label={ __( 'Text' ) }
-							autoComplete="off"
-						/>
-					</ToolsPanelItem>
-
-					<ToolsPanelItem
-						label={ __( 'Link' ) }
-						isShownByDefault
-						hasValue={ () => !! url }
-						onDeselect={ () => setAttributes( { url: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ url || '' }
-							onChange={ ( urlValue ) => {
-								setAttributes( { url: urlValue } );
-							} }
-							label={ __( 'Link' ) }
-							autoComplete="off"
-							type="url"
-						/>
-					</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
-						label={ __( 'Description' ) }
-						isShownByDefault
-						hasValue={ () => !! description }
-						onDeselect={ () =>
-							setAttributes( { description: '' } )
-						}
-					>
-						<TextareaControl
-							__nextHasNoMarginBottom
-							value={ description || '' }
-							onChange={ ( descriptionValue ) => {
-								setAttributes( {
-									description: descriptionValue,
-								} );
-							} }
-							label={ __( 'Description' ) }
-							help={ __(
-								'The description will be displayed in the menu if the current theme supports it.'
-							) }
-						/>
-					</ToolsPanelItem>
-
-					<ToolsPanelItem
-						label={ __( 'Rel attribute' ) }
-						isShownByDefault
-						hasValue={ () => !! rel }
-						onDeselect={ () => setAttributes( { rel: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ rel || '' }
-							onChange={ ( relValue ) => {
-								setAttributes( { rel: relValue } );
-							} }
-							label={ __( 'Rel attribute' ) }
-							autoComplete="off"
-							help={ __(
-								'The relationship of the linked URL as space-separated link types.'
-							) }
-						/>
-					</ToolsPanelItem>
-				</ToolsPanel>
+				<Controls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }

package/src/pattern/block.json

@@ -9,6 +9,7 @@
 		"html": false,
 		"inserter": false,
 		"renaming": false,
+		"blockVisibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/post-time-to-read/block.json

@@ -16,13 +16,9 @@
 			"type": "boolean",
 			"default": true
 		},
-		"showTimeToRead": {
-			"type": "boolean",
-			"default": true
-		},
-		"showWordCount": {
-			"type": "boolean",
-			"default": false
+		"displayMode": {
+			"type": "string",
+			"default": "time"
 		},
 		"averageReadingSpeed": {
 			"type": "number",