@wordpress/block-library 8.4.0 → 8.6.0

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

@@ -36,128 +36,72 @@ function useConvertClassicToBlockMenu( clientId ) {
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
 	const [ error, setError ] = useState( null );
 
-	async function convertClassicMenuToBlockMenu(
-		menuId,
-		menuName,
-		postStatus = 'publish'
-	) {
-		let navigationMenu;
-		let classicMenuItems;
-
-		// 1. Fetch the classic Menu items.
-		try {
-			classicMenuItems = await registry
-				.resolveSelect( coreStore )
-				.getMenuItems( {
-					menus: menuId,
-					per_page: -1,
-					context: 'view',
-				} );
-		} catch ( err ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to fetch classic menu "%s" from API.` ),
-					menuName
-				),
-				{
-					cause: err,
-				}
-			);
-		}
-
-		// Handle offline response which resolves to `null`.
-		if ( classicMenuItems === null ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to fetch classic menu "%s" from API.` ),
-					menuName
-				)
-			);
-		}
-
-		// 2. Convert the classic items into blocks.
-		const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
-
-		// 3. Create the `wp_navigation` Post with the blocks.
-		try {
-			navigationMenu = await createNavigationMenu(
-				menuName,
-				innerBlocks,
-				postStatus
-			);
-
-			/**
-			 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
-			 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
-			 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
-			 * without user interaction.
-			 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
-			 */
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu.id,
-				{
-					status: postStatus,
-				},
-				{ throwOnError: true }
-			);
-		} catch ( err ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to create Navigation Menu "%s".` ),
-					menuName
-				),
-				{
-					cause: err,
-				}
-			);
-		}
-
-		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.
-				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+	const convertClassicMenuToBlockMenu = useCallback(
+		async ( menuId, menuName, postStatus = 'publish' ) => {
+			let navigationMenu;
+			let classicMenuItems;
+
+			// 1. Fetch the classic Menu items.
+			try {
+				classicMenuItems = await registry
+					.resolveSelect( coreStore )
+					.getMenuItems( {
+						menus: menuId,
+						per_page: -1,
+						context: 'view',
+					} );
+			} catch ( err ) {
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to fetch classic menu "%s" from API.` ),
+						menuName
+					),
+					{
+						cause: err,
+					}
+				);
+			}
 
-				// Reset the ID for the currently importing classic menu.
-				classicMenuBeingConvertedId = null;
+			// Handle offline response which resolves to `null`.
+			if ( classicMenuItems === null ) {
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to fetch classic menu "%s" from API.` ),
+						menuName
+					)
+				);
+			}
 
-				// Rethrow error for debugging.
+			// 2. Convert the classic items into blocks.
+			const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
+
+			// 3. Create the `wp_navigation` Post with the blocks.
+			try {
+				navigationMenu = await createNavigationMenu(
+					menuName,
+					innerBlocks,
+					postStatus
+				);
+
+				/**
+				 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
+				 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
+				 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
+				 * without user interaction.
+				 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
+				 */
+				await editEntityRecord(
+					'postType',
+					'wp_navigation',
+					navigationMenu.id,
+					{
+						status: postStatus,
+					},
+					{ throwOnError: true }
+				);
+			} catch ( err ) {
 				throw new Error(
 					sprintf(
 						// translators: %s: the name of a menu (e.g. Header navigation).
@@ -168,8 +112,66 @@ function useConvertClassicToBlockMenu( clientId ) {
 						cause: err,
 					}
 				);
-			} );
-	}, [] );
+			}
+
+			return navigationMenu;
+		},
+		[ createNavigationMenu, editEntityRecord, registry ]
+	);
+
+	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.
+					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 ]
+		[ 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, message, name ]
+	);
 
-	const hideNotice = () => {
+	const hideNotice = useCallback( () => {
 		if ( ! noticeRef.current ) {
 			return;
 		}
 		removeNotice( noticeRef.current );
 		noticeRef.current = null;
-	};
+	}, [ noticeRef, removeNotice ] );
 
 	return [ showNotice, hideNotice ];
 }

package/src/navigation/editor.scss

@@ -39,8 +39,7 @@
 }
 
 // Only show the flyout on hover if the parent menu item is selected.
-.wp-block-navigation:not(.is-selected):not(.has-child-selected)
-.has-child:hover {
+.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
 	> .wp-block-navigation__submenu-container {
 		opacity: 0;
 		visibility: hidden;
@@ -49,6 +48,7 @@
 
 // Styles for submenu flyout.
 .has-child {
+
 	&.is-selected,
 	&.has-child-selected {
 		> .wp-block-navigation__submenu-container {
@@ -76,8 +76,7 @@
 	flex-direction: column;
 }
 
-.is-dragging-components-draggable
-.wp-block-navigation-link > .wp-block-navigation__container {
+.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
 	// Set opacity to 1 to still be able to show the draggable chip.
 	opacity: 1;
 	visibility: hidden;
@@ -117,6 +116,7 @@
  */
 
 $colors-selector-size: 22px;
+
 .block-library-colors-selector {
 	width: auto;
 
@@ -151,7 +151,7 @@ $colors-selector-size: 22px;
 		min-width: $colors-selector-size;
 		height: $colors-selector-size;
 		min-height: $colors-selector-size;
-		line-height: ( $colors-selector-size - 2 );
+		line-height: ($colors-selector-size - 2);
 		padding: 2px;
 
 		> svg {
@@ -161,6 +161,7 @@ $colors-selector-size: 22px;
 
 		// Styling icon color.
 		&.has-text-color {
+
 			> svg,
 			> svg path {
 				color: inherit;
@@ -171,6 +172,7 @@ $colors-selector-size: 22px;
 
 // Colors Selector Popover.
 $color-control-label-height: 20px;
+
 .block-library-colors-selector__popover {
 	.color-palette-controller-container {
 		padding: 16px;
@@ -222,13 +224,16 @@ $color-control-label-height: 20px;
 	0% {
 		opacity: 1;
 	}
+
 	50% {
 		opacity: 0.5;
 	}
+
 	100% {
 		opacity: 1;
 	}
 }
+
 // Unstyle some inherited placeholder component styles.
 .components-placeholder.wp-block-navigation-placeholder {
 	outline: none;
@@ -271,6 +276,7 @@ $color-control-label-height: 20px;
 	// against any background color.
 	color: currentColor;
 	background: transparent;
+
 	&::before {
 		content: "";
 		display: block;
@@ -338,6 +344,7 @@ $color-control-label-height: 20px;
 	// Hide the navigation indicator when in small contexts.
 	.is-small &,
 	.is-medium & {
+
 		.wp-block-navigation-placeholder__actions__indicator,
 		.wp-block-navigation-placeholder__actions__indicator + hr {
 			display: none;
@@ -427,15 +434,14 @@ $color-control-label-height: 20px;
 		}
 	}
 }
+
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
 .wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
-	top:
-		$admin-bar-height-big + $header-height + $block-toolbar-height +
-		$border-width;
+	top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 	@include break-medium() {
 		top: $admin-bar-height + $header-height + $border-width;
@@ -445,6 +451,7 @@ $color-control-label-height: 20px;
 	@include break-medium() {
 		left: $admin-sidebar-width-collapsed;
 	}
+
 	@include break-large() {
 		left: $admin-sidebar-width;
 	}
@@ -452,17 +459,13 @@ $color-control-label-height: 20px;
 
 .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 	@include break-medium() {
-		top:
-			$admin-bar-height + $header-height + $block-toolbar-height +
-			$border-width;
+		top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 	}
 }
 
 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
-	top:
-		$admin-bar-height + $header-height + $block-toolbar-height +
-		$border-width;
+	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 }
 
 .is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
@@ -473,9 +476,7 @@ $color-control-label-height: 20px;
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
-		top:
-			$admin-bar-height-big + $header-height + $block-toolbar-height +
-			$border-width;
+		top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 		@include break-medium() {
 			top: $header-height + $border-width;
@@ -495,8 +496,7 @@ $color-control-label-height: 20px;
 }
 
 // The iframe makes these rules a lot simpler.
-body.editor-styles-wrapper
-.wp-block-navigation__responsive-container.is-menu-open {
+body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;
@@ -536,6 +536,7 @@ body.editor-styles-wrapper
 .components-heading.wp-block-navigation-off-canvas-editor__title {
 	margin: 0;
 }
+
 .wp-block-navigation-off-canvas-editor__header {
 	margin-bottom: $grid-unit-10;
 }
@@ -552,6 +553,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
@@ -559,7 +561,7 @@ body.editor-styles-wrapper
 
 // Space spinner to give it breathing
 // room when block is selected and has focus outline.
-.wp-block-navigation .components-spinner {
+.wp-block-navigation__loading-indicator-container {
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
@@ -571,6 +573,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 1;
 	}
+
 	100% {
 		opacity: 0.5;
 	}

package/src/navigation/index.php

@@ -348,7 +348,7 @@ function block_core_navigation_maybe_use_classic_menu_fallback() {
 	$wp_insert_post_result = wp_insert_post(
 		array(
 			'post_content' => $classic_nav_menu_blocks,
-			'post_title'   => $classic_nav_menu->slug,
+			'post_title'   => $classic_nav_menu->name,
 			'post_name'    => $classic_nav_menu->slug,
 			'post_status'  => 'publish',
 			'post_type'    => 'wp_navigation',
@@ -453,7 +453,6 @@ function block_core_navigation_get_fallback_blocks() {
 	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
 
 	// Default to a list of Pages.
-
 	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
 	// If there are no navigation posts then try to find a classic menu
@@ -472,6 +471,10 @@ function block_core_navigation_get_fallback_blocks() {
 		$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.
 	 *
@@ -531,7 +534,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-link/edit.js

@@ -225,15 +225,6 @@ export default function NavigationLinkEdit( {
 		[ clientId ]
 	);
 
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelLink } );
-	}, [ isTopLevelLink ] );
-
 	/**
 	 * Transform to submenu block.
 	 */

package/src/navigation-link/index.php

@@ -9,18 +9,17 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_link_build_css_colors( $context, $attributes ) {
+function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;
@@ -174,13 +173,11 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_link_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
-		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;

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/navigation-submenu/edit.js

@@ -224,16 +224,6 @@ export default function NavigationSubmenuEdit( {
 		}
 	}, [] );
 
-	// Store the colors from context as attributes for rendering.
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelItem } );
-	}, [ isTopLevelItem ] );
-
 	/**
 	 * The hook shouldn't be necessary but due to a focus loss happening
 	 * when selecting a suggestion in the link popover, we force close on block unselection.