@wordpress/block-library 7.18.0 → 8.0.0

package/src/navigation/edit/manage-menus-button.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const ManageMenusButton = ( { className = '', disabled } ) => (
+	<Button
+		variant="link"
+		disabled={ disabled }
+		className={ className }
+		href={ addQueryArgs( 'edit.php', {
+			post_type: 'wp_navigation',
+		} ) }
+	>
+		{ __( 'Manage menus' ) }
+	</Button>
+);
+
+export default ManageMenusButton;

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

@@ -163,7 +163,11 @@ function NavigationMenuSelector( {
 		<DropdownMenu
 			className="wp-block-navigation__navigation-selector"
 			label={ selectorLabel }
-			text={ selectorLabel }
+			text={
+				<span className="wp-block-navigation__navigation-selector-button__label">
+					{ selectorLabel }
+				</span>
+			}
 			icon={ null }
 			toggleProps={ toggleProps }
 		>

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

@@ -85,11 +85,7 @@ export default function ResponsiveWrapper( {
 					onClick={ () => onToggle( true ) }
 				>
 					{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
-					{ ! hasIcon && (
-						<span className="wp-block-navigation__toggle_button_label">
-							{ __( 'Menu' ) }
-						</span>
-					) }
+					{ ! hasIcon && __( 'Menu' ) }
 				</Button>
 			) }
 
@@ -109,11 +105,7 @@ export default function ResponsiveWrapper( {
 							onClick={ () => onToggle( false ) }
 						>
 							{ hasIcon && <Icon icon={ close } /> }
-							{ ! hasIcon && (
-								<span className="wp-block-navigation__toggle_button_label">
-									{ __( 'Close' ) }
-								</span>
-							) }
+							{ ! hasIcon && __( 'Close' ) }
 						</Button>
 						<div
 							className="wp-block-navigation__responsive-container-content"

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useInnerBlocksProps } from '@wordpress/block-editor';
-import { Disabled, Spinner } from '@wordpress/components';
+import { Disabled } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
@@ -11,7 +11,7 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
-import useCreateNavigationMenu from './use-create-navigation-menu';
+import { areBlocksDirty } from './are-blocks-dirty';
 
 const EMPTY_OBJECT = {};
 const DRAFT_MENU_PARAMS = [
@@ -38,9 +38,8 @@ const ALLOWED_BLOCKS = [
 
 export default function UnsavedInnerBlocks( {
 	blocks,
-	clientId,
-	hasSavedUnsavedInnerBlocks,
-	onSave,
+	createNavigationMenu,
+
 	hasSelection,
 } ) {
 	const originalBlocks = useRef();
@@ -53,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(
 		() =>
@@ -75,7 +78,6 @@ export default function UnsavedInnerBlocks( {
 	// The block will be disabled in a block preview, use this as a way of
 	// avoiding the side-effects of this component for block previews.
 	const isDisabled = useContext( Disabled.Context );
-	const savingLock = useRef( false );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
@@ -121,9 +123,6 @@ export default function UnsavedInnerBlocks( {
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const { create: createNavigationMenu } =
-		useCreateNavigationMenu( clientId );
-
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
@@ -140,9 +139,7 @@ export default function UnsavedInnerBlocks( {
 		// which is an indication they want to start editing.
 		if (
 			isDisabled ||
-			hasSavedUnsavedInnerBlocks ||
 			isSaving ||
-			savingLock.current ||
 			! hasResolvedDraftNavigationMenus ||
 			! hasResolvedNavigationMenus ||
 			! hasSelection ||
@@ -151,11 +148,7 @@ export default function UnsavedInnerBlocks( {
 			return;
 		}
 
-		savingLock.current = true;
-		createNavigationMenu( null, blocks ).then( ( menu ) => {
-			onSave( menu );
-			savingLock.current = false;
-		} );
+		createNavigationMenu( null, blocks );
 	}, [
 		isDisabled,
 		isSaving,
@@ -170,17 +163,5 @@ export default function UnsavedInnerBlocks( {
 
 	const Wrapper = isSaving ? Disabled : 'div';
 
-	return (
-		<>
-			{ isSaving ? (
-				<Spinner
-					className={
-						'wp-block-navigation__uncontrolled-inner-blocks-loading-indicator'
-					}
-				/>
-			) : (
-				<Wrapper { ...innerBlocksProps } />
-			) }
-		</>
-	);
+	return <Wrapper { ...innerBlocksProps } />;
 }

package/src/navigation/editor.scss

@@ -540,6 +540,13 @@ body.editor-styles-wrapper
 	color: inherit;
 }
 
+.components-heading.wp-block-navigation-off-canvas-editor__title {
+	margin: 0;
+}
+.wp-block-navigation-off-canvas-editor__header {
+	margin-bottom: $grid-unit-10;
+}
+
 // Customize the mobile editing.
 // This can be revisited in the future, but for now, inherit design from the parent.
 .is-menu-open .wp-block-navigation__responsive-container-content * {
@@ -582,6 +589,13 @@ body.editor-styles-wrapper
 	margin-bottom: $grid-unit-20;
 }
 
+// increased specificity to override button variant
+// for the manage menus button in the advanced area
+// of the navigation block
+.components-button.is-link.wp-block-navigation-manage-menus-button {
+	margin-bottom: $grid-unit-20;
+}
+
 .wp-block-navigation__overlay-menu-preview {
 	display: flex;
 	align-items: center;
@@ -625,6 +639,17 @@ body.editor-styles-wrapper
 	width: 100%;
 }
 
+.wp-block-navigation__navigation-selector-button__icon {
+	flex: 0 0 auto;
+}
+
+.wp-block-navigation__navigation-selector-button__label {
+	flex: 0 1 auto;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .wp-block-navigation__navigation-selector-button--createnew {
 	border: 1px solid;
 	margin-bottom: $grid-unit-20;

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/style.scss

@@ -655,6 +655,14 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
+	// When set to collapse into a text button, it should inherit the parent font.
+	// This needs specificity to override inherited properties by the button element and component.
+	&.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
+		font-family: inherit;
+		font-weight: inherit;
+		font-size: inherit;
+	}
+
 	&:not(.always-shown) {
 		@include break-small {
 			display: none;
@@ -668,6 +676,14 @@ button.wp-block-navigation-item__content {
 	top: 0;
 	right: 0;
 	z-index: 2; // Needs to be above the modal z index itself.
+
+	// When set to collapse into a text button, it should inherit the parent font.
+	// This needs specificity to override inherited properties by the button element and component.
+	&.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
+		font-family: inherit;
+		font-weight: inherit;
+		font-size: inherit;
+	}
 }
 
 // The menu adds wrapping containers.

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;