@wordpress/block-library 8.15.0 → 8.16.0

package/src/index.js

@@ -282,7 +282,11 @@ export const registerCoreBlocks = (
 	blocks.forEach( ( { init } ) => init() );
 
 	setDefaultBlockName( paragraph.name );
-	if ( window.wp && window.wp.oldEditor ) {
+	if (
+		window.wp &&
+		window.wp.oldEditor &&
+		blocks.some( ( { name } ) => name === classic.name )
+	) {
 		setFreeformContentHandlerName( classic.name );
 	}
 	setUnregisteredTypeHandlerName( missing.name );

package/src/list/test/edit.native.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	act,
 	selectRangeInRichText,
 	typeInRichText,
 	fireEvent,
@@ -577,6 +578,10 @@ describe( 'List block', () => {
 			preventDefault() {},
 			keyCode: BACKSPACE,
 		} );
+		// Inner blocks batch store updates with microtasks.
+		// To avoid `act` warnings, we let queued microtasks to be executed.
+		// Reference: https://t.ly/b95nA
+		await act( async () => {} );
 
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:paragraph -->

package/src/list-item/hooks/use-merge.js

@@ -107,11 +107,18 @@ export default function useMerge( clientId, onMerge ) {
 			} else if ( previousBlockClientId ) {
 				const trailingId = getTrailingId( previousBlockClientId );
 				registry.batch( () => {
-					moveBlocksToPosition(
-						getBlockOrder( clientId ),
-						clientId,
-						previousBlockClientId
-					);
+					// When merging a list item with a previous trailing list
+					// item, we also need to move any nested list items. First,
+					// check if there's a listed list. If there's a nested list,
+					// append its nested list items to the trailing list.
+					const [ nestedListClientId ] = getBlockOrder( clientId );
+					if ( nestedListClientId ) {
+						moveBlocksToPosition(
+							getBlockOrder( nestedListClientId ),
+							nestedListClientId,
+							getBlockRootClientId( trailingId )
+						);
+					}
 					mergeBlocks( trailingId, clientId );
 				} );
 			} else {

package/src/missing/test/__snapshots__/edit.native.js.snap

@@ -7,7 +7,11 @@ exports[`Missing block renders without crashing 1`] = `
   accessibilityRole="button"
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
     }
   }
   accessible={true}
@@ -24,6 +28,23 @@ exports[`Missing block renders without crashing 1`] = `
     accessibilityHint="Tap here to show help"
     accessibilityLabel="Help button"
     accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}

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

@@ -103,7 +103,7 @@ const MainContent = ( {
 		? sprintf(
 				/* translators: %s: The name of a menu. */
 				__( 'Structure for navigation menu: %s' ),
-				navigationMenu?.title?.rendered || __( 'Untitled menu' )
+				navigationMenu?.title || __( 'Untitled menu' )
 		  )
 		: __(
 				'You have not yet created any menus. Displaying a list of your Pages'

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

@@ -20,19 +20,19 @@ import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
 function buildMenuLabel( title, id, status ) {
-	if ( ! title?.rendered ) {
+	if ( ! title ) {
 		/* translators: %s is the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
 	if ( status === 'publish' ) {
-		return decodeEntities( title?.rendered );
+		return decodeEntities( title );
 	}
 
 	return sprintf(
 		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
 		__( '%1$s (%2$s)' ),
-		decodeEntities( title?.rendered ),
+		decodeEntities( title ),
 		status
 	);
 }
@@ -72,7 +72,11 @@ function NavigationMenuSelector( {
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title, status }, index ) => {
-				const label = buildMenuLabel( title, index + 1, status );
+				const label = buildMenuLabel(
+					title?.rendered,
+					index + 1,
+					status
+				);
 
 				return {
 					value: id,

package/src/navigation/index.php

@@ -671,19 +671,33 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$inner_blocks_html .= '</ul>';
 	}
 
-	// If the script already exists, there is no point in removing it from viewScript.
-	$should_load_view_script = ( $is_responsive_menu || ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) );
-	$view_js_file            = 'wp-block-navigation-view';
-	if ( ! wp_script_is( $view_js_file ) ) {
-		$script_handles = $block->block_type->view_script_handles;
-
-		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file, 'wp-block-navigation-view-2' ) );
-		}
-		// If the script is needed, but it was previously removed, add it again.
-		if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file, 'wp-block-navigation-view-2' ) );
+	$needed_script_map = array(
+		'wp-block-navigation-view'   => ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ),
+		'wp-block-navigation-view-2' => $is_responsive_menu,
+	);
+
+	$should_load_view_script = false;
+	if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) ) {
+		// TODO: The script is still loaded even when it isn't needed when the Interactivity API is used.
+		$should_load_view_script = count( array_filter( $needed_script_map ) ) > 0;
+	} else {
+		foreach ( $needed_script_map as $view_script_handle => $is_view_script_needed ) {
+
+			// If the script already exists, there is no point in removing it from viewScript.
+			if ( wp_script_is( $view_script_handle ) ) {
+				continue;
+			}
+
+			$script_handles = $block->block_type->view_script_handles;
+
+			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+			if ( ! $is_view_script_needed && in_array( $view_script_handle, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_script_handle ) );
+			}
+			// If the script is needed, but it was previously removed, add it again.
+			if ( $is_view_script_needed && ! in_array( $view_script_handle, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_script_handle ) );
+			}
 		}
 	}
 

package/src/navigation/view-modal.js

@@ -1,16 +1,22 @@
+/*eslint-env browser*/
 /**
  * External dependencies
  */
 import MicroModal from 'micromodal';
 
 // Responsive navigation toggle.
-function navigationToggleModal( modal ) {
+
+/**
+ * Toggles responsive navigation.
+ *
+ * @param {HTMLDivElement} modal
+ * @param {boolean}        isHidden
+ */
+function navigationToggleModal( modal, isHidden ) {
 	const dialogContainer = modal.querySelector(
 		`.wp-block-navigation__responsive-dialog`
 	);
 
-	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
 	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
 
@@ -23,10 +29,15 @@ function navigationToggleModal( modal ) {
 	}
 
 	// Add a class to indicate the modal is open.
-	const htmlElement = document.documentElement;
-	htmlElement.classList.toggle( 'has-modal-open' );
+	document.documentElement.classList.toggle( 'has-modal-open' );
 }
 
+/**
+ * Checks whether the provided link is an anchor on the current page.
+ *
+ * @param {HTMLAnchorElement} node
+ * @return {boolean} Is anchor.
+ */
 function isLinkToAnchorOnCurrentPage( node ) {
 	return (
 		node.hash &&
@@ -37,42 +48,80 @@ function isLinkToAnchorOnCurrentPage( node ) {
 	);
 }
 
-window.addEventListener( 'load', () => {
-	MicroModal.init( {
-		onShow: navigationToggleModal,
-		onClose: navigationToggleModal,
-		openClass: 'is-menu-open',
+/**
+ * Handles effects after opening the modal.
+ *
+ * @param {HTMLDivElement} modal
+ */
+function onShow( modal ) {
+	navigationToggleModal( modal, false );
+	modal.addEventListener( 'click', handleAnchorLinkClicksInsideModal, {
+		passive: true,
 	} );
+}
 
-	// Close modal automatically on clicking anchor links inside modal.
-	const navigationLinks = document.querySelectorAll(
-		'.wp-block-navigation-item__content'
-	);
+/**
+ * Handles effects after closing the modal.
+ *
+ * @param {HTMLDivElement} modal
+ */
+function onClose( modal ) {
+	navigationToggleModal( modal, true );
+	modal.removeEventListener( 'click', handleAnchorLinkClicksInsideModal, {
+		passive: true,
+	} );
+}
 
-	navigationLinks.forEach( function ( link ) {
-		// Ignore non-anchor links and anchor links which open on a new tab.
-		if (
-			! isLinkToAnchorOnCurrentPage( link ) ||
-			link.attributes?.target === '_blank'
-		) {
-			return;
-		}
+/**
+ * Handle clicks to anchor links in modal using event delegation by closing modal automatically
+ *
+ * @param {UIEvent} event
+ */
+function handleAnchorLinkClicksInsideModal( event ) {
+	const link = event.target.closest( '.wp-block-navigation-item__content' );
+	if ( ! ( link instanceof HTMLAnchorElement ) ) {
+		return;
+	}
 
-		// Find the specific parent modal for this link
-		// since .close() won't work without an ID if there are
-		// multiple navigation menus in a post/page.
-		const modal = link.closest(
-			'.wp-block-navigation__responsive-container'
-		);
-		const modalId = modal?.getAttribute( 'id' );
+	// Ignore non-anchor links and anchor links which open on a new tab.
+	if (
+		! isLinkToAnchorOnCurrentPage( link ) ||
+		link.attributes?.target === '_blank'
+	) {
+		return;
+	}
 
-		link.addEventListener( 'click', () => {
-			// check if modal exists and is open before trying to close it
-			// otherwise Micromodal will toggle the `has-modal-open` class
-			// on the html tag which prevents scrolling
-			if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
-				MicroModal.close( modalId );
-			}
-		} );
-	} );
-} );
+	// Find the specific parent modal for this link
+	// since .close() won't work without an ID if there are
+	// multiple navigation menus in a post/page.
+	const modal = link.closest( '.wp-block-navigation__responsive-container' );
+	const modalId = modal?.getAttribute( 'id' );
+	if ( ! modalId ) {
+		return;
+	}
+
+	// check if modal exists and is open before trying to close it
+	// otherwise Micromodal will toggle the `has-modal-open` class
+	// on the html tag which prevents scrolling
+	if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
+		MicroModal.close( modalId );
+	}
+}
+
+// MicroModal.init() does not support event delegation for the open trigger, so here MicroModal.show() is called manually.
+document.addEventListener(
+	'click',
+	( event ) => {
+		/** @type {HTMLElement} */
+		const target = event.target;
+
+		if ( target.dataset.micromodalTrigger ) {
+			MicroModal.show( target.dataset.micromodalTrigger, {
+				onShow,
+				onClose,
+				openClass: 'is-menu-open',
+			} );
+		}
+	},
+	{ passive: true }
+);

package/src/navigation/view.js

@@ -1,62 +1,94 @@
+/*eslint-env browser*/
 // Open on click functionality.
-function closeSubmenus( element ) {
-	element
+
+/**
+ * Keep track of whether a submenu is open to short-circuit delegated event listeners.
+ *
+ * @type {boolean}
+ */
+let hasOpenSubmenu = false;
+
+/**
+ * Close submenu items for a navigation item.
+ *
+ * @param {HTMLElement} navigationItem - Either a NAV or LI element.
+ */
+function closeSubmenus( navigationItem ) {
+	navigationItem
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( function ( toggle ) {
 			toggle.setAttribute( 'aria-expanded', 'false' );
 		} );
+	hasOpenSubmenu = false;
 }
 
-function toggleSubmenuOnClick( event ) {
-	const buttonToggle = event.target.closest( '[aria-expanded]' );
-	const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
+/**
+ * Toggle submenu on click.
+ *
+ * @param {HTMLButtonElement} buttonToggle
+ */
+function toggleSubmenuOnClick( buttonToggle ) {
+	const isSubmenuOpen =
+		buttonToggle.getAttribute( 'aria-expanded' ) === 'true';
+	const navigationItem = buttonToggle.closest( '.wp-block-navigation-item' );
 
-	if ( isSubmenuOpen === 'true' ) {
-		closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );
+	if ( isSubmenuOpen ) {
+		closeSubmenus( navigationItem );
 	} else {
 		// Close all sibling submenus.
-		const parentElement = buttonToggle.closest(
-			'.wp-block-navigation-item'
-		);
 		const navigationParent = buttonToggle.closest(
 			'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
 		);
 		navigationParent
 			.querySelectorAll( '.wp-block-navigation-item' )
-			.forEach( function ( child ) {
-				if ( child !== parentElement ) {
+			.forEach( ( child ) => {
+				if ( child !== navigationItem ) {
 					closeSubmenus( child );
 				}
 			} );
+
 		// Open submenu.
 		buttonToggle.setAttribute( 'aria-expanded', 'true' );
+		hasOpenSubmenu = true;
 	}
 }
 
-// Necessary for some themes such as TT1 Blocks, where
-// scripts could be loaded before the body.
-window.addEventListener( 'load', () => {
-	const submenuButtons = document.querySelectorAll(
-		'.wp-block-navigation-submenu__toggle'
-	);
+// Open on button click or close on click outside.
+document.addEventListener(
+	'click',
+	function ( event ) {
+		const target = event.target;
+		const button = target.closest( '.wp-block-navigation-submenu__toggle' );
 
-	submenuButtons.forEach( function ( button ) {
-		button.addEventListener( 'click', toggleSubmenuOnClick );
-	} );
+		// Close any other open submenus.
+		if ( hasOpenSubmenu ) {
+			const navigationBlocks = document.querySelectorAll(
+				'.wp-block-navigation'
+			);
+			navigationBlocks.forEach( function ( block ) {
+				if ( ! block.contains( target ) ) {
+					closeSubmenus( block );
+				}
+			} );
+		}
+
+		// Now open the submenu if one was clicked.
+		if ( button instanceof HTMLButtonElement ) {
+			toggleSubmenuOnClick( button );
+		}
+	},
+	{ passive: true }
+);
+
+// Close on focus outside or escape key.
+document.addEventListener(
+	'keyup',
+	function ( event ) {
+		// Abort if there aren't any submenus open anyway.
+		if ( ! hasOpenSubmenu ) {
+			return;
+		}
 
-	// Close on click outside.
-	document.addEventListener( 'click', function ( event ) {
-		const navigationBlocks = document.querySelectorAll(
-			'.wp-block-navigation'
-		);
-		navigationBlocks.forEach( function ( block ) {
-			if ( ! block.contains( event.target ) ) {
-				closeSubmenus( block );
-			}
-		} );
-	} );
-	// Close on focus outside or escape key.
-	document.addEventListener( 'keyup', function ( event ) {
 		const submenuBlocks = document.querySelectorAll(
 			'.wp-block-navigation-item.has-child'
 		);
@@ -70,5 +102,6 @@ window.addEventListener( 'load', () => {
 				toggle?.focus();
 			}
 		} );
-	} );
-} );
+	},
+	{ passive: true }
+);

package/src/paragraph/test/edit.native.js

@@ -13,6 +13,8 @@ import {
 	setupCoreBlocks,
 	waitFor,
 	within,
+	withFakeTimers,
+	waitForElementToBeRemoved,
 } from 'test/helpers';
 import Clipboard from '@react-native-clipboard/clipboard';
 
@@ -26,6 +28,19 @@ import { ENTER } from '@wordpress/keycodes';
  */
 import Paragraph from '../edit';
 
+// Mock debounce to prevent potentially belated state updates.
+jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
+	debounce: ( fn ) => {
+		fn.cancel = jest.fn();
+		return fn;
+	},
+} ) );
+// Mock link suggestions that are fetched by the link picker
+// when typing a search query.
+jest.mock( '@wordpress/core-data/src/fetch', () => ( {
+	__experimentalFetchLinkSuggestions: jest.fn().mockResolvedValue( [ {} ] ),
+} ) );
+
 setupCoreBlocks();
 
 const getTestComponentWithContent = ( content ) => {
@@ -238,26 +253,27 @@ describe( 'Paragraph block', () => {
 		// Act
 		const paragraphBlock = getBlock( screen, 'Paragraph' );
 		fireEvent.press( paragraphBlock );
-		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
-		await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
-		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
-		await act( () =>
-			fireEvent.press(
-				screen.getByLabelText( 'Link to, Search or type URL' )
-			)
-		);
-		fireEvent.changeText(
-			screen.getByPlaceholderText( 'Search or type URL' ),
-			'wordpress.org'
-		);
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+
 		fireEvent.changeText(
-			screen.getByPlaceholderText( 'Add link text', { hidden: true } ),
+			screen.getByPlaceholderText( 'Add link text' ),
 			'WordPress'
 		);
-		jest.useFakeTimers();
-		fireEvent.press( screen.getByLabelText( 'Apply' ) );
-		// Await link picker navigation delay
-		act( () => jest.runOnlyPendingTimers() );
+		fireEvent.press(
+			screen.getByLabelText( 'Link to, Search or type URL' )
+		);
+		const typeURLInput = await waitFor( () =>
+			screen.getByPlaceholderText( 'Search or type URL' )
+		);
+		fireEvent.changeText( typeURLInput, 'wordpress.org' );
+		await waitForElementToBeRemoved( () =>
+			screen.getByTestId( 'link-picker-loading' )
+		);
+		// Back navigation from link picker uses `setTimeout`
+		await withFakeTimers( () => {
+			fireEvent.press( screen.getByLabelText( 'Apply' ) );
+			act( () => jest.runOnlyPendingTimers() );
+		} );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
@@ -265,8 +281,6 @@ describe( 'Paragraph block', () => {
 		<p><a href="http://wordpress.org">WordPress</a></p>
 		<!-- /wp:paragraph -->"
 	` );
-
-		jest.useRealTimers();
 	} );
 
 	it( 'should link text with selection', async () => {
@@ -287,22 +301,22 @@ describe( 'Paragraph block', () => {
 				finalSelectionEnd: 7,
 			}
 		);
-		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
-		await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
-		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
-		await act( () =>
-			fireEvent.press(
-				screen.getByLabelText( 'Link to, Search or type URL' )
-			)
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+		fireEvent.press(
+			screen.getByLabelText( 'Link to, Search or type URL' )
 		);
-		fireEvent.changeText(
-			screen.getByPlaceholderText( 'Search or type URL' ),
-			'wordpress.org'
+		const typeURLInput = await waitFor( () =>
+			screen.getByPlaceholderText( 'Search or type URL' )
 		);
-		jest.useFakeTimers();
-		fireEvent.press( screen.getByLabelText( 'Apply' ) );
-		// Await link picker navigation delay
-		act( () => jest.runOnlyPendingTimers() );
+		fireEvent.changeText( typeURLInput, 'wordpress.org' );
+		await waitForElementToBeRemoved( () =>
+			screen.getByTestId( 'link-picker-loading' )
+		);
+		// Back navigation from link picker uses `setTimeout`
+		await withFakeTimers( () => {
+			fireEvent.press( screen.getByLabelText( 'Apply' ) );
+			act( () => jest.runOnlyPendingTimers() );
+		} );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
@@ -310,8 +324,6 @@ describe( 'Paragraph block', () => {
 		<p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
 		<!-- /wp:paragraph -->"
 	` );
-
-		jest.useRealTimers();
 	} );
 
 	it( 'should link text with clipboard contents', async () => {
@@ -402,6 +414,10 @@ describe( 'Paragraph block', () => {
 
 		// Tap one color
 		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		// Dismiss the Block Settings modal.
 		fireEvent( blockSettingsModal, 'backdropPress' );
@@ -657,6 +673,10 @@ describe( 'Paragraph block', () => {
 		);
 		fireEvent.press( screen.getByLabelText( 'Text color' ) );
 		fireEvent.press( await screen.findByLabelText( 'Tertiary' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `