@wordpress/block-library 6.0.7 → 6.0.11

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

@@ -7,18 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useInnerBlocksProps } from '@wordpress/block-editor';
-import { serialize } from '@wordpress/blocks';
 import { Disabled, Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useContext, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
-import useTemplatePartAreaLabel from '../use-template-part-area-label';
+import useCreateNavigationMenu from './use-create-navigation-menu';
 
 const NOOP = () => {};
 const EMPTY_OBJECT = {};
@@ -51,7 +49,6 @@ export default function UnsavedInnerBlocks( {
 		onChange: NOOP,
 		onInput: NOOP,
 	} );
-	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const {
 		isSaving,
@@ -83,29 +80,7 @@ export default function UnsavedInnerBlocks( {
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const createNavigationMenu = useCallback(
-		async ( title ) => {
-			const record = {
-				title,
-				content: serialize( blocks ),
-				status: 'draft',
-			};
-
-			const navigationMenu = await saveEntityRecord(
-				'postType',
-				'wp_navigation',
-				record
-			);
-
-			return navigationMenu;
-		},
-		[ blocks, serialize, saveEntityRecord ]
-	);
-
-	// Because we can't conditionally call hooks, pass an undefined client id
-	// arg to bypass the expensive `useTemplateArea` code. The hook will return
-	// early.
-	const area = useTemplatePartAreaLabel( isDisabled ? undefined : clientId );
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( async () => {
@@ -134,33 +109,7 @@ export default function UnsavedInnerBlocks( {
 		}
 
 		savingLock.current = true;
-		const title = area
-			? sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( '%s navigation' ),
-					area
-			  )
-			: // translators: 'navigation' as in website navigation.
-			  __( 'Navigation' );
-
-		// Determine how many menus start with the automatic title.
-		const matchingMenuTitleCount = [
-			...draftNavigationMenus,
-			...navigationMenus,
-		].reduce(
-			( count, menu ) =>
-				menu?.title?.raw?.startsWith( title ) ? count + 1 : count,
-			0
-		);
-
-		// Append a number to the end of the title if a menu with
-		// the same name exists.
-		const titleWithCount =
-			matchingMenuTitleCount > 0
-				? `${ title } ${ matchingMenuTitleCount + 1 }`
-				: title;
-
-		const menu = await createNavigationMenu( titleWithCount );
+		const menu = await createNavigationMenu( null, blocks );
 		onSave( menu );
 		savingLock.current = false;
 	}, [
@@ -172,7 +121,7 @@ export default function UnsavedInnerBlocks( {
 		navigationMenus,
 		hasSelection,
 		createNavigationMenu,
-		area,
+		blocks,
 	] );
 
 	return (

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { serialize } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useGenerateDefaultNavigationTitle from './use-generate-default-navigation-title';
+
+export default function useCreateNavigationMenu( clientId ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const generateDefaultTitle = useGenerateDefaultNavigationTitle( clientId );
+
+	// This callback uses data from the two placeholder steps and only creates
+	// a new navigation menu when the user completes the final step.
+	return useCallback(
+		async ( title = null, blocks = [] ) => {
+			if ( ! title ) {
+				title = await generateDefaultTitle();
+			}
+			const record = {
+				title,
+				content: serialize( blocks ),
+				status: 'publish',
+			};
+
+			return await saveEntityRecord(
+				'postType',
+				'wp_navigation',
+				record
+			);
+		},
+		[ serialize, saveEntityRecord ]
+	);
+}

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

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useRegistry } from '@wordpress/data';
+import { useContext, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useTemplatePartAreaLabel from '../use-template-part-area-label';
+
+const DRAFT_MENU_PARAMS = [
+	'postType',
+	'wp_navigation',
+	{ status: 'draft', per_page: -1 },
+];
+
+const PUBLISHED_MENU_PARAMS = [
+	'postType',
+	'wp_navigation',
+	{ per_page: -1, status: 'publish' },
+];
+
+export default function useGenerateDefaultNavigationTitle( clientId ) {
+	// 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 );
+
+	// Because we can't conditionally call hooks, pass an undefined client id
+	// arg to bypass the expensive `useTemplateArea` code. The hook will return
+	// early.
+	const area = useTemplatePartAreaLabel( isDisabled ? undefined : clientId );
+
+	const registry = useRegistry();
+	return useCallback( async () => {
+		// Ensure other navigation menus have loaded so an
+		// accurate name can be created.
+		if ( isDisabled ) {
+			return '';
+		}
+		const { getEntityRecords } = registry.resolveSelect( coreStore );
+
+		const [ draftNavigationMenus, navigationMenus ] = await Promise.all( [
+			getEntityRecords( ...DRAFT_MENU_PARAMS ),
+			getEntityRecords( ...PUBLISHED_MENU_PARAMS ),
+		] );
+
+		const title = area
+			? sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( '%s navigation' ),
+					area
+			  )
+			: // translators: 'navigation' as in website navigation.
+			  __( 'Navigation' );
+
+		// Determine how many menus start with the automatic title.
+		const matchingMenuTitleCount = [
+			...draftNavigationMenus,
+			...navigationMenus,
+		].reduce(
+			( count, menu ) =>
+				menu?.title?.raw?.startsWith( title ) ? count + 1 : count,
+			0
+		);
+
+		// Append a number to the end of the title if a menu with
+		// the same name exists.
+		const titleWithCount =
+			matchingMenuTitleCount > 0
+				? `${ title } ${ matchingMenuTitleCount + 1 }`
+				: title;
+
+		return titleWithCount || '';
+	}, [ isDisabled, area ] );
+}

package/src/navigation/index.php

@@ -2,20 +2,23 @@
 /**
  * Server-side rendering of the `core/navigation` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**
  * 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 $attributes Navigation block attributes.
+ * @param array $attributes Navigation block attributes.
+ *
  * @return array Colors CSS classes and inline styles.
  */
 function block_core_navigation_build_css_colors( $attributes ) {
 	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
+		'css_classes'           => array(),
+		'inline_styles'         => '',
+		'overlay_css_classes'   => array(),
+		'overlay_inline_styles' => '',
 	);
 
 	// Text color.
@@ -54,6 +57,42 @@ function block_core_navigation_build_css_colors( $attributes ) {
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
 	}
 
+	// Overlay text color.
+	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $attributes );
+	$has_custom_overlay_text_color = array_key_exists( 'customOverlayTextColor', $attributes );
+
+	// If has overlay text color.
+	if ( $has_custom_overlay_text_color || $has_named_overlay_text_color ) {
+		// Add has-text-color class.
+		$colors['overlay_css_classes'][] = 'has-text-color';
+	}
+
+	if ( $has_named_overlay_text_color ) {
+		// Add the overlay color class.
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', $attributes['overlayTextColor'] );
+	} elseif ( $has_custom_overlay_text_color ) {
+		// Add the custom overlay color inline style.
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $attributes['customOverlayTextColor'] );
+	}
+
+	// Overlay background color.
+	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $attributes );
+	$has_custom_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $attributes );
+
+	// If has overlay background color.
+	if ( $has_custom_overlay_background_color || $has_named_overlay_background_color ) {
+		// Add has-background class.
+		$colors['overlay_css_classes'][] = 'has-background';
+	}
+
+	if ( $has_named_overlay_background_color ) {
+		// Add the overlay background-color class.
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', $attributes['overlayBackgroundColor'] );
+	} elseif ( $has_custom_overlay_background_color ) {
+		// Add the custom overlay background-color inline style.
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customOverlayBackgroundColor'] );
+	}
+
 	return $colors;
 }
 
@@ -61,7 +100,8 @@ function block_core_navigation_build_css_colors( $attributes ) {
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $attributes Navigation block attributes.
+ * @param array $attributes Navigation block attributes.
+ *
  * @return array Font size CSS classes and inline styles.
  */
 function block_core_navigation_build_css_font_sizes( $attributes ) {
@@ -94,6 +134,100 @@ function block_core_navigation_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
+
+/**
+ * Finds the first non-empty `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.
+	$navigation_posts = get_posts(
+		array(
+			'post_type'      => 'wp_navigation',
+			'order'          => 'ASC',
+			'orderby'        => 'name',
+			'posts_per_page' => 1, // only the first post.
+			's'              => '<!-- wp:', // look for block indicators to ensure we only include non-empty Navigations.
+		)
+	);
+	return count( $navigation_posts ) ? $navigation_posts[0] : null;
+
+}
+
+/**
+ * Filter out empty "null" blocks from the block list.
+ * 'parse_blocks' includes a null block with '\n\n' as the content when
+ * it encounters whitespace. This is not a bug but rather how the parser
+ * is designed.
+ *
+ * @param array $parsed_blocks the parsed blocks to be normalized.
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_filter_out_empty_blocks( $parsed_blocks ) {
+	$filtered = array_filter(
+		$parsed_blocks,
+		function( $block ) {
+			return isset( $block['blockName'] );
+		}
+	);
+
+	// Reset keys.
+	return array_values( $filtered );
+}
+
+/**
+ * Retrieves the appropriate fallback to be used on the front of the
+ * site when there is no menu assigned to the Nav block.
+ *
+ * This aims to mirror how the fallback mechanic for wp_nav_menu works.
+ * See https://developer.wordpress.org/reference/functions/wp_nav_menu/#more-information.
+ *
+ * @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',
+			'attrs'     => array(
+				'__unstableMaxPages' => 4,
+			),
+		),
+	);
+
+	$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.
+
+	$navigation_post = block_core_navigation_get_first_non_empty_navigation();
+
+	// Prefer using the first non-empty Navigation as fallback if available.
+	if ( $navigation_post ) {
+		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( parse_blocks( $navigation_post->post_content ) );
+
+		// 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;
+	}
+
+	/**
+	 * Filters the fallback experience for the Navigation block.
+	 *
+	 * Returning a falsey value will opt out of the fallback and cause the block not to render.
+	 * To customise the blocks provided return an array of blocks - these should be valid
+	 * children of the `core/navigation` block.
+	 *
+	 * @param array[] default fallback blocks provided by the default block mechanic.
+	 */
+	return apply_filters( 'block_core_navigation_render_fallback', $fallback_blocks );
+}
+
 /**
  * Renders the `core/navigation` block on server.
  *
@@ -104,6 +238,11 @@ function block_core_navigation_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation( $attributes, $content, $block ) {
+
+	// Flag used to indicate whether the rendered output is considered to be
+	// a fallback (i.e. the block has no menu associated with it).
+	$is_fallback = false;
+
 	/**
 	 * Deprecated:
 	 * The rgbTextColor and rgbBackgroundColor attributes
@@ -145,17 +284,13 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$inner_blocks            = new WP_Block_List( $parsed_blocks, $attributes );
 	}
 
-	if ( ! empty( $block->context['navigationArea'] ) ) {
-		$area    = $block->context['navigationArea'];
-		$mapping = get_option( 'wp_navigation_areas', array() );
-		if ( ! empty( $mapping[ $area ] ) ) {
-			$attributes['navigationMenuId'] = $mapping[ $area ];
-		}
+	// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.
+	if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
+		$attributes['ref'] = $attributes['navigationMenuId'];
 	}
-
 	// Load inner blocks from the navigation post.
-	if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
-		$navigation_post = get_post( $attributes['navigationMenuId'] );
+	if ( array_key_exists( 'ref', $attributes ) ) {
+		$navigation_post = get_post( $attributes['ref'] );
 		if ( ! isset( $navigation_post ) ) {
 			return '';
 		}
@@ -164,20 +299,26 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 		// 'parse_blocks' includes a null block with '\n\n' as the content when
 		// it encounters whitespace. This code strips it.
-		$compacted_blocks = array_filter(
-			$parsed_blocks,
-			function( $block ) {
-				return isset( $block['blockName'] );
-			}
-		);
+		$compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
 		// TODO - this uses the full navigation block attributes for the
 		// context which could be refined.
 		$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
 	}
 
+	// If there are no inner blocks then fallback to rendering an appropriate fallback.
 	if ( empty( $inner_blocks ) ) {
-		return '';
+		$is_fallback = true; // indicate we are rendering the fallback.
+
+		$fallback_blocks = block_core_navigation_get_fallback_blocks();
+
+		// Fallback my have been filtered so do basic test for validity.
+		if ( empty( $fallback_blocks ) || ! is_array( $fallback_blocks ) ) {
+			return '';
+		}
+
+		$inner_blocks = new WP_Block_List( $fallback_blocks, $attributes );
+
 	}
 
 	// Restore legacy classnames for submenu positioning.
@@ -196,7 +337,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
 		$is_responsive_menu ? array( 'is-responsive' ) : array(),
-		$layout_class ? array( $layout_class ) : array()
+		$layout_class ? array( $layout_class ) : array(),
+		$is_fallback ? array( 'is-fallback' ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -247,6 +389,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',
 		$is_hidden_by_default ? 'hidden-by-default' : '',
+		implode( ' ', $colors['overlay_css_classes'] ),
 	);
 	$open_button_classes          = array(
 		'wp-block-navigation__responsive-container-open',
@@ -255,7 +398,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
-			<div class="%5$s" id="modal-%1$s">
+			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
@@ -270,7 +413,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		__( 'Open menu' ), // Open button label.
 		__( 'Close menu' ), // Close button label.
 		implode( ' ', $responsive_container_classes ),
-		implode( ' ', $open_button_classes )
+		implode( ' ', $open_button_classes ),
+		$colors['overlay_inline_styles']
 	);
 
 	return sprintf(
@@ -283,8 +427,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 /**
  * Register the navigation block.
  *
- * @uses render_block_core_navigation()
  * @throws WP_Error An WP_Error exception parsing the block definition.
+ * @uses render_block_core_navigation()
  */
 function register_block_core_navigation() {
 	register_block_type_from_metadata(
@@ -301,6 +445,7 @@ add_action( 'init', 'register_block_core_navigation' );
  * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly.
  *
  * @param array $parsed_block The block being rendered.
+ *
  * @return array The block being rendered without typographic presets.
  */
 function block_core_navigation_typographic_presets_backcompatibility( $parsed_block ) {
@@ -324,6 +469,7 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
 			}
 		}
 	}
+
 	return $parsed_block;
 }
 

package/src/navigation/save.js

@@ -4,8 +4,8 @@
 import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	if ( attributes.navigationMenuId ) {
-		// Avoid rendering inner blocks when a navigationMenuId is defined.
+	if ( attributes.ref ) {
+		// Avoid rendering inner blocks when a ref is defined.
 		// When this id is defined the inner blocks are loaded from the
 		// `wp_navigation` entity rather than the hard-coded block html.
 		return;

package/src/navigation/style.scss

@@ -78,10 +78,11 @@
 
 	// Submenu indicator.
 	.wp-block-navigation__submenu-icon {
-		align-self: center;
-		height: inherit;
+		align-self: center; // This one affects nested submenu indicators.
 		line-height: 0;
-		margin-left: 6px;
+		display: inline-block;
+		vertical-align: middle;
+		font-size: inherit;
 
 		// Affect the button as well.
 		padding: 0;
@@ -89,9 +90,16 @@
 		color: currentColor;
 		border: none;
 
+		// Scale to font size.
+		margin-left: 0.25em;
+		width: 0.6em;
+		height: 0.6em;
+
 		svg {
 			display: inline-block;
 			stroke: currentColor;
+			width: inherit;
+			height: inherit;
 		}
 	}
 }
@@ -219,6 +227,36 @@
 	}
 }
 
+// General submenu colors.
+// These styles are stored here as opposed to in the separate submenu block,
+// so that they can affect both submenus and page lists with submenu items both.
+.wp-block-navigation-submenu {
+	position: relative;
+	display: flex;
+
+	.wp-block-navigation__submenu-icon svg {
+		stroke: currentColor;
+	}
+}
+
+button.wp-block-navigation-item__content {
+	background-color: transparent;
+	border: none;
+	color: currentColor;
+	font-size: inherit;
+	font-family: inherit;
+	line-height: inherit;
+
+	// Buttons default to center alignment. This becomes visible
+	// when a menu item label is long enough to wrap.
+	text-align: left;
+}
+
+.wp-block-navigation-submenu__toggle {
+	cursor: pointer;
+}
+
+
 /**
  * Margins
  */
@@ -325,6 +363,13 @@
 	}
 }
 
+// Allow menu items to be spaced out by space-between when only navigation links are present.
+.wp-block-navigation__container:only-child,
+.wp-block-page-list:only-child {
+	flex-grow: 1;
+}
+
+
 /**
  * Mobile menu.
  */
@@ -345,6 +390,13 @@
 		align-items: var(--layout-align, initial);
 	}
 
+	// If the responsive wrapper is present but overlay is not open,
+	// overlay styles shouldn't apply.
+	&:not(.is-menu-open.is-menu-open) {
+		color: inherit !important;
+		background-color: inherit !important;
+	}
+
 	// Overlay menu.
 	// Provide an opinionated default style for menu items inside.
 	// Inherit as much as we can regarding colors, fonts, sizes,
@@ -432,9 +484,9 @@
 
 		// Remove background colors for items inside the overlay menu.
 		// Has to be !important to override global styles.
-		// @todo: We should revisit this so that the overlay colors can be applied, instead of the background.
 		.wp-block-navigation-item .wp-block-navigation__submenu-container,
-		.wp-block-navigation-item {
+		.wp-block-navigation-item,
+		.wp-block-page-list {
 			color: inherit !important;
 			background: transparent !important;
 		}