@wordpress/block-library 7.19.0 → 8.1.0

package/src/navigation/edit/menu-inspector-controls.js

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalOffCanvasEditor as OffCanvasEditor,
+	InspectorControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ManageMenusButton from './manage-menus-button';
+import NavigationMenuSelector from './navigation-menu-selector';
+
+const MenuInspectorControls = ( {
+	clientId,
+	createNavigationMenuIsSuccess,
+	createNavigationMenuIsError,
+	currentMenuId = null,
+	isNavigationMenuMissing,
+	isManageMenusButtonDisabled,
+	onCreateNew,
+	onSelectClassicMenu,
+	onSelectNavigationMenu,
+} ) => {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
+		? 'list'
+		: undefined;
+	/* translators: %s: The name of a menu. */
+	const actionLabel = __( "Switch to '%s'" );
+
+	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
+	// This is required else the list view will display the entire block tree.
+	const clientIdsTree = useSelect(
+		( select ) => {
+			const { __unstableGetClientIdsTree } = select( blockEditorStore );
+			return __unstableGetClientIdsTree( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<InspectorControls __experimentalGroup={ menuControlsSlot }>
+			<PanelBody
+				title={
+					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
+				}
+			>
+				{ isOffCanvasNavigationEditorEnabled ? (
+					<>
+						<HStack className="wp-block-navigation-off-canvas-editor__header">
+							<Heading
+								className="wp-block-navigation-off-canvas-editor__title"
+								level={ 2 }
+							>
+								{ __( 'Menu' ) }
+							</Heading>
+							<NavigationMenuSelector
+								currentMenuId={ currentMenuId }
+								onSelectClassicMenu={ onSelectClassicMenu }
+								onSelectNavigationMenu={
+									onSelectNavigationMenu
+								}
+								onCreateNew={ onCreateNew }
+								createNavigationMenuIsSuccess={
+									createNavigationMenuIsSuccess
+								}
+								createNavigationMenuIsError={
+									createNavigationMenuIsError
+								}
+								actionLabel={ actionLabel }
+							/>
+						</HStack>
+						{ currentMenuId && isNavigationMenuMissing ? (
+							<p>{ __( 'Select or create a menu' ) }</p>
+						) : (
+							<OffCanvasEditor
+								blocks={ clientIdsTree }
+								isExpanded={ true }
+								selectBlockInCanvas={ false }
+							/>
+						) }
+					</>
+				) : (
+					<>
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							onSelectClassicMenu={ onSelectClassicMenu }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onCreateNew={ onCreateNew }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
+							createNavigationMenuIsError={
+								createNavigationMenuIsError
+							}
+							actionLabel={ actionLabel }
+						/>
+						<ManageMenusButton
+							disabled={ isManageMenusButtonDisabled }
+						/>
+					</>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default MenuInspectorControls;

package/src/navigation/edit/navigation-menu-selector.js

@@ -33,7 +33,6 @@ function NavigationMenuSelector( {
 } ) {
 	const isOffCanvasNavigationEditorEnabled =
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -143,7 +142,11 @@ function NavigationMenuSelector( {
 		},
 	};
 
-	if ( ! hasNavigationMenus && ! hasClassicMenus ) {
+	if (
+		! hasNavigationMenus &&
+		! hasClassicMenus &&
+		! isOffCanvasNavigationEditorEnabled
+	) {
 		return (
 			<Button
 				className="wp-block-navigation__navigation-selector-button--createnew"
@@ -170,11 +173,7 @@ function NavigationMenuSelector( {
 					: 'wp-block-navigation__navigation-selector'
 			}
 			label={ selectorLabel }
-			text={
-				<span className="wp-block-navigation__navigation-selector-button__label">
-					{ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
-				</span>
-			}
+			text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
 			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
 			toggleProps={
 				isOffCanvasNavigationEditorEnabled

package/src/navigation/edit/test/are-blocks-dirty.js

@@ -0,0 +1,121 @@
+/**
+ * Internal dependencies
+ */
+import { areBlocksDirty } from '../are-blocks-dirty';
+
+describe( 'areBlocksDirty', () => {
+	it( 'should be clean if the blocks are the same', () => {
+		expect(
+			areBlocksDirty(
+				[ { name: 'core/paragraph', content: 'I am not dirty.' } ],
+				[ { name: 'core/paragraph', content: 'I am not dirty.' } ]
+			)
+		).toBe( false );
+	} );
+
+	it( `should be dirty if the blocks' attributes are different`, () => {
+		expect(
+			areBlocksDirty(
+				[ { name: 'core/paragraph', content: 'I am not dirty.' } ],
+				[ { name: 'core/paragraph', content: 'I am actually dirty.' } ]
+			)
+		).toBe( true );
+	} );
+
+	it( `should be dirty if the blocks' attributes don't match`, () => {
+		expect(
+			areBlocksDirty(
+				[ { name: 'core/paragraph' }, { dropCap: false } ],
+				[
+					{ name: 'core/paragraph' },
+					{ content: 'I am actually dirty.' },
+				]
+			)
+		).toBe( true );
+	} );
+
+	it( `should be dirty if the blocks' inner blocks are dirty`, () => {
+		expect(
+			areBlocksDirty(
+				[
+					{
+						name: 'core/social-links',
+						innerBlocks: [
+							{
+								name: 'core/social-link',
+								url: 'www.wordpress.org',
+							},
+						],
+					},
+				],
+				[
+					{
+						name: 'core/social-links',
+						innerBlocks: [
+							{
+								name: 'core/social-link',
+								service: 'wordpress',
+								url: 'www.wordpress.org',
+							},
+							{
+								name: 'core/social-link',
+								service: 'wordpress',
+								url: 'make.wordpress.org',
+							},
+						],
+					},
+				]
+			)
+		).toBe( true );
+	} );
+
+	describe( 'Controlled Page List block specific exceptions', () => {
+		it( 'should be clean if only page list inner blocks have changed', () => {
+			expect(
+				areBlocksDirty(
+					[
+						{ name: 'core/paragraph' },
+						{
+							name: 'core/page-list',
+							innerBlocks: [],
+						},
+					],
+					[
+						{ name: 'core/paragraph' },
+						{
+							name: 'core/page-list',
+							innerBlocks: [ { name: 'core/page-list-item' } ],
+						},
+					]
+				)
+			).toBe( false );
+		} );
+
+		it( 'should be dirty if other blocks have changed alongside page list inner blocks', () => {
+			expect(
+				areBlocksDirty(
+					[
+						{
+							name: 'core/paragraph',
+							content: 'This is some text',
+						},
+						{
+							name: 'core/page-list',
+							innerBlocks: [],
+						},
+					],
+					[
+						{
+							name: 'core/paragraph',
+							content: 'This is some text that has changed',
+						},
+						{
+							name: 'core/page-list',
+							innerBlocks: [ { name: 'core/page-list-item' } ],
+						},
+					]
+				)
+			).toBe( true );
+		} );
+	} );
+} );

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -11,6 +11,7 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
+import { areBlocksDirty } from './are-blocks-dirty';
 
 const EMPTY_OBJECT = {};
 const DRAFT_MENU_PARAMS = [
@@ -51,13 +52,17 @@ export default function UnsavedInnerBlocks( {
 		}
 	}, [ blocks ] );
 
-	// If the current inner blocks object is different in any way
-	// from the original inner blocks from the post content then the
-	// user has made changes to the inner blocks. At this point the inner
-	// blocks can be considered "dirty".
-	// We also make sure the current innerBlocks had a chance to be set.
-	const innerBlocksAreDirty =
-		!! originalBlocks.current && blocks !== originalBlocks.current;
+	// If the current inner blocks are different from the original inner blocks
+	// from the post content then the user has made changes to the inner blocks.
+	// At this point the inner blocks can be considered "dirty".
+	// Note: referential equality is not sufficient for comparison as the inner blocks
+	// of the page list are controlled and may be updated async due to syncing with
+	// entity records. As a result we need to perform a deep equality check skipping
+	// the page list's inner blocks.
+	const innerBlocksAreDirty = areBlocksDirty(
+		originalBlocks?.current,
+		blocks
+	);
 
 	const shouldDirectInsert = useMemo(
 		() =>

package/src/navigation/edit/utils.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
@@ -28,3 +33,80 @@ export function detectColors(
 
 	setBackground( backgroundColor );
 }
+
+/**
+ * Determine the colors for a menu.
+ *
+ * Order of priority is:
+ * 1: Overlay custom colors (if submenu)
+ * 2: Overlay theme colors (if submenu)
+ * 3: Custom colors
+ * 4: Theme colors
+ * 5: Global styles
+ *
+ * @param {Object}  context
+ * @param {boolean} isSubMenu
+ */
+export function getColors( context, isSubMenu ) {
+	const {
+		textColor,
+		customTextColor,
+		backgroundColor,
+		customBackgroundColor,
+		overlayTextColor,
+		customOverlayTextColor,
+		overlayBackgroundColor,
+		customOverlayBackgroundColor,
+		style,
+	} = context;
+
+	const colors = {};
+
+	if ( isSubMenu && !! customOverlayTextColor ) {
+		colors.customTextColor = customOverlayTextColor;
+	} else if ( isSubMenu && !! overlayTextColor ) {
+		colors.textColor = overlayTextColor;
+	} else if ( !! customTextColor ) {
+		colors.customTextColor = customTextColor;
+	} else if ( !! textColor ) {
+		colors.textColor = textColor;
+	} else if ( !! style?.color?.text ) {
+		colors.customTextColor = style.color.text;
+	}
+
+	if ( isSubMenu && !! customOverlayBackgroundColor ) {
+		colors.customBackgroundColor = customOverlayBackgroundColor;
+	} else if ( isSubMenu && !! overlayBackgroundColor ) {
+		colors.backgroundColor = overlayBackgroundColor;
+	} else if ( !! customBackgroundColor ) {
+		colors.customBackgroundColor = customBackgroundColor;
+	} else if ( !! backgroundColor ) {
+		colors.backgroundColor = backgroundColor;
+	} else if ( !! style?.color?.background ) {
+		colors.customTextColor = style.color.background;
+	}
+
+	return colors;
+}
+
+export function getNavigationChildBlockProps( innerBlocksColors ) {
+	return {
+		className: classnames( 'wp-block-navigation__submenu-container', {
+			'has-text-color': !! (
+				innerBlocksColors.textColor || innerBlocksColors.customTextColor
+			),
+			[ `has-${ innerBlocksColors.textColor }-color` ]:
+				!! innerBlocksColors.textColor,
+			'has-background': !! (
+				innerBlocksColors.backgroundColor ||
+				innerBlocksColors.customBackgroundColor
+			),
+			[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
+				!! innerBlocksColors.backgroundColor,
+		} ),
+		style: {
+			color: innerBlocksColors.customTextColor,
+			backgroundColor: innerBlocksColors.customBackgroundColor,
+		},
+	};
+}

package/src/navigation/editor.scss

@@ -32,13 +32,6 @@
  * Submenus.
  */
 
-// Ensure sub-menus stay open and visible when a nested block is selected.
-.wp-block-navigation__container.is-parent-of-selected-block {
-	visibility: visible;
-	opacity: 1;
-	overflow: visible;
-}
-
 // Low specificity default to ensure background color applies to submenus.
 .wp-block-navigation__container,
 .wp-block-navigation-item {

package/src/navigation/index.php

@@ -257,10 +257,32 @@ function block_core_navigation_get_classic_menu_fallback() {
 	$classic_nav_menus = wp_get_nav_menus();
 
 	// If menus exist.
-	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) && count( $classic_nav_menus ) === 1 ) {
-		// Use the first classic menu only. Handles simple use case where user has a single
-		// classic menu and switches to a block theme. In future this maybe expanded to
-		// determine the most appropriate classic menu to be used based on location.
+	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) ) {
+		// Handles simple use case where user has a classic menu and switches to a block theme.
+
+		// Returns the menu assigned to location `primary`.
+		$locations = get_nav_menu_locations();
+		if ( isset( $locations['primary'] ) ) {
+			$primary_menu = wp_get_nav_menu_object( $locations['primary'] );
+			if ( $primary_menu ) {
+				return $primary_menu;
+			}
+		}
+
+		// Returns a menu if `primary` is its slug.
+		foreach ( $classic_nav_menus as $classic_nav_menu ) {
+			if ( 'primary' === $classic_nav_menu->slug ) {
+				return $classic_nav_menu;
+			}
+		}
+
+		// Otherwise return the most recently created classic menu.
+		usort(
+			$classic_nav_menus,
+			function( $a, $b ) {
+				return $b->term_id - $a->term_id;
+			}
+		);
 		return $classic_nav_menus[0];
 	}
 }
@@ -489,6 +511,7 @@ function block_core_navigation_from_block_get_post_ids( $block ) {
 function render_block_core_navigation( $attributes, $content, $block ) {
 
 	static $seen_menu_names = array();
+	static $seen_ref        = array();
 
 	// Flag used to indicate whether the rendered output is considered to be
 	// a fallback (i.e. the block has no menu associated with it).
@@ -559,6 +582,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Load inner blocks from the navigation post.
 	if ( array_key_exists( 'ref', $attributes ) ) {
+		if ( in_array( $attributes['ref'], $seen_ref, true ) ) {
+			return '';
+		}
+		$seen_ref[] = $attributes['ref'];
+
 		$navigation_post = get_post( $attributes['ref'] );
 		if ( ! isset( $navigation_post ) ) {
 			return '';
@@ -651,22 +679,41 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		_prime_post_caches( $post_ids, false, false );
 	}
 
+	$list_item_nav_blocks = array(
+		'core/navigation-link',
+		'core/home-link',
+		'core/site-title',
+		'core/site-logo',
+		'core/navigation-submenu',
+	);
+
+	$needs_list_item_wrapper = array(
+		'core/site-title',
+		'core/site-logo',
+	);
+
 	$inner_blocks_html = '';
 	$is_list_open      = false;
 	foreach ( $inner_blocks as $inner_block ) {
-		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name || 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name || 'core/navigation-submenu' === $inner_block->name ) && ! $is_list_open ) {
+		$is_list_item = in_array( $inner_block->name, $list_item_nav_blocks, true );
+
+		if ( $is_list_item && ! $is_list_open ) {
 			$is_list_open       = true;
 			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
 		}
-		if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && 'core/site-title' !== $inner_block->name && 'core/site-logo' !== $inner_block->name && 'core/navigation-submenu' !== $inner_block->name && $is_list_open ) {
+
+		if ( ! $is_list_item && $is_list_open ) {
 			$is_list_open       = false;
 			$inner_blocks_html .= '</ul>';
 		}
+
 		$inner_block_content = $inner_block->render();
-		if ( 'core/site-title' === $inner_block->name || ( 'core/site-logo' === $inner_block->name && $inner_block_content ) ) {
-			$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
-		} else {
-			$inner_blocks_html .= $inner_block_content;
+		if ( ! empty( $inner_block_content ) ) {
+			if ( in_array( $inner_block->name, $needs_list_item_wrapper, true ) ) {
+				$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
+			} else {
+				$inner_blocks_html .= $inner_block_content;
+			}
 		}
 	}
 
@@ -809,3 +856,35 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
 }
 
 add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
+
+/**
+ * Enables animation of the block inspector for the Navigation block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation' =>
+				array(
+					'enterDirection' => 'leftToRight',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_inspector' );

package/src/navigation/style.scss

@@ -533,7 +533,6 @@ button.wp-block-navigation-item__content {
 			}
 
 			// Always expand/unfold submenus inside the modal.
-			.has-child .submenu-container,
 			.has-child .wp-block-navigation__submenu-container {
 				// Unset CSS that hides dropdown menus.
 				opacity: 1;

package/src/navigation/view-modal.js

@@ -27,6 +27,16 @@ function navigationToggleModal( modal ) {
 	htmlElement.classList.toggle( 'has-modal-open' );
 }
 
+function isLinkToAnchorOnCurrentPage( node ) {
+	return (
+		node.hash &&
+		node.protocol === window.location.protocol &&
+		node.host === window.location.host &&
+		node.pathname === window.location.pathname &&
+		node.search === window.location.search
+	);
+}
+
 window.addEventListener( 'load', () => {
 	MicroModal.init( {
 		onShow: navigationToggleModal,
@@ -42,7 +52,7 @@ window.addEventListener( 'load', () => {
 	navigationLinks.forEach( function ( link ) {
 		// Ignore non-anchor links and anchor links which open on a new tab.
 		if (
-			! link.getAttribute( 'href' )?.startsWith( '#' ) ||
+			! isLinkToAnchorOnCurrentPage( link ) ||
 			link.attributes?.target === '_blank'
 		) {
 			return;