@wordpress/block-library 9.36.0 → 9.36.1-next.738bb1424.0

package/src/navigation/edit/overlay-menu-preview-button.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+import OverlayMenuPreviewControls from './overlay-menu-preview-controls';
+
+/**
+ * Overlay Menu Preview Button component.
+ *
+ * @param {Object}   props                           Component props.
+ * @param {boolean}  props.isResponsive              Whether overlay menu is responsive.
+ * @param {boolean}  props.overlayMenuPreview        Whether overlay menu preview is open.
+ * @param {Function} props.setOverlayMenuPreview     Function to toggle overlay menu preview.
+ * @param {boolean}  props.hasIcon                   Whether the overlay menu has an icon.
+ * @param {string}   props.icon                      Icon type for overlay menu.
+ * @param {Function} props.setAttributes             Function to update block attributes.
+ * @param {string}   props.overlayMenuPreviewClasses CSS classes for overlay menu preview button.
+ * @param {string}   props.overlayMenuPreviewId      ID for overlay menu preview.
+ * @param {string}   props.containerStyle            Optional style for the preview container.
+ * @return {JSX.Element|null}                       The overlay menu preview button or null if not responsive.
+ */
+export default function OverlayMenuPreviewButton( {
+	isResponsive,
+	overlayMenuPreview,
+	setOverlayMenuPreview,
+	hasIcon,
+	icon,
+	setAttributes,
+	overlayMenuPreviewClasses,
+	overlayMenuPreviewId,
+	containerStyle,
+} ) {
+	if ( ! isResponsive ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button
+				__next40pxDefaultSize
+				className={ overlayMenuPreviewClasses }
+				onClick={ () => setOverlayMenuPreview( ! overlayMenuPreview ) }
+				aria-label={ __( 'Overlay menu controls' ) }
+				aria-controls={ overlayMenuPreviewId }
+				aria-expanded={ overlayMenuPreview }
+			>
+				{ hasIcon && (
+					<>
+						<OverlayMenuIcon icon={ icon } />
+						<Icon icon={ close } />
+					</>
+				) }
+				{ ! hasIcon && (
+					<>
+						<span>{ __( 'Menu' ) }</span>
+						<span>{ __( 'Close' ) }</span>
+					</>
+				) }
+			</Button>
+			{ overlayMenuPreview && (
+				<VStack
+					id={ overlayMenuPreviewId }
+					spacing={ 4 }
+					style={ containerStyle }
+				>
+					<OverlayMenuPreviewControls
+						hasIcon={ hasIcon }
+						icon={ icon }
+						setAttributes={ setAttributes }
+					/>
+				</VStack>
+			) }
+		</>
+	);
+}

package/src/navigation/edit/overlay-menu-preview-controls.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToggleControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
+/**
+ * Overlay Menu Preview Controls component.
+ * Used within PanelBody context (not ToolsPanel).
+ *
+ * @param {Object}   props               Component props.
+ * @param {boolean}  props.hasIcon       Whether the overlay menu has an icon.
+ * @param {string}   props.icon          Icon type for overlay menu.
+ * @param {Function} props.setAttributes Function to update block attributes.
+ * @return {JSX.Element}                The overlay menu preview controls.
+ */
+export default function OverlayMenuPreviewControls( {
+	hasIcon,
+	icon,
+	setAttributes,
+} ) {
+	return (
+		<VStack spacing={ 4 }>
+			<ToggleControl
+				label={ __( 'Show icon button' ) }
+				help={ __(
+					'Configure the visual appearance of the button that toggles the overlay menu.'
+				) }
+				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
+				checked={ hasIcon }
+			/>
+			<ToggleGroupControl
+				__next40pxDefaultSize
+				className="wp-block-navigation__overlay-menu-icon-toggle-group"
+				label={ __( 'Icon' ) }
+				value={ icon }
+				onChange={ ( value ) => setAttributes( { icon: value } ) }
+				isBlock
+			>
+				<ToggleGroupControlOption
+					value="handle"
+					aria-label={ __( 'handle' ) }
+					label={ <OverlayMenuIcon icon="handle" /> }
+				/>
+				<ToggleGroupControlOption
+					value="menu"
+					aria-label={ __( 'menu' ) }
+					label={ <OverlayMenuIcon icon="menu" /> }
+				/>
+			</ToggleGroupControl>
+		</VStack>
+	);
+}

package/src/navigation/edit/overlay-menu-preview.js

@@ -24,7 +24,6 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 				onDeselect={ () => setAttributes( { hasIcon: true } ) }
 			>
 				<ToggleControl
-					__nextHasNoMarginBottom
 					label={ __( 'Show icon button' ) }
 					help={ __(
 						'Configure the visual appearance of the button that toggles the overlay menu.'
@@ -44,7 +43,6 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 			>
 				<ToggleGroupControl
 					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					className="wp-block-navigation__overlay-menu-icon-toggle-group"
 					label={ __( 'Icon' ) }
 					value={ icon }

package/src/navigation/edit/overlay-panel.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import OverlayTemplatePartSelector from './overlay-template-part-selector';
+import OverlayVisibilityControl from './overlay-visibility-control';
+import OverlayMenuPreviewButton from './overlay-menu-preview-button';
+
+/**
+ * Overlay Panel component for Navigation block.
+ *
+ * @param {Object}   props                           Component props.
+ * @param {string}   props.overlayMenu               Overlay menu setting ('never', 'mobile', 'always').
+ * @param {string}   props.overlay                   Currently selected overlay template part ID.
+ * @param {Function} props.setAttributes             Function to update block attributes.
+ * @param {Function} props.onNavigateToEntityRecord  Function to navigate to template part editor.
+ * @param {boolean}  props.overlayMenuPreview        Whether overlay menu preview is open.
+ * @param {Function} props.setOverlayMenuPreview     Function to toggle overlay menu preview.
+ * @param {boolean}  props.hasIcon                   Whether the overlay menu has an icon.
+ * @param {string}   props.icon                      Icon type for overlay menu.
+ * @param {string}   props.overlayMenuPreviewClasses CSS classes for overlay menu preview button.
+ * @param {string}   props.overlayMenuPreviewId      ID for overlay menu preview.
+ * @param {boolean}  props.isResponsive              Whether overlay menu is responsive.
+ * @return {JSX.Element|null}                       The overlay panel component or null if overlay is disabled.
+ */
+export default function OverlayPanel( {
+	overlayMenu,
+	overlay,
+	setAttributes,
+	onNavigateToEntityRecord,
+	overlayMenuPreview,
+	setOverlayMenuPreview,
+	hasIcon,
+	icon,
+	overlayMenuPreviewClasses,
+	overlayMenuPreviewId,
+	isResponsive,
+} ) {
+	return (
+		<PanelBody title={ __( 'Overlay' ) } initialOpen>
+			<VStack spacing={ 4 }>
+				<OverlayVisibilityControl
+					overlayMenu={ overlayMenu }
+					setAttributes={ setAttributes }
+				/>
+
+				{ overlayMenu !== 'never' && (
+					<OverlayMenuPreviewButton
+						isResponsive={ isResponsive }
+						overlayMenuPreview={ overlayMenuPreview }
+						setOverlayMenuPreview={ setOverlayMenuPreview }
+						hasIcon={ hasIcon }
+						icon={ icon }
+						setAttributes={ setAttributes }
+						overlayMenuPreviewClasses={ overlayMenuPreviewClasses }
+						overlayMenuPreviewId={ overlayMenuPreviewId }
+					/>
+				) }
+
+				{ overlayMenu !== 'never' && (
+					<OverlayTemplatePartSelector
+						overlay={ overlay }
+						setAttributes={ setAttributes }
+						onNavigateToEntityRecord={ onNavigateToEntityRecord }
+					/>
+				) }
+			</VStack>
+		</PanelBody>
+	);
+}

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

@@ -0,0 +1,240 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import {
+	SelectControl,
+	Button,
+	FlexBlock,
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as noticesStore } from '@wordpress/notices';
+import { plus } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';
+import useCreateOverlayTemplatePart from './use-create-overlay';
+
+/**
+ * Overlay Template Part Selector component.
+ *
+ * @param {Object}   props                          Component props.
+ * @param {string}   props.overlay                  Currently selected overlay template part ID.
+ * @param {Function} props.setAttributes            Function to update block attributes.
+ * @param {Function} props.onNavigateToEntityRecord Function to navigate to template part editor.
+ * @return {JSX.Element} The overlay template part selector component.
+ */
+export default function OverlayTemplatePartSelector( {
+	overlay,
+	setAttributes,
+	onNavigateToEntityRecord,
+} ) {
+	const {
+		records: templateParts,
+		isResolving,
+		hasResolved,
+	} = useEntityRecords( 'postType', 'wp_template_part', {
+		per_page: -1,
+	} );
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	// Track if we're currently creating a new overlay
+	const [ isCreating, setIsCreating ] = useState( false );
+
+	// Filter template parts by overlay area
+	const overlayTemplateParts = useMemo( () => {
+		if ( ! templateParts ) {
+			return [];
+		}
+		return templateParts.filter(
+			( templatePart ) => templatePart.area === 'overlay'
+		);
+	}, [ templateParts ] );
+
+	// Hook to create overlay template part
+	const createOverlayTemplatePart =
+		useCreateOverlayTemplatePart( overlayTemplateParts );
+
+	// Build options for SelectControl
+	const options = useMemo( () => {
+		const baseOptions = [
+			{
+				label: __( 'None (default)' ),
+				value: '',
+			},
+		];
+
+		if ( ! hasResolved || isResolving ) {
+			return baseOptions;
+		}
+
+		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,
+				};
+			}
+		);
+
+		return [ ...baseOptions, ...templatePartOptions ];
+	}, [ overlayTemplateParts, hasResolved, isResolving ] );
+
+	// Find the selected template part to get its title
+	const selectedTemplatePart = useMemo( () => {
+		if ( ! overlay || ! overlayTemplateParts ) {
+			return null;
+		}
+		return overlayTemplateParts.find( ( templatePart ) => {
+			const templatePartId = createTemplatePartId(
+				templatePart.theme,
+				templatePart.slug
+			);
+			return templatePartId === overlay;
+		} );
+	}, [ overlay, overlayTemplateParts ] );
+
+	const handleSelectChange = ( value ) => {
+		setAttributes( {
+			overlay: value || undefined,
+		} );
+	};
+
+	const handleEditClick = () => {
+		if ( ! overlay || ! onNavigateToEntityRecord ) {
+			return;
+		}
+
+		onNavigateToEntityRecord( {
+			postId: overlay,
+			postType: 'wp_template_part',
+		} );
+	};
+
+	const handleCreateOverlay = useCallback( async () => {
+		try {
+			setIsCreating( true );
+
+			const templatePart = await createOverlayTemplatePart();
+
+			setAttributes( {
+				overlay: templatePart.id,
+			} );
+
+			// Navigate to the new overlay for editing
+			if ( onNavigateToEntityRecord ) {
+				onNavigateToEntityRecord( {
+					postId: templatePart.id,
+					postType: 'wp_template_part',
+				} );
+			}
+		} catch ( error ) {
+			// Error handling pattern matches CreateTemplatePartModalContents.
+			// See: packages/fields/src/components/create-template-part-modal/index.tsx
+			// The 'unknown_error' code check ensures generic error codes don't show
+			// potentially confusing technical messages, instead showing a user-friendly fallback.
+			const errorMessage =
+				error instanceof Error &&
+				'code' in error &&
+				error.message &&
+				error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the overlay.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			setIsCreating( false );
+		}
+	}, [
+		createOverlayTemplatePart,
+		setAttributes,
+		onNavigateToEntityRecord,
+		createErrorNotice,
+	] );
+
+	const isCreateButtonDisabled = isResolving || isCreating;
+
+	// Build help text
+	const helpText = useMemo( () => {
+		if ( overlayTemplateParts.length === 0 && hasResolved ) {
+			return __( 'No overlays found.' );
+		}
+		return __( 'Select an overlay for navigation.' );
+	}, [ overlayTemplateParts.length, hasResolved ] );
+
+	// Tooltip/aria-label text for the edit button
+	const editButtonLabel = useMemo( () => {
+		return selectedTemplatePart
+			? sprintf(
+					/* translators: %s: Overlay title. */
+					__( 'Edit overlay: %s' ),
+					selectedTemplatePart.title?.rendered
+						? decodeEntities( selectedTemplatePart.title.rendered )
+						: selectedTemplatePart.slug
+			  )
+			: __( 'Edit overlay' );
+	}, [ selectedTemplatePart ] );
+
+	return (
+		<div className="wp-block-navigation__overlay-selector">
+			<Button
+				size="small"
+				icon={ plus }
+				onClick={ handleCreateOverlay }
+				disabled={ isCreateButtonDisabled }
+				accessibleWhenDisabled
+				isBusy={ isCreating }
+				label={ __( 'Create new overlay template' ) }
+				showTooltip
+				className="wp-block-navigation__overlay-create-button"
+			/>
+			<HStack alignment="flex-start">
+				<FlexBlock>
+					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Overlay template' ) }
+						value={ overlay || '' }
+						options={ options }
+						onChange={ handleSelectChange }
+						disabled={ isResolving }
+						accessibleWhenDisabled
+						help={ helpText }
+					/>
+				</FlexBlock>
+				{ overlay && hasResolved && selectedTemplatePart && (
+					<FlexItem>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ handleEditClick }
+							disabled={ ! onNavigateToEntityRecord }
+							accessibleWhenDisabled
+							label={ editButtonLabel }
+							showTooltip
+							className="wp-block-navigation__overlay-edit-button"
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					</FlexItem>
+				) }
+			</HStack>
+		</div>
+	);
+}

package/src/navigation/edit/overlay-visibility-control.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Overlay Visibility Control component.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.overlayMenu   Overlay menu setting ('never', 'mobile', 'always').
+ * @param {Function} props.setAttributes Function to update block attributes.
+ * @return {JSX.Element}                 The overlay visibility control.
+ */
+export default function OverlayVisibilityControl( {
+	overlayMenu,
+	setAttributes,
+} ) {
+	return (
+		<ToggleGroupControl
+			__next40pxDefaultSize
+			label={ __( 'Overlay Visibility' ) }
+			aria-label={ __( 'Configure overlay visibility' ) }
+			value={ overlayMenu }
+			help={ __(
+				'Collapses the navigation options in a menu icon opening an overlay.'
+			) }
+			onChange={ ( value ) => setAttributes( { overlayMenu: value } ) }
+			isBlock
+		>
+			<ToggleGroupControlOption value="never" label={ __( 'Off' ) } />
+			<ToggleGroupControlOption value="mobile" label={ __( 'Mobile' ) } />
+			<ToggleGroupControlOption value="always" label={ __( 'Always' ) } />
+		</ToggleGroupControl>
+	);
+}

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

@@ -27,6 +27,8 @@ export default function ResponsiveWrapper( {
 	overlayTextColor,
 	hasIcon,
 	icon,
+	overlay,
+	onNavigateToEntityRecord,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -75,6 +77,19 @@ export default function ResponsiveWrapper( {
 		} ),
 	};
 
+	const handleToggleClick = () => {
+		// If an overlay template part is selected, navigate to it instead of toggling
+		if ( overlay && onNavigateToEntityRecord ) {
+			onNavigateToEntityRecord( {
+				postId: overlay,
+				postType: 'wp_template_part',
+			} );
+			return;
+		}
+		// Otherwise, use normal toggle behavior
+		onToggle( true );
+	};
+
 	return (
 		<>
 			{ ! isOpen && (
@@ -83,7 +98,7 @@ export default function ResponsiveWrapper( {
 					aria-haspopup="true"
 					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
-					onClick={ () => onToggle( true ) }
+					onClick={ handleToggleClick }
 				>
 					{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
 					{ ! hasIcon && __( 'Menu' ) }