@wordpress/block-library 9.38.0 → 9.39.0

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

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { useMemo, useState, useCallback } from '@wordpress/element';
-import { useEntityRecords } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	SelectControl,
 	Button,
@@ -21,6 +21,7 @@ import { plus } from '@wordpress/icons';
  */
 import { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';
 import useCreateOverlayTemplatePart from './use-create-overlay';
+import DeletedOverlayWarning from './deleted-overlay-warning';
 import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';
 
 /**
@@ -47,6 +48,11 @@ export default function OverlayTemplatePartSelector( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
+		[]
+	);
+
 	// Track if we're currently creating a new overlay
 	const [ isCreating, setIsCreating ] = useState( false );
 
@@ -65,6 +71,16 @@ export default function OverlayTemplatePartSelector( {
 	const createOverlayTemplatePart =
 		useCreateOverlayTemplatePart( overlayTemplateParts );
 
+	// Find the selected template part to get its title
+	const selectedTemplatePart = useMemo( () => {
+		if ( ! overlay || ! overlayTemplateParts ) {
+			return null;
+		}
+		return overlayTemplateParts.find(
+			( templatePart ) => templatePart.slug === overlay
+		);
+	}, [ overlay, overlayTemplateParts ] );
+
 	// Build options for SelectControl
 	const options = useMemo( () => {
 		const baseOptions = [
@@ -80,37 +96,37 @@ export default function OverlayTemplatePartSelector( {
 
 		const templatePartOptions = overlayTemplateParts.map(
 			( templatePart ) => {
-				const templatePartId = createTemplatePartId(
-					templatePart.theme,
-					templatePart.slug
-				);
 				const label = templatePart.title?.rendered
 					? decodeEntities( templatePart.title.rendered )
 					: templatePart.slug;
 
 				return {
 					label,
-					value: templatePartId,
+					value: templatePart.slug,
 				};
 			}
 		);
 
-		return [ ...baseOptions, ...templatePartOptions ];
-	}, [ overlayTemplateParts, hasResolved, isResolving ] );
-
-	// Find the selected template part to get its title
-	const selectedTemplatePart = useMemo( () => {
-		if ( ! overlay || ! overlayTemplateParts ) {
-			return null;
+		// If an overlay is selected but not found in the list, add it as a "missing" option
+		if ( overlay && ! selectedTemplatePart ) {
+			templatePartOptions.unshift( {
+				label: sprintf(
+					/* translators: %s: Overlay slug. */
+					__( '%s (missing)' ),
+					overlay
+				),
+				value: overlay,
+			} );
 		}
-		return overlayTemplateParts.find( ( templatePart ) => {
-			const templatePartId = createTemplatePartId(
-				templatePart.theme,
-				templatePart.slug
-			);
-			return templatePartId === overlay;
-		} );
-	}, [ overlay, overlayTemplateParts ] );
+
+		return [ ...baseOptions, ...templatePartOptions ];
+	}, [
+		overlayTemplateParts,
+		hasResolved,
+		isResolving,
+		overlay,
+		selectedTemplatePart,
+	] );
 
 	const handleSelectChange = ( value ) => {
 		setAttributes( {
@@ -119,12 +135,21 @@ export default function OverlayTemplatePartSelector( {
 	};
 
 	const handleEditClick = () => {
-		if ( ! overlay || ! onNavigateToEntityRecord ) {
+		if (
+			! overlay ||
+			! selectedTemplatePart ||
+			! onNavigateToEntityRecord
+		) {
 			return;
 		}
 
+		// Resolve the full template part ID using theme
+		// Default to current theme if not set
+		const theme = selectedTemplatePart.theme || currentTheme;
+		const templatePartId = createTemplatePartId( theme, overlay );
+
 		onNavigateToEntityRecord( {
-			postId: overlay,
+			postId: templatePartId,
 			postType: 'wp_template_part',
 		} );
 	};
@@ -136,13 +161,19 @@ export default function OverlayTemplatePartSelector( {
 			const templatePart = await createOverlayTemplatePart();
 
 			setAttributes( {
-				overlay: templatePart.id,
+				overlay: templatePart.slug,
 			} );
 
 			// Navigate to the new overlay for editing
+			// Create the full ID using theme and slug
 			if ( onNavigateToEntityRecord ) {
+				const theme = templatePart.theme || currentTheme;
+				const templatePartId = createTemplatePartId(
+					theme,
+					templatePart.slug
+				);
 				onNavigateToEntityRecord( {
-					postId: templatePart.id,
+					postId: templatePartId,
 					postType: 'wp_template_part',
 				} );
 			}
@@ -168,10 +199,22 @@ export default function OverlayTemplatePartSelector( {
 		setAttributes,
 		onNavigateToEntityRecord,
 		createErrorNotice,
+		currentTheme,
 	] );
 
+	const handleClearOverlay = useCallback( () => {
+		setAttributes( { overlay: undefined } );
+	}, [ setAttributes ] );
+
 	const isCreateButtonDisabled = isResolving || isCreating;
 
+	// Check if the selected overlay is missing (deleted)
+	const isOverlayMissing = useMemo( () => {
+		return (
+			overlay && hasResolved && ! isResolving && ! selectedTemplatePart
+		);
+	}, [ overlay, hasResolved, isResolving, selectedTemplatePart ] );
+
 	// Build help text
 	const helpText = useMemo( () => {
 		if ( overlayTemplateParts.length === 0 && hasResolved ) {
@@ -237,6 +280,13 @@ export default function OverlayTemplatePartSelector( {
 					</FlexItem>
 				) }
 			</HStack>
+			{ isOverlayMissing && (
+				<DeletedOverlayWarning
+					onClear={ handleClearOverlay }
+					onCreate={ handleCreateOverlay }
+					isCreating={ isCreating }
+				/>
+			) }
 		</div>
 	);
 }

package/src/navigation/edit/responsive-wrapper.js

@@ -10,11 +10,14 @@ import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { getColorClassName } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import OverlayMenuIcon from './overlay-menu-icon';
+import { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';
 
 export default function ResponsiveWrapper( {
 	children,
@@ -30,6 +33,11 @@ export default function ResponsiveWrapper( {
 	overlay,
 	onNavigateToEntityRecord,
 } ) {
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
+		[]
+	);
+
 	if ( ! isResponsive ) {
 		return children;
 	}
@@ -87,8 +95,13 @@ export default function ResponsiveWrapper( {
 	const handleToggleClick = () => {
 		// If an overlay template part is selected, navigate to it instead of toggling
 		if ( overlay && onNavigateToEntityRecord ) {
+			const templatePartId = createTemplatePartId(
+				currentTheme,
+				overlay
+			);
+
 			onNavigateToEntityRecord( {
-				postId: overlay,
+				postId: templatePartId,
 				postType: 'wp_template_part',
 			} );
 			return;

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

@@ -28,9 +28,10 @@ jest.mock( '../use-create-overlay', () => ( {
 	default: jest.fn(),
 } ) );
 
-// Mock useDispatch specifically to avoid needing to set up full data store
+// Mock useDispatch and useSelect specifically to avoid needing to set up full data store
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest.fn(),
+	useSelect: jest.fn(),
 	createSelector: jest.fn( ( fn ) => fn ),
 	createRegistrySelector: jest.fn( ( fn ) => fn ),
 	createReduxStore: jest.fn( () => ( {} ) ),
@@ -92,6 +93,7 @@ const allTemplateParts = [
 describe( 'OverlayTemplatePartSelector', () => {
 	const mockCreateOverlayTemplatePart = jest.fn();
 	const mockCreateErrorNotice = jest.fn();
+	const { useSelect } = require( '@wordpress/data' );
 
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -107,6 +109,9 @@ describe( 'OverlayTemplatePartSelector', () => {
 		useDispatch.mockReturnValue( {
 			createErrorNotice: mockCreateErrorNotice,
 		} );
+		// Mock useSelect to return current theme
+		// The component calls: select( coreStore ).getCurrentTheme()?.stylesheet
+		useSelect.mockReturnValue( 'twentytwentyfive' );
 	} );
 
 	describe( 'Loading state', () => {
@@ -195,7 +200,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			).toBeInTheDocument();
 		} );
 
-		it( 'should call set the overlay attribute when an overlay is selected', async () => {
+		it( 'should store slug only when an overlay is selected', async () => {
 			const user = userEvent.setup();
 
 			useEntityRecords.mockReturnValue( {
@@ -210,10 +215,10 @@ describe( 'OverlayTemplatePartSelector', () => {
 				name: 'Overlay template',
 			} );
 
-			await user.selectOptions( select, 'twentytwentyfive//my-overlay' );
+			await user.selectOptions( select, 'my-overlay' );
 
 			expect( mockSetAttributes ).toHaveBeenCalledWith( {
-				overlay: 'twentytwentyfive//my-overlay',
+				overlay: 'my-overlay',
 			} );
 		} );
 
@@ -229,7 +234,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			render(
 				<OverlayTemplatePartSelector
 					{ ...defaultProps }
-					overlay="twentytwentyfive//my-overlay"
+					overlay="my-overlay"
 				/>
 			);
 
@@ -244,7 +249,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			} );
 		} );
 
-		it( 'should display selected overlay', () => {
+		it( 'should display selected overlay by slug', () => {
 			useEntityRecords.mockReturnValue( {
 				records: [ templatePart1 ],
 				isResolving: false,
@@ -254,7 +259,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			render(
 				<OverlayTemplatePartSelector
 					{ ...defaultProps }
-					overlay="twentytwentyfive//my-overlay"
+					overlay="my-overlay"
 				/>
 			);
 
@@ -262,7 +267,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 				name: 'Overlay template',
 			} );
 
-			expect( select ).toHaveValue( 'twentytwentyfive//my-overlay' );
+			expect( select ).toHaveValue( 'my-overlay' );
 		} );
 	} );
 
@@ -293,7 +298,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			render(
 				<OverlayTemplatePartSelector
 					{ ...defaultProps }
-					overlay="twentytwentyfive//my-overlay"
+					overlay="my-overlay"
 				/>
 			);
 
@@ -322,7 +327,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			render(
 				<OverlayTemplatePartSelector
 					{ ...defaultProps }
-					overlay="twentytwentyfive//my-overlay"
+					overlay="my-overlay"
 				/>
 			);
 
@@ -345,7 +350,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			render(
 				<OverlayTemplatePartSelector
 					{ ...defaultProps }
-					overlay="twentytwentyfive//my-overlay"
+					overlay="my-overlay"
 					onNavigateToEntityRecord={ undefined }
 				/>
 			);
@@ -359,7 +364,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			expect( editButton ).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 
-		it( 'should navigate to focused overlay editor when edit button is clicked', async () => {
+		it( 'should navigate to focused overlay editor with full ID when edit button is clicked', async () => {
 			const user = userEvent.setup();
 
 			useEntityRecords.mockReturnValue( {
@@ -371,7 +376,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			render(
 				<OverlayTemplatePartSelector
 					{ ...defaultProps }
-					overlay="twentytwentyfive//my-overlay"
+					overlay="my-overlay"
 				/>
 			);
 
@@ -382,6 +387,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 
 			await user.click( editButton );
 
+			// Should construct full ID from theme and slug
 			expect( mockOnNavigateToEntityRecord ).toHaveBeenCalledWith( {
 				postId: 'twentytwentyfive//my-overlay',
 				postType: 'wp_template_part',
@@ -400,7 +406,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 			render(
 				<OverlayTemplatePartSelector
 					{ ...defaultProps }
-					overlay="twentytwentyfive//my-overlay"
+					overlay="my-overlay"
 					onNavigateToEntityRecord={ undefined }
 				/>
 			);
@@ -461,7 +467,7 @@ describe( 'OverlayTemplatePartSelector', () => {
 	} );
 
 	describe( 'Create overlay', () => {
-		it( 'should call createOverlayTemplatePart when create button is clicked', async () => {
+		it( 'should store slug only and navigate with full ID when creating overlay', async () => {
 			const user = userEvent.setup();
 			const newOverlay = {
 				id: 'twentytwentyfive//overlay',
@@ -490,9 +496,11 @@ describe( 'OverlayTemplatePartSelector', () => {
 			await user.click( createButton );
 
 			expect( mockCreateOverlayTemplatePart ).toHaveBeenCalled();
+			// Should store slug only
 			expect( mockSetAttributes ).toHaveBeenCalledWith( {
-				overlay: 'twentytwentyfive//overlay',
+				overlay: 'overlay',
 			} );
+			// Should navigate with full ID constructed from theme and slug
 			expect( mockOnNavigateToEntityRecord ).toHaveBeenCalledWith( {
 				postId: 'twentytwentyfive//overlay',
 				postType: 'wp_template_part',

package/src/navigation/edit/test/responsive-wrapper.js

@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import ResponsiveWrapper from '../responsive-wrapper';
+
+// Mock block-editor to avoid private API issues
+jest.mock( '@wordpress/block-editor', () => ( {
+	getColorClassName: jest.fn( () => '' ),
+} ) );
+
+// Mock core-data store
+jest.mock( '@wordpress/core-data', () => ( {
+	store: {},
+} ) );
+
+// Mock useSelect
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+	createSelector: jest.fn( ( fn ) => fn ),
+	createRegistrySelector: jest.fn( ( fn ) => fn ),
+	createReduxStore: jest.fn( () => ( {} ) ),
+	combineReducers: jest.fn( ( reducers ) => ( state = {}, action ) => {
+		const newState = {};
+		Object.keys( reducers ).forEach( ( key ) => {
+			newState[ key ] = reducers[ key ]( state[ key ], action );
+		} );
+		return newState;
+	} ),
+	register: jest.fn(),
+} ) );
+
+describe( 'ResponsiveWrapper', () => {
+	const mockOnToggle = jest.fn();
+	const mockOnNavigateToEntityRecord = jest.fn();
+
+	const defaultProps = {
+		id: 'test-navigation',
+		isOpen: false,
+		isResponsive: true,
+		onToggle: mockOnToggle,
+		isHiddenByDefault: false,
+		overlayBackgroundColor: {},
+		overlayTextColor: {},
+		hasIcon: false,
+		icon: null,
+		overlay: undefined,
+		onNavigateToEntityRecord: undefined,
+		children: <div>Navigation content</div>,
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		// Mock useSelect - component calls: select( coreStore ).getCurrentTheme()?.stylesheet
+		useSelect.mockImplementation( ( selector ) => {
+			if ( typeof selector === 'function' ) {
+				const mockSelect = () => ( {
+					getCurrentTheme: () => ( {
+						stylesheet: 'twentytwentyfive',
+					} ),
+				} );
+				return selector( mockSelect );
+			}
+			return 'twentytwentyfive';
+		} );
+	} );
+
+	describe( 'Overlay navigation', () => {
+		it( 'should navigate to custom overlay template part when custom overlay slug is provided', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<ResponsiveWrapper
+					{ ...defaultProps }
+					overlay="my-overlay"
+					onNavigateToEntityRecord={ mockOnNavigateToEntityRecord }
+				/>
+			);
+
+			const openButton = screen.getByRole( 'button', {
+				name: 'Menu',
+			} );
+
+			await user.click( openButton );
+
+			// Should construct full ID from current theme and slug
+			expect( mockOnNavigateToEntityRecord ).toHaveBeenCalledWith( {
+				postId: 'twentytwentyfive//my-overlay',
+				postType: 'wp_template_part',
+			} );
+			// Should not open default overlay when custom overlay is present
+			expect( mockOnToggle ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should open the default overlay when no custom overlay is provided', async () => {
+			const user = userEvent.setup();
+
+			render( <ResponsiveWrapper { ...defaultProps } /> );
+
+			const openButton = screen.getByRole( 'button', {
+				name: 'Menu',
+			} );
+
+			await user.click( openButton );
+
+			// Should open the default overlay when no custom overlay
+			expect( mockOnToggle ).toHaveBeenCalledWith( true );
+			expect( mockOnNavigateToEntityRecord ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should open the default overlay when custom overlay is provided but navigation is not available', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<ResponsiveWrapper
+					{ ...defaultProps }
+					overlay="my-overlay"
+					onNavigateToEntityRecord={ undefined }
+				/>
+			);
+
+			const openButton = screen.getByRole( 'button', {
+				name: 'Menu',
+			} );
+
+			await user.click( openButton );
+
+			expect( mockOnToggle ).toHaveBeenCalledWith( true );
+			expect( mockOnNavigateToEntityRecord ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should construct template part ID using current theme from useSelect', async () => {
+			const user = userEvent.setup();
+
+			// Mock different theme
+			useSelect.mockImplementation( ( selector ) => {
+				if ( typeof selector === 'function' ) {
+					const mockSelect = () => ( {
+						getCurrentTheme: () => ( {
+							stylesheet: 'custom-theme',
+						} ),
+					} );
+					return selector( mockSelect );
+				}
+				return 'custom-theme';
+			} );
+
+			render(
+				<ResponsiveWrapper
+					{ ...defaultProps }
+					overlay="my-overlay"
+					onNavigateToEntityRecord={ mockOnNavigateToEntityRecord }
+				/>
+			);
+
+			const openButton = screen.getByRole( 'button', {
+				name: 'Menu',
+			} );
+
+			await user.click( openButton );
+
+			// Should use the current theme from useSelect
+			expect( mockOnNavigateToEntityRecord ).toHaveBeenCalledWith( {
+				postId: 'custom-theme//my-overlay',
+				postType: 'wp_template_part',
+			} );
+		} );
+	} );
+} );