@wordpress/block-library 7.19.0 → 8.0.0

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

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalOffCanvasEditor as OffCanvasEditor,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { PanelBody, VisuallyHidden } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ManageMenusButton from './manage-menus-button';
+import NavigationMenuSelector from './navigation-menu-selector';
+
+const MenuInspectorControls = ( {
+	createNavigationMenuIsSuccess,
+	createNavigationMenuIsError,
+	currentMenuId = null,
+	innerBlocks,
+	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'" );
+
+	return (
+		<InspectorControls __experimentalGroup={ menuControlsSlot }>
+			<PanelBody
+				title={
+					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
+				}
+			>
+				<>
+					{ isOffCanvasNavigationEditorEnabled && (
+						<VisuallyHidden as="h2">
+							{ __( 'Menu' ) }
+						</VisuallyHidden>
+					) }
+					<NavigationMenuSelector
+						currentMenuId={ currentMenuId }
+						onSelectClassicMenu={ onSelectClassicMenu }
+						onSelectNavigationMenu={ onSelectNavigationMenu }
+						onCreateNew={ onCreateNew }
+						createNavigationMenuIsSuccess={
+							createNavigationMenuIsSuccess
+						}
+						createNavigationMenuIsError={
+							createNavigationMenuIsError
+						}
+						actionLabel={ actionLabel }
+					/>
+					{ isOffCanvasNavigationEditorEnabled ? (
+						<OffCanvasEditor
+							blocks={ innerBlocks }
+							isExpanded={ true }
+							selectBlockInCanvas={ false }
+						/>
+					) : (
+						<ManageMenusButton
+							disabled={ isManageMenusButtonDisabled }
+						/>
+					) }
+				</>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default MenuInspectorControls;

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

@@ -10,7 +10,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
+import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -31,9 +31,6 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsError,
 	toggleProps = {},
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -164,23 +161,15 @@ function NavigationMenuSelector( {
 
 	return (
 		<DropdownMenu
-			className={
-				isOffCanvasNavigationEditorEnabled
-					? ''
-					: 'wp-block-navigation__navigation-selector'
-			}
+			className="wp-block-navigation__navigation-selector"
 			label={ selectorLabel }
 			text={
 				<span className="wp-block-navigation__navigation-selector-button__label">
-					{ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
+					{ selectorLabel }
 				</span>
 			}
-			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
-			toggleProps={
-				isOffCanvasNavigationEditorEnabled
-					? { isSmall: true }
-					: toggleProps
-			}
+			icon={ null }
+			toggleProps={ toggleProps }
 		>
 			{ ( { onClose } ) => (
 				<>

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/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;
+			}
 		}
 	}
 

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;