@wordpress/block-library 9.38.0 → 9.39.0

package/src/navigation/edit/test/use-create-overlay.js

@@ -6,16 +6,17 @@ import { renderHook, act } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import useCreateOverlayTemplatePart from '../use-create-overlay';
 
-// Mock useDispatch
+// Mock useDispatch and useSelect
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest.fn(),
+	useSelect: jest.fn(),
 } ) );
 
 // Mock coreStore
@@ -23,9 +24,27 @@ jest.mock( '@wordpress/core-data', () => ( {
 	store: {},
 } ) );
 
+// Mock blockEditorStore
+jest.mock( '@wordpress/block-editor', () => ( {
+	store: {},
+} ) );
+
 // Mock @wordpress/blocks
 jest.mock( '@wordpress/blocks', () => ( {
 	serialize: jest.fn( ( blocks ) => JSON.stringify( blocks ) ),
+	parse: jest.fn( ( content ) => {
+		// Return mock blocks when parsing pattern content
+		if ( content && typeof content === 'string' ) {
+			return [
+				{
+					name: 'core/group',
+					attributes: {},
+					innerBlocks: [],
+				},
+			];
+		}
+		return [];
+	} ),
 	createBlock: jest.fn( ( name ) => ( {
 		name,
 		attributes: {},
@@ -33,14 +52,42 @@ jest.mock( '@wordpress/blocks', () => ( {
 	} ) ),
 } ) );
 
+// Mock lock-unlock
+const mockUnlock = jest.fn();
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: ( select ) => mockUnlock( select ),
+} ) );
+
 describe( 'useCreateOverlayTemplatePart', () => {
 	const mockSaveEntityRecord = jest.fn();
+	const mockGetPatternBySlug = jest.fn();
 
 	beforeEach( () => {
 		jest.clearAllMocks();
 		useDispatch.mockReturnValue( {
 			saveEntityRecord: mockSaveEntityRecord,
 		} );
+
+		mockUnlock.mockReturnValue( {
+			getPatternBySlug: mockGetPatternBySlug,
+		} );
+
+		useSelect.mockImplementation( ( selector ) => {
+			const mockSelect = jest.fn( ( store ) => {
+				if ( store === require( '@wordpress/block-editor' ).store ) {
+					return {}; // Return mock block editor store
+				}
+				return {};
+			} );
+			return selector( mockSelect );
+		} );
+
+		mockGetPatternBySlug.mockReturnValue( {
+			name: 'gutenberg/navigation-overlay',
+			title: 'Navigation Overlay',
+			content:
+				'<!-- wp:group --><div class="wp-block-group"><!-- wp:navigation-overlay-close /--><!-- wp:navigation /--></div><!-- /wp:group -->',
+		} );
 	} );
 
 	it( 'should save a new overlay with correct parameters when no overlays exist', async () => {
@@ -125,6 +172,86 @@ describe( 'useCreateOverlayTemplatePart', () => {
 		);
 	} );
 
+	it( 'should use pattern content when pattern is found', async () => {
+		const overlayTemplateParts = [];
+		const createdOverlay = {
+			id: 'twentytwentyfive//overlay',
+			theme: 'twentytwentyfive',
+			slug: 'overlay',
+			title: {
+				rendered: 'Overlay',
+			},
+			area: 'navigation-overlay',
+		};
+
+		mockSaveEntityRecord.mockResolvedValue( createdOverlay );
+
+		// Import mocked functions
+		const blocksModule = require( '@wordpress/blocks' );
+		const { parse, serialize } = blocksModule;
+
+		const { result: createOverlayTemplatePart } = renderHook( () =>
+			useCreateOverlayTemplatePart( overlayTemplateParts )
+		);
+
+		await act( async () => {
+			await createOverlayTemplatePart.current();
+		} );
+
+		expect( mockGetPatternBySlug ).toHaveBeenCalledWith(
+			'gutenberg/navigation-overlay'
+		);
+
+		expect( parse ).toHaveBeenCalledWith( mockGetPatternBySlug().content, {
+			__unstableSkipMigrationLogs: true,
+		} );
+
+		expect( serialize ).toHaveBeenCalled();
+	} );
+
+	it( 'should use empty paragraph when pattern is not found', async () => {
+		const overlayTemplateParts = [];
+		const createdOverlay = {
+			id: 'twentytwentyfive//overlay',
+			theme: 'twentytwentyfive',
+			slug: 'overlay',
+			title: {
+				rendered: 'Overlay',
+			},
+			area: 'navigation-overlay',
+		};
+
+		mockSaveEntityRecord.mockResolvedValue( createdOverlay );
+		mockGetPatternBySlug.mockReturnValue( null );
+
+		// Import mocked functions
+		const blocksModule = require( '@wordpress/blocks' );
+		const { createBlock, serialize } = blocksModule;
+
+		const { result: createOverlayTemplatePart } = renderHook( () =>
+			useCreateOverlayTemplatePart( overlayTemplateParts )
+		);
+
+		await act( async () => {
+			await createOverlayTemplatePart.current();
+		} );
+
+		expect( createBlock ).toHaveBeenCalledWith( 'core/paragraph' );
+
+		expect( serialize ).toHaveBeenCalledWith( [
+			expect.objectContaining( { name: 'core/paragraph' } ),
+		] );
+
+		expect( mockSaveEntityRecord ).toHaveBeenCalledWith(
+			'postType',
+			'wp_template_part',
+			expect.objectContaining( {
+				content: expect.any( String ),
+			} ),
+			{ throwOnError: true }
+		);
+	} );
+
 	it( 'should throw errors when save fails', async () => {
 		const overlayTemplateParts = [];
 		const error = new Error( 'Failed to save' );

package/src/navigation/edit/use-create-overlay.js

@@ -2,16 +2,18 @@
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { serialize, createBlock } from '@wordpress/blocks';
+import { parse, serialize, createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from './utils';
 import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Hook to create a new overlay template part.
@@ -22,6 +24,13 @@ import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';
  */
 export default function useCreateOverlayTemplatePart( overlayTemplateParts ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const pattern = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getPatternBySlug(
+				'gutenberg/navigation-overlay'
+			),
+		[]
+	);
 
 	const createOverlayTemplatePart = useCallback( async () => {
 		// Generate unique name using only overlay area template parts
@@ -35,6 +44,19 @@ export default function useCreateOverlayTemplatePart( overlayTemplateParts ) {
 		);
 		const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
 
+		let initialContent = '';
+
+		if ( pattern?.content ) {
+			// Parse the pattern content into blocks and serialize it
+			const blocks = parse( pattern.content, {
+				__unstableSkipMigrationLogs: true,
+			} );
+			initialContent = serialize( blocks );
+		} else {
+			// Fallback to empty paragraph if pattern is not found
+			initialContent = serialize( [ createBlock( 'core/paragraph' ) ] );
+		}
+
 		// Create the template part
 		const templatePart = await saveEntityRecord(
 			'postType',
@@ -42,14 +64,14 @@ export default function useCreateOverlayTemplatePart( overlayTemplateParts ) {
 			{
 				slug: cleanSlug,
 				title: uniqueTitle,
-				content: serialize( [ createBlock( 'core/paragraph' ) ] ),
+				content: initialContent,
 				area: NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
 			},
 			{ throwOnError: true }
 		);
 
 		return templatePart;
-	}, [ overlayTemplateParts, saveEntityRecord ] );
+	}, [ overlayTemplateParts, saveEntityRecord, pattern ] );
 
 	return createOverlayTemplatePart;
 }

package/src/navigation/editor.scss

@@ -669,3 +669,54 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	right: 0;
 	z-index: 1;
 }
+
+// Overlay Preview styles
+.wp-block-navigation__overlay-preview {
+	margin-top: $grid-unit-20;
+	border: 1px solid $gray-300;
+	border-radius: 2px;
+	overflow-y: auto;
+	max-height: 200px;
+	background: $white;
+}
+
+.wp-block-navigation__overlay-preview-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 200px;
+	background: $gray-100;
+}
+
+.wp-block-navigation__overlay-preview-empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 200px;
+	padding: $grid-unit-20;
+	text-align: center;
+	color: $gray-700;
+	background: $gray-100;
+	font-style: italic;
+}
+
+.wp-block-navigation__overlay-preview-placeholder {
+	width: 100%;
+	height: 200px;
+	background: $gray-100;
+	animation: wp-block-navigation-overlay-preview-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes wp-block-navigation-overlay-preview-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+.wp-block-navigation__deleted-overlay-warning {
+	margin-top: $grid-unit-15;
+}

package/src/navigation/index.php

@@ -5,6 +5,37 @@
  * @package WordPress
  */
 
+/**
+ * Returns the submenu visibility value with backward compatibility
+ * for the deprecated openSubmenusOnClick attribute.
+ *
+ * NOTE: Keep this function in sync with getSubmenuVisibility in
+ * packages/block-library/src/navigation/utils/get-submenu-visibility.js
+ *
+ * This function centralizes the migration logic from the boolean
+ * openSubmenusOnClick to the new submenuVisibility enum.
+ *
+ * @since 6.9.0
+ *
+ * @param array $attributes Block attributes containing submenuVisibility and/or openSubmenusOnClick.
+ * @return string The visibility mode: 'hover', 'click', or 'always'.
+ */
+function block_core_navigation_get_submenu_visibility( $attributes ) {
+	$submenu_visibility     = isset( $attributes['submenuVisibility'] ) ? $attributes['submenuVisibility'] : null;
+	$open_submenus_on_click = isset( $attributes['openSubmenusOnClick'] ) ? $attributes['openSubmenusOnClick'] : null;
+
+	// If new attribute is set, use it.
+	if ( null !== $submenu_visibility ) {
+		return $submenu_visibility;
+	}
+
+	// Fall back to old attribute for backward compatibility.
+	// openSubmenusOnClick: true  -> 'click'
+	// openSubmenusOnClick: false -> 'hover'
+	// openSubmenusOnClick: null  -> 'hover' (default)
+	return ! empty( $open_submenus_on_click ) ? 'click' : 'hover';
+}
+
 /**
  * Helper functions used to render the navigation block.
  *
@@ -119,9 +150,12 @@ class WP_Navigation_Block_Renderer {
 	 * @return bool Returns whether or not to load the view script.
 	 */
 	private static function is_interactive( $attributes, $inner_blocks ) {
-		$has_submenus       = static::has_submenus( $inner_blocks );
-		$is_responsive_menu = static::is_responsive( $attributes );
-		return ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu;
+		$has_submenus        = static::has_submenus( $inner_blocks );
+		$is_responsive_menu  = static::is_responsive( $attributes );
+		$computed_visibility = block_core_navigation_get_submenu_visibility( $attributes );
+		$open_on_click       = 'click' === $computed_visibility;
+		$show_submenu_icon   = ! empty( $attributes['showSubmenuIcon'] );
+		return ( $has_submenus && ( $open_on_click || $show_submenu_icon ) ) || $is_responsive_menu;
 	}
 
 	/**
@@ -354,14 +388,18 @@ class WP_Navigation_Block_Renderer {
 		}
 
 		// Parse the template part ID (format: "theme//slug").
+		// If it's just a slug, construct the full ID using the current theme.
 		$parts = explode( '//', $overlay_template_part_id, 2 );
-		if ( count( $parts ) !== 2 ) {
-			return new WP_Block_List( array(), $attributes );
+		if ( count( $parts ) === 2 ) {
+			// Already in "theme//slug" format (backward compatibility).
+			$theme = $parts[0];
+			$slug  = $parts[1];
+		} else {
+			// Just a slug, use current theme.
+			$theme = get_stylesheet();
+			$slug  = $overlay_template_part_id;
 		}
 
-		$theme = $parts[0];
-		$slug  = $parts[1];
-
 		// Only query for template parts from the active theme.
 		if ( get_stylesheet() !== $theme ) {
 			return new WP_Block_List( array(), $attributes );
@@ -390,7 +428,9 @@ class WP_Navigation_Block_Renderer {
 
 		if ( ! $template_part_post ) {
 			// Try to get from theme file if not in database.
-			$block_template = get_block_file_template( $overlay_template_part_id, 'wp_template_part' );
+			// Construct the full template part ID for get_block_file_template.
+			$full_template_part_id = $theme . '//' . $slug;
+			$block_template        = get_block_file_template( $full_template_part_id, 'wp_template_part' );
 			if ( isset( $block_template->content ) ) {
 				$parsed_blocks = parse_blocks( $block_template->content );
 				$blocks        = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
@@ -962,8 +1002,13 @@ class WP_Navigation_Block_Renderer {
 
 		static::handle_view_script_module_loading( $attributes, $block, $inner_blocks );
 
+		// Use div wrapper if this navigation block is within an overlay template part.
+		$is_within_overlay = $attributes['_isWithinOverlayTemplatePart'] ?? false;
+		$tag_name          = $is_within_overlay ? 'div' : 'nav';
+
 		return sprintf(
-			'<nav %1$s>%2$s</nav>',
+			'<%1$s %2$s>%3$s</%1$s>',
+			$tag_name,
 			static::get_nav_attributes( $attributes, $inner_blocks ),
 			static::get_inner_block_markup( $attributes, $inner_blocks )
 		);
@@ -1109,7 +1154,10 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		// event.
 		$tags->set_attribute( 'tabindex', '-1' );
 
-		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
+		$computed_visibility = block_core_navigation_get_submenu_visibility( $block_attributes );
+		$open_on_hover       = 'hover' === $computed_visibility;
+
+		if ( $open_on_hover ) {
 			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
 			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
 		}

package/src/navigation/style.scss

@@ -237,19 +237,76 @@ $navigation-icon-size: 24px;
 	}
 
 	// Custom menu items.
+	// Mixin for showing submenu containers
+	@mixin show-submenu {
+		visibility: visible;
+		overflow: visible;
+		opacity: 1;
+		width: auto;
+		height: auto;
+	}
+
 	// Show submenus on hover unless they open on click.
 	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
 	// Keep submenus open when focus is within.
 	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 	// Show submenus on click.
 	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
-		visibility: visible;
-		overflow: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
+		@include show-submenu;
 		min-width: 200px;
 	}
+
+	// Always show submenus when open-always class is present
+	&.open-always {
+		flex-wrap: var(--navigation-layout-wrap, wrap);
+		flex-direction: var(--navigation-layout-direction, initial);
+		justify-content: var(--navigation-layout-justify, initial);
+		align-items: var(--navigation-layout-align, initial);
+		gap: var(--wp--style--block-gap, 2em);
+
+		.wp-block-navigation-item {
+			justify-content: var(--navigation-layout-justify, initial);
+		}
+
+		// Reset gap for submenus so they can rely on consistent gap spacing between items.
+		&.wp-block-navigation-submenu,
+		.wp-block-navigation__submenu-container {
+			gap: var(--wp--style--block-gap, 2em);
+		}
+
+		// Reset padding top for submenus so they can rely on consistent gap spacing between items.
+		&.wp-block-navigation-submenu,
+		.wp-block-navigation__submenu-container,
+		.wp-block-navigation-item {
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+
+		// Give auto indention for submenus sized by the gap spacing
+		.wp-block-navigation__submenu-container {
+			padding-left: var(--wp--style--block-gap, 2em);
+			padding-right: var(--wp--style--block-gap, 2em);
+
+			// Padding reset
+			.wp-block-navigation-item__content {
+				padding: 0;
+			}
+		}
+
+		> .wp-block-navigation-item__content,
+		.wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
+			flex-grow: 0;
+		}
+
+		> .wp-block-navigation__submenu-container {
+			@include show-submenu;
+			flex-basis: 100%;
+			position: static;
+			border: none;
+			background-color: transparent;
+			color: inherit;
+		}
+	}
 }
 
 // Submenu indentation when there's a background.
@@ -527,89 +584,92 @@ button.wp-block-navigation-item__content {
 			padding-top: calc(2rem + #{ $navigation-icon-size });
 		}
 
-		.wp-block-navigation__responsive-container-content {
-			// Don't crop the focus style.
-			overflow: visible;
-
-			// Override the container flex layout settings
-			// because we want overlay menu to always display
-			// as a column.
-			display: flex;
-			flex-direction: column;
-			flex-wrap: nowrap;
-
-			// Inherit alignment settings from container.
-			align-items: var(--navigation-layout-justification-setting, inherit);
-
-			// Always align the contents of the menu to the top.
-			&,
-			.wp-block-page-list,
-			.wp-block-navigation__container {
-				justify-content: flex-start;
-			}
+		&:where(:not(.disable-default-overlay)) {
 
-			.wp-block-navigation__submenu-icon {
-				display: none;
-			}
+			.wp-block-navigation__responsive-container-content {
+				// Don't crop the focus style.
+				overflow: visible;
 
-			// Always expand/unfold submenus inside the modal.
-			.has-child .wp-block-navigation__submenu-container {
-				// Unset CSS that hides dropdown menus.
-				opacity: 1;
-				visibility: visible;
-				height: auto;
-				width: auto;
-				overflow: initial;
-				min-width: 200px;
-
-				// Position and style.
-				position: static;
-				border: none;
-				padding-left: 2rem;
-				padding-right: 2rem;
-			}
+				// Override the container flex layout settings
+				// because we want overlay menu to always display
+				// as a column.
+				display: flex;
+				flex-direction: column;
+				flex-wrap: nowrap;
 
-			// Space unfolded items using gap and padding for submenus.
-			.wp-block-navigation__submenu-container,
-			.wp-block-navigation__container {
-				gap: inherit;
-			}
+				// Inherit alignment settings from container.
+				align-items: var(--navigation-layout-justification-setting, inherit);
 
-			// Apply top padding to nested submenus.
-			.wp-block-navigation__submenu-container {
-				padding-top: var(--wp--style--block-gap, 2em);
-			}
+				// Always align the contents of the menu to the top.
+				&,
+				.wp-block-page-list,
+				.wp-block-navigation__container {
+					justify-content: flex-start;
+				}
 
-			// A default padding is added to submenu items. It's not appropriate inside the modal.
-			.wp-block-navigation-item__content {
-				padding: 0;
+				.wp-block-navigation__submenu-icon {
+					display: none;
+				}
+
+				// Always expand/unfold submenus inside the modal.
+				.has-child .wp-block-navigation__submenu-container {
+					// Unset CSS that hides dropdown menus.
+					opacity: 1;
+					visibility: visible;
+					height: auto;
+					width: auto;
+					overflow: initial;
+					min-width: 200px;
+
+					// Position and style.
+					position: static;
+					border: none;
+					padding-left: 2rem;
+					padding-right: 2rem;
+				}
+
+				// Space unfolded items using gap and padding for submenus.
+				.wp-block-navigation__submenu-container,
+				.wp-block-navigation__container {
+					gap: inherit;
+				}
+
+				// Apply top padding to nested submenus.
+				.wp-block-navigation__submenu-container {
+					padding-top: var(--wp--style--block-gap, 2em);
+				}
+
+				// A default padding is added to submenu items. It's not appropriate inside the modal.
+				.wp-block-navigation-item__content {
+					padding: 0;
+				}
+
+				// Default column display for overlay menu contents.
+				.wp-block-navigation__container,
+				.wp-block-navigation-item,
+				.wp-block-page-list {
+					display: flex;
+					flex-direction: column;
+					// Inherit alignment settings from container.
+					align-items: var(--navigation-layout-justification-setting, initial);
+				}
 			}
 
-			// Default column display for overlay menu contents.
+			// Remove background colors for items inside the overlay menu.
+			// Has to be !important to override global styles.
+			.wp-block-navigation-item .wp-block-navigation__submenu-container,
 			.wp-block-navigation__container,
 			.wp-block-navigation-item,
 			.wp-block-page-list {
-				display: flex;
-				flex-direction: column;
-				// Inherit alignment settings from container.
-				align-items: var(--navigation-layout-justification-setting, initial);
+				color: inherit !important;
+				background: transparent !important;
 			}
-		}
 
-		// Remove background colors for items inside the overlay menu.
-		// Has to be !important to override global styles.
-		.wp-block-navigation-item .wp-block-navigation__submenu-container,
-		.wp-block-navigation__container,
-		.wp-block-navigation-item,
-		.wp-block-page-list {
-			color: inherit !important;
-			background: transparent !important;
-		}
-
-		// Override justification dropdown menu positioning rules.
-		.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
-			right: auto;
-			left: auto;
+			// Override justification dropdown menu positioning rules.
+			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+				right: auto;
+				left: auto;
+			}
 		}
 	}
 
@@ -621,6 +681,10 @@ button.wp-block-navigation-item__content {
 			width: 100%;
 		}
 
+		.wp-block-navigation__responsive-close {
+			max-width: none;
+		}
+
 		// When menu is open with custom overlay, hide default navigation and show overlay.
 		&.is-menu-open {
 			.wp-block-navigation__responsive-container-content {