@wordpress/block-library 8.3.6 → 8.5.0

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -120,56 +120,59 @@ function useConvertClassicToBlockMenu( clientId ) {
 		return navigationMenu;
 	}
 
-	const convert = useCallback( async ( menuId, menuName, postStatus ) => {
-		// Check whether this classic menu is being imported already.
-		if ( classicMenuBeingConvertedId === menuId ) {
-			return;
-		}
-
-		// Set the ID for the currently importing classic menu.
-		classicMenuBeingConvertedId = menuId;
-
-		if ( ! menuId || ! menuName ) {
-			setError( 'Unable to convert menu. Missing menu details.' );
-			setStatus( CLASSIC_MENU_CONVERSION_ERROR );
-			return;
-		}
-
-		setStatus( CLASSIC_MENU_CONVERSION_PENDING );
-		setError( null );
-
-		return await convertClassicMenuToBlockMenu(
-			menuId,
-			menuName,
-			postStatus
-		)
-			.then( ( navigationMenu ) => {
-				setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
-				// Reset the ID for the currently importing classic menu.
-				classicMenuBeingConvertedId = null;
-				return navigationMenu;
-			} )
-			.catch( ( err ) => {
-				setError( err?.message );
-				// Reset the ID for the currently importing classic menu.
+	const convert = useCallback(
+		async ( menuId, menuName, postStatus ) => {
+			// Check whether this classic menu is being imported already.
+			if ( classicMenuBeingConvertedId === menuId ) {
+				return;
+			}
+
+			// Set the ID for the currently importing classic menu.
+			classicMenuBeingConvertedId = menuId;
+
+			if ( ! menuId || ! menuName ) {
+				setError( 'Unable to convert menu. Missing menu details.' );
 				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+				return;
+			}
 
-				// Reset the ID for the currently importing classic menu.
-				classicMenuBeingConvertedId = null;
-
-				// Rethrow error for debugging.
-				throw new Error(
-					sprintf(
-						// translators: %s: the name of a menu (e.g. Header navigation).
-						__( `Unable to create Navigation Menu "%s".` ),
-						menuName
-					),
-					{
-						cause: err,
-					}
-				);
-			} );
-	}, [] );
+			setStatus( CLASSIC_MENU_CONVERSION_PENDING );
+			setError( null );
+
+			return await convertClassicMenuToBlockMenu(
+				menuId,
+				menuName,
+				postStatus
+			)
+				.then( ( navigationMenu ) => {
+					setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+					// Reset the ID for the currently importing classic menu.
+					classicMenuBeingConvertedId = null;
+					return navigationMenu;
+				} )
+				.catch( ( err ) => {
+					setError( err?.message );
+					// Reset the ID for the currently importing classic menu.
+					setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+
+					// Reset the ID for the currently importing classic menu.
+					classicMenuBeingConvertedId = null;
+
+					// Rethrow error for debugging.
+					throw new Error(
+						sprintf(
+							// translators: %s: the name of a menu (e.g. Header navigation).
+							__( `Unable to create Navigation Menu "%s".` ),
+							menuName
+						),
+						{
+							cause: err,
+						}
+					);
+				} );
+		},
+		[ convertClassicMenuToBlockMenu ]
+	);
 
 	return {
 		convert,

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

@@ -90,7 +90,7 @@ export default function useCreateNavigationMenu( clientId ) {
 					} );
 				} );
 		},
-		[ serialize, saveEntityRecord ]
+		[ serialize, saveEntityRecord, editEntityRecord, generateDefaultTitle ]
 	);
 
 	return {

package/src/navigation/edit/use-generate-default-navigation-title.js

@@ -75,5 +75,5 @@ export default function useGenerateDefaultNavigationTitle( clientId ) {
 				: title;
 
 		return titleWithCount || '';
-	}, [ isDisabled, area ] );
+	}, [ isDisabled, area, registry ] );
 }

package/src/navigation/edit/use-navigation-notice.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticeStore } from '@wordpress/notices';
 
@@ -10,26 +10,29 @@ function useNavigationNotice( { name, message = '' } = {} ) {
 
 	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
 
-	const showNotice = ( customMsg ) => {
-		if ( noticeRef.current ) {
-			return;
-		}
+	const showNotice = useCallback(
+		( customMsg ) => {
+			if ( noticeRef.current ) {
+				return;
+			}
 
-		noticeRef.current = name;
+			noticeRef.current = name;
 
-		createWarningNotice( customMsg || message, {
-			id: noticeRef.current,
-			type: 'snackbar',
-		} );
-	};
+			createWarningNotice( customMsg || message, {
+				id: noticeRef.current,
+				type: 'snackbar',
+			} );
+		},
+		[ noticeRef, createWarningNotice ]
+	);
 
-	const hideNotice = () => {
+	const hideNotice = useCallback( () => {
 		if ( ! noticeRef.current ) {
 			return;
 		}
 		removeNotice( noticeRef.current );
 		noticeRef.current = null;
-	};
+	}, [ noticeRef, removeNotice ] );
 
 	return [ showNotice, hideNotice ];
 }

package/src/navigation/index.php

@@ -373,12 +373,14 @@ function block_core_navigation_get_most_recently_published_navigation() {
 
 	// Default to the most recently created menu.
 	$parsed_args = array(
-		'post_type'      => 'wp_navigation',
-		'no_found_rows'  => true,
-		'order'          => 'DESC',
-		'orderby'        => 'date',
-		'post_status'    => 'publish',
-		'posts_per_page' => 1, // get only the most recent.
+		'post_type'              => 'wp_navigation',
+		'no_found_rows'          => true,
+		'update_post_meta_cache' => false,
+		'update_post_term_cache' => false,
+		'order'                  => 'DESC',
+		'orderby'                => 'date',
+		'post_status'            => 'publish',
+		'posts_per_page'         => 1, // get only the most recent.
 	);
 
 	$navigation_post = new WP_Query( $parsed_args );
@@ -429,6 +431,37 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
 	return false;
 }
 
+/**
+ * Create and returns a navigation menu containing a page-list as a fallback.
+ *
+ * @return array the newly created navigation menu.
+ */
+function block_core_navigation_get_default_pages_fallback() {
+	$registry = WP_Block_Type_Registry::get_instance();
+
+	// If `core/page-list` is not registered then use empty blocks.
+	$default_blocks = $registry->is_registered( 'core/page-list' ) ? '<!-- wp:page-list /-->' : '';
+
+	// Create a new navigation menu from the fallback blocks.
+	$wp_insert_post_result = wp_insert_post(
+		array(
+			'post_content' => $default_blocks,
+			'post_title'   => 'Navigation', // TODO - use the template slug in future.
+			'post_name'    => 'Navigation', // TODO - use the template slug in future.
+			'post_status'  => 'publish',
+			'post_type'    => 'wp_navigation',
+		),
+		true // So that we can check whether the result is an error.
+	);
+
+	if ( is_wp_error( $wp_insert_post_result ) ) {
+		return;
+	}
+
+	// Fetch the most recently published navigation which will be the default one created above.
+	return block_core_navigation_get_most_recently_published_navigation();
+}
+
 /**
  * Retrieves the appropriate fallback to be used on the front of the
  * site when there is no menu assigned to the Nav block.
@@ -439,19 +472,7 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
  * @return array the array of blocks to be used as a fallback.
  */
 function block_core_navigation_get_fallback_blocks() {
-	$page_list_fallback = array(
-		array(
-			'blockName' => 'core/page-list',
-		),
-	);
-
-	$registry = WP_Block_Type_Registry::get_instance();
-
-	// If `core/page-list` is not registered then return empty blocks.
-	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
-
-	// Default to a list of Pages.
-
+	// Get the most recently published Navigation post.
 	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
 	// If there are no navigation posts then try to find a classic menu
@@ -460,16 +481,21 @@ function block_core_navigation_get_fallback_blocks() {
 		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
 	}
 
-	// Use the first non-empty Navigation as fallback if available.
+	// If there are no navigation posts then default to a list of Pages.
+	if ( ! $navigation_post ) {
+		$navigation_post = block_core_navigation_get_default_pages_fallback();
+	}
+
+	// Use the first non-empty Navigation as fallback, there should always be one.
 	if ( $navigation_post ) {
 		$parsed_blocks  = parse_blocks( $navigation_post->post_content );
 		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
-
-		// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
-		// In this case default to the (Page List) fallback.
-		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
 	}
 
+	// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
+	// In this case default empty blocks.
+	$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : array();
+
 	/**
 	 * Filters the fallback experience for the Navigation block.
 	 *
@@ -529,7 +555,6 @@ function block_core_navigation_from_block_get_post_ids( $block ) {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation( $attributes, $content, $block ) {
-
 	static $seen_menu_names = array();
 
 	// Flag used to indicate whether the rendered output is considered to be

package/src/navigation/use-navigation-menu.js

@@ -24,7 +24,7 @@ export default function useNavigationMenu( ref ) {
 				navigationMenus,
 				isResolvingNavigationMenus,
 				hasResolvedNavigationMenus,
-			} = selectNavigationMenus( select, ref );
+			} = selectNavigationMenus( select );
 
 			const {
 				navigationMenu,

package/src/navigation-link/edit.js

@@ -315,12 +315,17 @@ export default function NavigationLinkEdit( {
 	 */
 	function removeLink() {
 		// Reset all attributes that comprise the link.
+		// It is critical that all attributes are reset
+		// to their default values otherwise this may
+		// in advertently trigger side effects because
+		// the values will have "changed".
 		setAttributes( {
-			url: '',
-			label: '',
-			id: '',
-			kind: '',
-			type: '',
+			url: undefined,
+			label: undefined,
+			id: undefined,
+			kind: undefined,
+			type: undefined,
+			opensInNewTab: false,
 		} );
 
 		// Close the link editing UI.

package/src/navigation-link/link-ui.js

@@ -165,6 +165,7 @@ export function LinkUI( props ) {
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
+			__unstableSlotName={ '__unstable-block-tools-after' }
 			shift
 		>
 			<LinkControl
@@ -198,6 +199,7 @@ export function LinkUI( props ) {
 				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
 				onChange={ props.onChange }
 				onRemove={ props.onRemove }
+				onCancel={ props.onCancel }
 				renderControlBottom={
 					! url
 						? () => (

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
-Object {
+{
   "extraProp": "extraProp",
   "name": "core/navigation-link",
-  "variations": Array [
-    Object {
-      "attributes": Object {},
+  "variations": [
+    {
+      "attributes": {},
       "description": "A link to a custom URL.",
       "icon": <SVG
         viewBox="0 0 24 24"
@@ -20,8 +20,8 @@ Object {
       "name": "link",
       "title": "Custom Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "post",
       },
       "description": "A link to a post.",
@@ -37,8 +37,8 @@ Object {
       "name": "post",
       "title": "Post Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "page",
       },
       "description": "A link to a page.",
@@ -54,8 +54,8 @@ Object {
       "name": "page",
       "title": "Page Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "category",
       },
       "description": "A link to a category.",
@@ -73,8 +73,8 @@ Object {
       "name": "category",
       "title": "Category Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "tag",
       },
       "description": "A link to a tag.",

package/src/page-list/block.json

@@ -33,6 +33,7 @@
 		"openSubmenusOnClick"
 	],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"typography": {

package/src/page-list/convert-to-links-modal.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const convertDescription = __(
+	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
+);
+
+export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
+	return (
+		<Modal
+			onRequestClose={ onClose }
+			title={ __( 'Edit this menu' ) }
+			className={ 'wp-block-page-list-modal' }
+			aria={ {
+				describedby: 'wp-block-page-list-modal__description',
+			} }
+		>
+			<p id={ 'wp-block-page-list-modal__description' }>
+				{ convertDescription }
+			</p>
+			<div className="wp-block-page-list-modal-buttons">
+				<Button variant="tertiary" onClick={ onClose }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					variant="primary"
+					disabled={ disabled }
+					onClick={ onClick }
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			</div>
+		</Modal>
+	);
+}

package/src/page-list/edit.js

@@ -23,7 +23,6 @@ import {
 	Notice,
 	ComboboxControl,
 	Button,
-	Modal,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useState, useEffect } from '@wordpress/element';
@@ -34,16 +33,15 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { useConvertToNavigationLinks } from './use-convert-to-navigation-links';
+import {
+	convertDescription,
+	ConvertToLinksModal,
+} from './convert-to-links-modal';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 const NOOP = () => {};
-
-const convertDescription = __(
-	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
-);
-
 function BlockContent( {
 	blockProps,
 	innerBlocksProps,
@@ -113,7 +111,7 @@ function BlockContent( {
 	}
 }
 
-function ConvertToLinksModal( { onClick, disabled } ) {
+function ConvertToLinks( { onClick, disabled } ) {
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
@@ -126,30 +124,11 @@ function ConvertToLinksModal( { onClick, disabled } ) {
 				</ToolbarButton>
 			</BlockControls>
 			{ isOpen && (
-				<Modal
-					onRequestClose={ closeModal }
-					title={ __( 'Edit this menu' ) }
-					className={ 'wp-block-page-list-modal' }
-					aria={ {
-						describedby: 'wp-block-page-list-modal__description',
-					} }
-				>
-					<p id={ 'wp-block-page-list-modal__description' }>
-						{ convertDescription }
-					</p>
-					<div className="wp-block-page-list-modal-buttons">
-						<Button variant="tertiary" onClick={ closeModal }>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							disabled={ disabled }
-							onClick={ onClick }
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					</div>
-				</Modal>
+				<ConvertToLinksModal
+					onClick={ onClick }
+					onClose={ closeModal }
+					disabled={ disabled }
+				/>
 			) }
 		</>
 	);
@@ -182,11 +161,6 @@ export default function PageListEdit( {
 		pages?.length > 0 &&
 		pages?.length <= MAX_PAGE_COUNT;
 
-	const convertToNavigationLinks = useConvertToNavigationLinks( {
-		clientId,
-		pages,
-	} );
-
 	const pagesByParentId = useMemo( () => {
 		if ( pages === null ) {
 			return new Map();
@@ -213,6 +187,12 @@ export default function PageListEdit( {
 		}, new Map() );
 	}, [ pages ] );
 
+	const convertToNavigationLinks = useConvertToNavigationLinks( {
+		clientId,
+		pages,
+		parentPageID,
+	} );
+
 	const blockProps = useBlockProps( {
 		className: classnames( 'wp-block-page-list', {
 			'has-text-color': !! context.textColor,
@@ -343,7 +323,7 @@ export default function PageListEdit( {
 				) }
 			</InspectorControls>
 			{ allowConvertToLinks && (
-				<ConvertToLinksModal
+				<ConvertToLinks
 					disabled={ ! hasResolvedPages }
 					onClick={ convertToNavigationLinks }
 				/>

package/src/page-list/index.php

@@ -150,7 +150,8 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
-	$markup = '';
+	$front_page_id = (int) get_option( 'page_on_front' );
+	$markup        = '';
 	foreach ( (array) $nested_pages as $page ) {
 		$css_class       = $page['is_active'] ? ' current-menu-item' : '';
 		$aria_current    = $page['is_active'] ? ' aria-current="page"' : '';
@@ -181,7 +182,6 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			}
 		}
 
-		$front_page_id = (int) get_option( 'page_on_front' );
 		if ( (int) $page['page_id'] === $front_page_id ) {
 			$css_class .= ' menu-item-home';
 		}
@@ -282,14 +282,14 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 			$pages_with_children[ $page->post_parent ][ $page->ID ] = array(
 				'page_id'   => $page->ID,
 				'title'     => $page->post_title,
-				'link'      => get_permalink( $page->ID ),
+				'link'      => get_permalink( $page ),
 				'is_active' => $is_active,
 			);
 		} else {
 			$top_level_pages[ $page->ID ] = array(
 				'page_id'   => $page->ID,
 				'title'     => $page->post_title,
-				'link'      => get_permalink( $page->ID ),
+				'link'      => get_permalink( $page ),
 				'is_active' => $is_active,
 			);