@wordpress/block-library 9.36.1-next.8b30e05b0.0 → 9.37.0

package/src/navigation/edit/test/overlay-template-part-selector.js

@@ -0,0 +1,461 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import OverlayTemplatePartSelector from '../overlay-template-part-selector';
+
+// Mock useEntityRecords
+jest.mock( '@wordpress/core-data', () => {
+	const actual = jest.requireActual( '@wordpress/core-data' );
+	return {
+		...actual,
+		useEntityRecords: jest.fn(),
+	};
+} );
+
+const mockSetAttributes = jest.fn();
+const mockOnNavigateToEntityRecord = jest.fn();
+
+const defaultProps = {
+	overlay: undefined,
+	setAttributes: mockSetAttributes,
+	onNavigateToEntityRecord: mockOnNavigateToEntityRecord,
+};
+
+const templatePart1 = {
+	id: 1,
+	theme: 'twentytwentyfive',
+	slug: 'my-overlay',
+	title: {
+		rendered: 'My Overlay',
+	},
+	area: 'overlay',
+};
+
+const templatePart2 = {
+	id: 2,
+	theme: 'twentytwentyfive',
+	slug: 'another-overlay',
+	title: {
+		rendered: 'Another Overlay',
+	},
+	area: 'overlay',
+};
+
+const templatePartOtherArea = {
+	id: 3,
+	theme: 'twentytwentyfive',
+	slug: 'header-part',
+	title: {
+		rendered: 'Header Part',
+	},
+	area: 'header',
+};
+
+const allTemplateParts = [
+	templatePart1,
+	templatePart2,
+	templatePartOtherArea,
+];
+
+describe( 'OverlayTemplatePartSelector', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		useEntityRecords.mockReturnValue( {
+			records: [],
+			isResolving: false,
+			hasResolved: false,
+		} );
+	} );
+
+	describe( 'Loading state', () => {
+		it( 'should show loading spinner when template parts are resolving', () => {
+			useEntityRecords.mockReturnValue( {
+				records: null,
+				isResolving: true,
+				hasResolved: false,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			expect(
+				screen.getByText( 'Loading overlays…' )
+			).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Template part selection', () => {
+		it( 'should show selector with "None (default)" option when no template parts are available', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			const select = screen.getByRole( 'combobox', {
+				name: 'Overlay template',
+			} );
+			expect( select ).toBeInTheDocument();
+			expect( select ).toHaveValue( '' );
+
+			// Check for "None (default)" option
+			expect(
+				screen.getByRole( 'option', { name: 'None (default)' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should filter template parts by overlay area', () => {
+			useEntityRecords.mockReturnValue( {
+				records: allTemplateParts,
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			screen.getByRole( 'combobox', {
+				name: 'Overlay template',
+			} );
+
+			// Should have None + 2 overlays (not the header one)
+			const options = screen.getAllByRole( 'option' );
+			expect( options ).toHaveLength( 3 ); // None + 2 overlay parts
+
+			expect(
+				screen.getByRole( 'option', { name: 'My Overlay' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'option', { name: 'Another Overlay' } )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'option', { name: 'Header Part' } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should display template part slug when title is missing', () => {
+			const templatePartNoTitle = {
+				...templatePart1,
+				title: null,
+			};
+
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePartNoTitle ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			expect(
+				screen.getByRole( 'option', { name: 'my-overlay' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should call setAttributes when a template part is selected', async () => {
+			const user = userEvent.setup();
+
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			const select = screen.getByRole( 'combobox', {
+				name: 'Overlay template',
+			} );
+
+			await user.selectOptions( select, 'twentytwentyfive//my-overlay' );
+
+			expect( mockSetAttributes ).toHaveBeenCalledWith( {
+				overlay: 'twentytwentyfive//my-overlay',
+			} );
+		} );
+
+		it( 'should call setAttributes with undefined when "None (default)" is selected', async () => {
+			const user = userEvent.setup();
+
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+				/>
+			);
+
+			const select = screen.getByRole( 'combobox', {
+				name: 'Overlay template',
+			} );
+
+			await user.selectOptions( select, '' );
+
+			expect( mockSetAttributes ).toHaveBeenCalledWith( {
+				overlay: undefined,
+			} );
+		} );
+
+		it( 'should display selected template part', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+				/>
+			);
+
+			const select = screen.getByRole( 'combobox', {
+				name: 'Overlay template',
+			} );
+
+			expect( select ).toHaveValue( 'twentytwentyfive//my-overlay' );
+		} );
+	} );
+
+	describe( 'Edit button', () => {
+		it( 'should not render when no template part is selected', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			const editButton = screen.queryByRole( 'button', {
+				name: 'Edit overlay',
+			} );
+
+			expect( editButton ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not render button when template parts are initially loading', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: true,
+				hasResolved: false,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+				/>
+			);
+
+			// Component shows spinner when initially loading, button doesn't render
+			expect(
+				screen.getByText( 'Loading overlays…' )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', {
+					name: /Edit overlay/,
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should be enabled when a valid template part is selected', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+				/>
+			);
+
+			const editButton = screen.getByRole( 'button', {
+				name: ( accessibleName ) =>
+					accessibleName.startsWith( 'Edit overlay' ),
+			} );
+
+			expect( editButton ).toBeEnabled();
+		} );
+
+		it( 'should be disabled when onNavigateToEntityRecord is not available', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+					onNavigateToEntityRecord={ undefined }
+				/>
+			);
+
+			const editButton = screen.getByRole( 'button', {
+				name: ( accessibleName ) =>
+					accessibleName.startsWith( 'Edit overlay' ),
+			} );
+
+			// Button uses accessibleWhenDisabled, so it has aria-disabled instead of disabled
+			expect( editButton ).toHaveAttribute( 'aria-disabled', 'true' );
+		} );
+
+		it( 'should call onNavigateToEntityRecord when edit button is clicked', async () => {
+			const user = userEvent.setup();
+
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+				/>
+			);
+
+			const editButton = screen.getByRole( 'button', {
+				name: ( accessibleName ) =>
+					accessibleName.startsWith( 'Edit overlay' ),
+			} );
+
+			await user.click( editButton );
+
+			expect( mockOnNavigateToEntityRecord ).toHaveBeenCalledWith( {
+				postId: 'twentytwentyfive//my-overlay',
+				postType: 'wp_template_part',
+			} );
+		} );
+
+		it( 'should not call onNavigateToEntityRecord when button is disabled', async () => {
+			const user = userEvent.setup();
+
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+					onNavigateToEntityRecord={ undefined }
+				/>
+			);
+
+			const editButton = screen.getByRole( 'button', {
+				name: ( accessibleName ) =>
+					accessibleName.startsWith( 'Edit overlay' ),
+			} );
+
+			// Button uses accessibleWhenDisabled, so it has aria-disabled instead of disabled
+			expect( editButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+			// Even if clicked, the handler checks for onNavigateToEntityRecord and won't call it
+			await user.click( editButton );
+
+			expect( mockOnNavigateToEntityRecord ).not.toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'Help text', () => {
+		it( 'should show help text when no overlays are available', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			expect(
+				screen.getByText( 'No overlays found.' )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should show default help text when overlays are available', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			expect(
+				screen.getByText(
+					'Select an overlay to use for the navigation.'
+				)
+			).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Accessibility', () => {
+		it( 'should have proper ARIA labels on edit button', () => {
+			useEntityRecords.mockReturnValue( {
+				records: [ templatePart1 ],
+				isResolving: false,
+				hasResolved: true,
+			} );
+
+			render(
+				<OverlayTemplatePartSelector
+					{ ...defaultProps }
+					overlay="twentytwentyfive//my-overlay"
+				/>
+			);
+
+			const editButton = screen.getByRole( 'button', {
+				name: ( accessibleName ) =>
+					accessibleName.startsWith( 'Edit overlay' ),
+			} );
+
+			expect( editButton ).toHaveAccessibleName();
+		} );
+
+		it( 'should show loading spinner instead of select control when initially loading', () => {
+			useEntityRecords.mockReturnValue( {
+				records: null,
+				isResolving: true,
+				hasResolved: false,
+			} );
+
+			render( <OverlayTemplatePartSelector { ...defaultProps } /> );
+
+			// Should show loading spinner, not the select control
+			expect(
+				screen.getByText( 'Loading overlays…' )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'combobox', {
+					name: 'Overlay template',
+				} )
+			).not.toBeInTheDocument();
+		} );
+	} );
+} );

package/src/navigation/editor.scss

@@ -649,3 +649,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-navigation__submenu-accessibility-notice {
 	grid-column: span 2;
 }
+
+.wp-block-navigation__overlay-edit-button {
+	margin-top: $grid-unit-10;
+	width: fit-content;
+}

package/src/navigation-link/edit.js

@@ -39,9 +39,9 @@ import { getColors } from '../navigation/edit/utils';
 import {
 	Controls,
 	LinkUI,
-	updateAttributes,
 	useEntityBinding,
 	MissingEntityHelpText,
+	useHandleLinkChange,
 } from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
@@ -279,16 +279,17 @@ export default function NavigationLinkEdit( {
 	const { getBlocks } = useSelect( blockEditorStore );
 
 	// URL binding logic
-	const {
-		clearBinding,
-		createBinding,
-		hasUrlBinding,
-		isBoundEntityAvailable,
-	} = useEntityBinding( {
+	const { hasUrlBinding, isBoundEntityAvailable } = useEntityBinding( {
 		clientId,
 		attributes,
 	} );
 
+	const handleLinkChange = useHandleLinkChange( {
+		clientId,
+		attributes,
+		setAttributes,
+	} );
+
 	const [ isInvalid, isDraft ] = useIsInvalidLink(
 		kind,
 		type,
@@ -642,25 +643,7 @@ export default function NavigationLinkEdit( {
 							} }
 							anchor={ popoverAnchor }
 							onRemove={ removeLink }
-							onChange={ ( updatedValue ) => {
-								const {
-									isEntityLink,
-									attributes: updatedAttributes,
-								} = updateAttributes(
-									updatedValue,
-									setAttributes,
-									attributes
-								);
-
-								// Handle URL binding based on the final computed state
-								// Only create bindings for entity links (posts, pages, taxonomies)
-								// Never create bindings for custom links (manual URLs)
-								if ( isEntityLink ) {
-									createBinding( updatedAttributes );
-								} else {
-									clearBinding();
-								}
-							} }
+							onChange={ handleLinkChange }
 						/>
 					) }
 				</a>

package/src/navigation-link/index.js

@@ -93,7 +93,7 @@ export const settings = {
 	transforms,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
+if ( window.__experimentalContentOnlyInspectorFields ) {
 	settings[ fieldsKey ] = [
 		{
 			id: 'label',

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

@@ -12,3 +12,4 @@ export {
 	buildNavigationLinkEntityBinding,
 } from './use-entity-binding';
 export { LinkUI } from '../link-ui';
+export { useHandleLinkChange } from './use-handle-link-change';