@wordpress/block-library 7.10.0 → 7.12.2-next.d6164808d3.0

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

@@ -10,7 +10,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
-import { forwardRef, useCallback, useMemo } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,7 +21,8 @@ import useNavigationEntities from '../use-navigation-entities';
 function NavigationMenuSelector(
 	{
 		currentMenuId,
-		onSelect,
+		onSelectNavigationMenu,
+		onSelectClassicMenu,
 		onCreateNew,
 		showManageActions = false,
 		actionLabel,
@@ -43,24 +44,6 @@ function NavigationMenuSelector(
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
-	const handleSelect = useCallback(
-		( _onClose ) => ( selectedId ) => {
-			_onClose();
-			onSelect(
-				navigationMenus?.find( ( post ) => post.id === selectedId )
-			);
-		},
-		[ navigationMenus ]
-	);
-
-	const handleSelectClassic = useCallback(
-		( _onClose, menu ) => () => {
-			_onClose();
-			onSelect( menu );
-		},
-		[]
-	);
-
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title } ) => {
@@ -83,7 +66,7 @@ function NavigationMenuSelector(
 
 	// Show the selector if:
 	// - has switch or create permissions and there are block or classic menus.
-	// - user has create or update permisisons and component should show the menu actions.
+	// - user has create or update permissions and component should show the menu actions.
 	const showSelectMenus =
 		( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
 			( hasNavigationMenus || hasClassicMenus ) ) ||
@@ -107,7 +90,10 @@ function NavigationMenuSelector(
 						<MenuGroup label={ __( 'Menus' ) }>
 							<MenuItemsChoice
 								value={ currentMenuId }
-								onSelect={ handleSelect( onClose ) }
+								onSelect={ ( menuId ) => {
+									onClose();
+									onSelectNavigationMenu( menuId );
+								} }
 								choices={ menuChoices }
 							/>
 						</MenuGroup>
@@ -118,10 +104,10 @@ function NavigationMenuSelector(
 								const label = decodeEntities( menu.name );
 								return (
 									<MenuItem
-										onClick={ handleSelectClassic(
-											onClose,
-											menu
-										) }
+										onClick={ () => {
+											onClose();
+											onSelectClassicMenu( menu );
+										} }
 										key={ menu.id }
 										aria-label={ sprintf(
 											createActionLabel,

package/src/navigation/edit/placeholder/index.js

@@ -20,7 +20,8 @@ export default function NavigationPlaceholder( {
 	clientId,
 	canUserCreateNavigationMenu = false,
 	isResolvingCanUserCreateNavigationMenu,
-	onFinish,
+	onSelectNavigationMenu,
+	onSelectClassicMenu,
 	onCreateEmpty,
 } ) {
 	const { isResolvingMenus, hasResolvedMenus } = useNavigationEntities();
@@ -67,7 +68,8 @@ export default function NavigationPlaceholder( {
 						<NavigationMenuSelector
 							currentMenuId={ currentMenuId }
 							clientId={ clientId }
-							onSelect={ onFinish }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onSelectClassicMenu={ onSelectClassicMenu }
 							toggleProps={ {
 								variant: 'tertiary',
 								iconPosition: 'right',

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

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -22,21 +23,41 @@ export default function ResponsiveWrapper( {
 	isResponsive,
 	onToggle,
 	isHiddenByDefault,
-	classNames,
-	styles,
+	overlayBackgroundColor,
+	overlayTextColor,
 	hasIcon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
 	}
+
 	const responsiveContainerClasses = classnames(
 		'wp-block-navigation__responsive-container',
-		classNames,
 		{
+			'has-text-color':
+				!! overlayTextColor.color || !! overlayTextColor?.class,
+			[ getColorClassName( 'color', overlayTextColor?.slug ) ]:
+				!! overlayTextColor?.slug,
+			'has-background':
+				!! overlayBackgroundColor.color ||
+				overlayBackgroundColor?.class,
+			[ getColorClassName(
+				'background-color',
+				overlayBackgroundColor?.slug
+			) ]: !! overlayBackgroundColor?.slug,
 			'is-menu-open': isOpen,
 			'hidden-by-default': isHiddenByDefault,
 		}
 	);
+
+	const styles = {
+		color: ! overlayTextColor?.slug && overlayTextColor?.color,
+		backgroundColor:
+			! overlayBackgroundColor?.slug &&
+			overlayBackgroundColor?.color &&
+			overlayBackgroundColor.color,
+	};
+
 	const openButtonClasses = classnames(
 		'wp-block-navigation__responsive-container-open',
 		{ 'always-shown': isHiddenByDefault }

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -63,7 +63,9 @@ export default function UnsavedInnerBlocks( {
 	// 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".
-	const innerBlocksAreDirty = blocks !== originalBlocks.current;
+	// We also make sure the current innerBlocks had a chance to be set.
+	const innerBlocksAreDirty =
+		!! originalBlocks.current && blocks !== originalBlocks.current;
 
 	const shouldDirectInsert = useMemo(
 		() =>

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

@@ -23,7 +23,6 @@ function useConvertClassicToBlockMenu( clientId ) {
 	const registry = useRegistry();
 
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
-	const [ value, setValue ] = useState( null );
 	const [ error, setError ] = useState( null );
 
 	async function convertClassicMenuToBlockMenu( menuId, menuName ) {
@@ -88,47 +87,42 @@ function useConvertClassicToBlockMenu( clientId ) {
 		return navigationMenu;
 	}
 
-	const convert = useCallback(
-		( menuId, menuName ) => {
-			if ( ! menuId || ! menuName ) {
-				setError( 'Unable to convert menu. Missing menu details.' );
+	const convert = useCallback( async ( menuId, menuName ) => {
+		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 )
+			.then( ( navigationMenu ) => {
+				setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+				return navigationMenu;
+			} )
+			.catch( ( err ) => {
+				setError( err?.message );
 				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
-				return;
-			}
-
-			setStatus( CLASSIC_MENU_CONVERSION_PENDING );
-			setValue( null );
-			setError( null );
-
-			convertClassicMenuToBlockMenu( menuId, menuName )
-				.then( ( navMenu ) => {
-					setValue( navMenu );
-					setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
-				} )
-				.catch( ( err ) => {
-					setError( err?.message );
-					setStatus( CLASSIC_MENU_CONVERSION_ERROR );
-
-					// 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,
-						}
-					);
-				} );
-		},
-		[ clientId ]
-	);
+
+				// 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,
+					}
+				);
+			} );
+	}, [] );
 
 	return {
 		convert,
 		status,
-		value,
 		error,
 	};
 }

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

@@ -86,5 +86,9 @@ export default function useCreateNavigationMenu( clientId ) {
 		status,
 		value,
 		error,
+		isIdle: status === CREATE_NAVIGATION_MENU_IDLE,
+		isPending: status === CREATE_NAVIGATION_MENU_PENDING,
+		isSuccess: status === CREATE_NAVIGATION_MENU_SUCCESS,
+		isError: status === CREATE_NAVIGATION_MENU_ERROR,
 	};
 }

package/src/navigation/edit/use-inner-blocks.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const EMPTY_ARRAY = [];
+
+export function useInnerBlocks( clientId ) {
+	return useSelect(
+		( select ) => {
+			const { getBlock, getBlocks, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+
+			// This relies on the fact that `getBlock` won't return controlled
+			// inner blocks, while `getBlocks` does. It might be more stable to
+			// introduce a selector like `getUncontrolledInnerBlocks`, just in
+			// case `getBlock` is fixed.
+			const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks;
+
+			const _hasUncontrolledInnerBlocks =
+				!! _uncontrolledInnerBlocks?.length;
+			const _controlledInnerBlocks = _hasUncontrolledInnerBlocks
+				? EMPTY_ARRAY
+				: getBlocks( clientId );
+
+			return {
+				innerBlocks: _hasUncontrolledInnerBlocks
+					? _uncontrolledInnerBlocks
+					: _controlledInnerBlocks,
+				hasUncontrolledInnerBlocks: _hasUncontrolledInnerBlocks,
+				uncontrolledInnerBlocks: _uncontrolledInnerBlocks,
+				controlledInnerBlocks: _controlledInnerBlocks,
+				isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
+			};
+		},
+		[ clientId ]
+	);
+}

package/src/navigation/edit/utils.js

@@ -0,0 +1,30 @@
+function getComputedStyle( node ) {
+	return node.ownerDocument.defaultView.getComputedStyle( node );
+}
+
+export function detectColors(
+	colorsDetectionElement,
+	setColor,
+	setBackground
+) {
+	if ( ! colorsDetectionElement ) {
+		return;
+	}
+	setColor( getComputedStyle( colorsDetectionElement ).color );
+
+	let backgroundColorNode = colorsDetectionElement;
+	let backgroundColor =
+		getComputedStyle( backgroundColorNode ).backgroundColor;
+	while (
+		backgroundColor === 'rgba(0, 0, 0, 0)' &&
+		backgroundColorNode.parentNode &&
+		backgroundColorNode.parentNode.nodeType ===
+			backgroundColorNode.parentNode.ELEMENT_NODE
+	) {
+		backgroundColorNode = backgroundColorNode.parentNode;
+		backgroundColor =
+			getComputedStyle( backgroundColorNode ).backgroundColor;
+	}
+
+	setBackground( backgroundColor );
+}

package/src/navigation/editor.scss

@@ -200,9 +200,9 @@ $color-control-label-height: 20px;
 
 // Override inner padding on default appender.
 // This should be a temporary fix, to be replaced by improvements to
-// the sibling inserter.
+// the sibling inserter. Or by the dropdown appender that is used in Group, instead of the "Button block appender".
 // See https://github.com/WordPress/gutenberg/issues/37572.
-.wp-block-navigation .block-editor-button-block-appender {
+.wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
 	background-color: $gray-900;
 	color: $white;
 
@@ -520,6 +520,7 @@ body.editor-styles-wrapper
 // so focus is applied naturally on the block container.
 // It's important the right container has focus, otherwise you can't press
 // "Delete" to remove the block.
+.wp-block-navigation__responsive-container,
 .wp-block-navigation__responsive-close {
 	@include break-small() {
 		pointer-events: none;

package/src/navigation/index.php

@@ -250,29 +250,24 @@ function block_core_navigation_render_submenu_icon() {
 
 
 /**
- * Finds the first non-empty `wp_navigation` Post.
+ * Finds the most recently published `wp_navigation` Post.
  *
  * @return WP_Post|null the first non-empty Navigation or null.
  */
-function block_core_navigation_get_first_non_empty_navigation() {
-	// Order and orderby args set to mirror those in `wp_get_nav_menus`
-	// see:
-	// - https://github.com/WordPress/wordpress-develop/blob/ba943e113d3b31b121f77a2d30aebe14b047c69d/src/wp-includes/nav-menu.php#L613-L619.
-	// - https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters.
+function block_core_navigation_get_most_recently_published_navigation() {
+	// We default to the most recently created menu.
 	$parsed_args = array(
 		'post_type'      => 'wp_navigation',
 		'no_found_rows'  => true,
-		'order'          => 'ASC',
-		'orderby'        => 'name',
+		'order'          => 'DESC',
+		'orderby'        => 'date',
 		'post_status'    => 'publish',
-		'posts_per_page' => 20, // Try the first 20 posts.
+		'posts_per_page' => 1, // get only the most recent.
 	);
 
-	$navigation_posts = new WP_Query( $parsed_args );
-	foreach ( $navigation_posts->posts as $navigation_post ) {
-		if ( has_blocks( $navigation_post ) ) {
-			return $navigation_post;
-		}
+	$navigation_post = new WP_Query( $parsed_args );
+	if ( count( $navigation_post->posts ) > 0 ) {
+		return $navigation_post->posts[0];
 	}
 
 	return null;
@@ -325,7 +320,7 @@ function block_core_navigation_get_fallback_blocks() {
 
 	// Default to a list of Pages.
 
-	$navigation_post = block_core_navigation_get_first_non_empty_navigation();
+	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
 	// Prefer using the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
@@ -377,7 +372,7 @@ function block_core_navigation_from_block_get_post_ids( $block ) {
 	}
 
 	if ( 'core/navigation-link' === $block->name || 'core/navigation-submenu' === $block->name ) {
-		if ( $block->attributes && isset( $block->attributes['kind'] ) && 'post-type' === $block->attributes['kind'] ) {
+		if ( $block->attributes && isset( $block->attributes['kind'] ) && 'post-type' === $block->attributes['kind'] && isset( $block->attributes['id'] ) ) {
 			$post_ids[] = $block->attributes['id'];
 		}
 	}
@@ -472,6 +467,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			return '';
 		}
 
+		// Only published posts are valid. If this is changed then a corresponding change
+		// must also be implemented in `use-navigation-menu.js`.
+		if ( 'publish' !== $navigation_post->post_status ) {
+			return '';
+		}
+
 		$nav_menu_name = $navigation_post->post_title;
 
 		if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {

package/src/navigation/menu-items-to-blocks.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { sortBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -40,7 +35,9 @@ function mapMenuItemsToBlocks( menuItems ) {
 	let mapping = {};
 
 	// The menuItem should be in menu_order sort order.
-	const sortedItems = sortBy( menuItems, 'menu_order' );
+	const sortedItems = [ ...menuItems ].sort(
+		( a, b ) => a.menu_order - b.menu_order
+	);
 
 	const innerBlocks = sortedItems.map( ( menuItem ) => {
 		if ( menuItem.type === 'block' ) {

package/src/navigation/style.scss

@@ -45,9 +45,6 @@ $navigation-icon-size: 24px;
 	// but still allow them to be overridden by user-set colors.
 	.wp-block-navigation-item__content {
 		display: block;
-
-		// Set the default menu item padding to zero, to allow text-only buttons.
-		padding: 0;
 	}
 
 	// The following rules provide class based application of user selected text
@@ -154,10 +151,7 @@ $navigation-icon-size: 24px;
 // Styles for submenu flyout.
 // These are separated out with reduced specificity to allow better inheritance from Global Styles.
 .wp-block-navigation .has-child {
-	// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
-	// That way if padding is set in theme.json, it still wins.
-	// https://css-tricks.com/almanac/selectors/w/where/
-	:where(.wp-block-navigation__submenu-container) {
+	.wp-block-navigation__submenu-container {
 		background-color: inherit;
 		color: inherit;
 		position: absolute;
@@ -233,7 +227,7 @@ $navigation-icon-size: 24px;
 
 	// Custom menu items.
 	// Show submenus on hover unless they open on click.
-	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
+	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -243,7 +237,7 @@ $navigation-icon-size: 24px;
 	}
 
 	// Keep submenus open when focus is within.
-	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
+	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -339,17 +333,6 @@ button.wp-block-navigation-item__content {
 	gap: inherit;
 }
 
-// Menu items with background.
-// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
-// That way if padding is set in theme.json, it still wins.
-// https://css-tricks.com/almanac/selectors/w/where/
-.wp-block-navigation:where(.has-background) {
-	&,
-	.wp-block-navigation .wp-block-page-list,
-	.wp-block-navigation__container {
-		gap: inherit;
-	}
-}
 
 /**
  * Paddings
@@ -358,18 +341,22 @@ button.wp-block-navigation-item__content {
 // We use :where to keep specificity minimal, yet still scope it to only the navigation block.
 // That way if padding is set in theme.json, it still wins.
 // https://css-tricks.com/almanac/selectors/w/where/
+// Note: .wp-block-navigation-item targets both Page List and custom menu items. .wp-block-navigation-link targets only custom.
 
 // When the menu has a background, items have paddings, reduce margins to compensate.
 // Treat margins and paddings differently when the block has a background.
-.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content {
+:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),
+:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)) {
 	padding: 0.5em 1em;
 }
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
-.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
 	padding: 0.5em 1em;
 }
 
+
 /**
  * Justifications.
  */
@@ -452,6 +439,10 @@ button.wp-block-navigation-item__content {
 	right: 0;
 	bottom: 0;
 
+	.wp-block-navigation-link a {
+		color: inherit;
+	}
+
 	.wp-block-navigation__responsive-container-content {
 		display: flex;
 		flex-wrap: var(--navigation-layout-wrap, wrap);

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

@@ -3,7 +3,7 @@
  */
 import {
 	store as coreStore,
-	__experimentalUseResourcePermissions as useResourcePermissions,
+	useResourcePermissions,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
@@ -12,10 +12,13 @@ export default function useNavigationMenu( ref ) {
 
 	return useSelect(
 		( select ) => {
-			const [
-				hasResolvedPermissions,
-				{ canCreate, canUpdate, canDelete, isResolving },
-			] = permissions;
+			const {
+				canCreate,
+				canUpdate,
+				canDelete,
+				isResolving,
+				hasResolved,
+			} = permissions;
 
 			const {
 				navigationMenus,
@@ -44,16 +47,16 @@ export default function useNavigationMenu( ref ) {
 
 				canUserCreateNavigationMenu: canCreate,
 				isResolvingCanUserCreateNavigationMenu: isResolving,
-				hasResolvedCanUserCreateNavigationMenu: hasResolvedPermissions,
+				hasResolvedCanUserCreateNavigationMenu: hasResolved,
 
 				canUserUpdateNavigationMenu: canUpdate,
 				hasResolvedCanUserUpdateNavigationMenu: ref
-					? hasResolvedPermissions
+					? hasResolved
 					: undefined,
 
 				canUserDeleteNavigationMenu: canDelete,
 				hasResolvedCanUserDeleteNavigationMenu: ref
-					? hasResolvedPermissions
+					? hasResolved
 					: undefined,
 			};
 		},
@@ -99,15 +102,19 @@ function selectExistingMenu( select, ref ) {
 		args
 	);
 
+	// Only published Navigation posts are considered valid.
+	// If this is changed then a corresponding change must also be made
+	// in the index.php file.
+	const isNavigationMenuPublished = editedNavigationMenu.status === 'publish';
+
 	return {
 		isNavigationMenuResolved: hasResolvedNavigationMenu,
-		isNavigationMenuMissing: hasResolvedNavigationMenu && ! navigationMenu,
+		isNavigationMenuMissing:
+			hasResolvedNavigationMenu &&
+			( ! navigationMenu || ! isNavigationMenuPublished ),
 
 		// getEditedEntityRecord will return the post regardless of status.
 		// Therefore if the found post is not published then we should ignore it.
-		navigationMenu:
-			editedNavigationMenu.status === 'publish'
-				? editedNavigationMenu
-				: null,
+		navigationMenu: isNavigationMenuPublished ? editedNavigationMenu : null,
 	};
 }