@wordpress/block-library 6.0.1 → 6.0.5

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

@@ -0,0 +1,197 @@
+/**
+ * External dependencies
+ */
+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';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationMenu from '../use-navigation-menu';
+import useTemplatePartAreaLabel from '../use-template-part-area-label';
+
+const NOOP = () => {};
+const EMPTY_OBJECT = {};
+const DRAFT_MENU_PARAMS = [
+	'postType',
+	'wp_navigation',
+	{ status: 'draft', per_page: -1 },
+];
+
+export default function UnsavedInnerBlocks( {
+	blockProps,
+	blocks,
+	clientId,
+	hasSavedUnsavedInnerBlocks,
+	onSave,
+	hasSelection,
+} ) {
+	// 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 );
+	const savingLock = useRef( false );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		renderAppender: hasSelection ? undefined : false,
+
+		// Make the inner blocks 'controlled'. This allows the block to always
+		// work with controlled inner blocks, smoothing out the switch to using
+		// an entity.
+		value: blocks,
+		onChange: NOOP,
+		onInput: NOOP,
+	} );
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	const {
+		isSaving,
+		draftNavigationMenus,
+		hasResolvedDraftNavigationMenus,
+	} = useSelect(
+		( select ) => {
+			if ( isDisabled ) {
+				return EMPTY_OBJECT;
+			}
+
+			const {
+				getEntityRecords,
+				hasFinishedResolution,
+				isSavingEntityRecord,
+			} = select( coreStore );
+
+			return {
+				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
+				draftNavigationMenus: getEntityRecords( ...DRAFT_MENU_PARAMS ),
+				hasResolvedDraftNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					DRAFT_MENU_PARAMS
+				),
+			};
+		},
+		[ isDisabled ]
+	);
+
+	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 );
+
+	// Automatically save the uncontrolled blocks.
+	useEffect( async () => {
+		// The block will be disabled when used in a BlockPreview.
+		// In this case avoid automatic creation of a wp_navigation post.
+		// Otherwise the user will be spammed with lots of menus!
+		//
+		// Also ensure other navigation menus have loaded so an
+		// accurate name can be created.
+		//
+		// Don't try saving when another save is already
+		// in progress.
+		//
+		// And finally only create the menu when the block is selected,
+		// which is an indication they want to start editing.
+		if (
+			isDisabled ||
+			hasSavedUnsavedInnerBlocks ||
+			isSaving ||
+			savingLock.current ||
+			! hasResolvedDraftNavigationMenus ||
+			! hasResolvedNavigationMenus ||
+			! hasSelection
+		) {
+			return;
+		}
+
+		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 );
+		onSave( menu );
+		savingLock.current = false;
+	}, [
+		isDisabled,
+		isSaving,
+		hasResolvedDraftNavigationMenus,
+		hasResolvedNavigationMenus,
+		draftNavigationMenus,
+		navigationMenus,
+		hasSelection,
+		createNavigationMenu,
+		area,
+	] );
+
+	return (
+		<>
+			<nav { ...blockProps }>
+				<div className="wp-block-navigation__unsaved-changes">
+					<Disabled
+						className={ classnames(
+							'wp-block-navigation__unsaved-changes-overlay',
+							{
+								'is-saving': hasSelection,
+							}
+						) }
+					>
+						<div { ...innerBlocksProps } />
+					</Disabled>
+					{ hasSelection && <Spinner /> }
+				</div>
+			</nav>
+		</>
+	);
+}

package/src/navigation/edit/use-list-view-modal.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalListView as ListView,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarButton, Modal } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useRef, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { listView } from '@wordpress/icons';
+
+function NavigationBlockListView( { clientId, __experimentalFeatures } ) {
+	const blocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetClientIdsTree( clientId ),
+		[ clientId ]
+	);
+
+	const listViewRef = useRef();
+	const [ minHeight, setMinHeight ] = useState( 300 );
+	useEffect( () => {
+		setMinHeight( listViewRef?.current?.clientHeight ?? 300 );
+	}, [] );
+
+	return (
+		<div style={ { minHeight } }>
+			<ListView
+				ref={ listViewRef }
+				blocks={ blocks }
+				showBlockMovers
+				showNestedBlocks
+				__experimentalFeatures={ __experimentalFeatures }
+			/>
+		</div>
+	);
+}
+
+export default function useListViewModal( clientId, __experimentalFeatures ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const listViewToolbarButton = (
+		<ToolbarButton
+			className="components-toolbar__control"
+			label={ __( 'Open list view' ) }
+			onClick={ () => setIsModalOpen( true ) }
+			icon={ listView }
+		/>
+	);
+
+	const listViewModal = isModalOpen && (
+		<Modal
+			title={ __( 'List View' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ () => {
+				setIsModalOpen( false );
+			} }
+			shouldCloseOnClickOutside={ false }
+		>
+			<NavigationBlockListView
+				clientId={ clientId }
+				__experimentalFeatures={ __experimentalFeatures }
+			/>
+		</Modal>
+	);
+
+	return {
+		listViewToolbarButton,
+		listViewModal,
+	};
+}

package/src/navigation/editor.scss

@@ -20,11 +20,15 @@
 	}
 }
 
-// This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor.
-.wp-block-navigation-link__label {
-	display: inline-block;
+// The following rule affects the positioning of the dropdown arrow indicator.
+// On the frontend, this element is inline, which makes it look correct. In the editor,
+// the label is block, which causes the dropdown indicator to wrap onto a new line.
+// Therefore we explicitly set it to inline even in the block editor.
+.wp-block-navigation-item__label {
+	display: inline;
 }
 
+
 /**
  * Submenus.
  */
@@ -33,6 +37,7 @@
 .wp-block-navigation__container.is-parent-of-selected-block {
 	visibility: visible;
 	opacity: 1;
+	overflow: visible;
 }
 
 // Low specificity default to ensure background color applies to submenus.
@@ -211,6 +216,18 @@ $color-control-label-height: 20px;
 	margin-right: 7px;
 }
 
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -220,6 +237,11 @@ $color-control-label-height: 20px;
 	width: 100%;
 	overflow: hidden;
 
+	&.is-loading {
+		animation: loadingpulse 1s linear infinite;
+		animation-delay: 0.5s; // avoid animating for fast network responses
+	}
+
 	// Style skeleton elements to mostly match the metrics of actual menu items.
 	// Needs specificity.
 	.wp-block-navigation-item.wp-block-navigation-item {
@@ -248,29 +270,24 @@ $color-control-label-height: 20px;
 		opacity: 0.3;
 	}
 
-	// Don't show the preview boxes for an empty nav block,
-	// but be technically present to help size the empty state.
-	.wp-block-navigation.is-selected & {
-		display: flex;
-		opacity: 0;
-		width: 0;
-		overflow: hidden;
-		flex-wrap: nowrap;
-		flex: 0;
-	}
-
-	// Hide entirely when vertical.
-	.is-vertical.is-selected & {
-		display: none;
-	}
-
-	// Hide entirely when the placeholder can still be toggled.
-	.wp-block-navigation.is-selected .is-small & {
-		display: none;
-	}
+	&:not(.is-loading) {
+		// Don't show the preview boxes for an empty nav block,
+		// but be technically present to help size the empty state.
+		.wp-block-navigation.is-selected & {
+			display: flex;
+			opacity: 0;
+			width: 0;
+			overflow: hidden;
+			flex-wrap: nowrap;
+			flex: 0;
+		}
 
-	.wp-block-navigation.is-selected .is-medium & {
-		display: none;
+		// Hide entirely when vertical.
+		.is-vertical.is-selected &,
+		.wp-block-navigation.is-selected .is-small &,
+		.wp-block-navigation.is-selected .is-medium & {
+			display: none;
+		}
 	}
 }
 
@@ -397,12 +414,6 @@ $color-control-label-height: 20px;
 		}
 	}
 }
-.components-button.wp-block-navigation__responsive-container-open {
-	@include break-small {
-		display: none;
-	}
-}
-
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 
@@ -515,3 +526,47 @@ body.editor-styles-wrapper
 		margin-top: $grid-unit-20;
 	}
 }
+
+@keyframes fadein {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.wp-block-navigation__unsaved-changes {
+	position: relative;
+
+	.components-spinner {
+		position: absolute;
+		top: calc(50% - #{$spinner-size} / 2);
+		left: calc(50% - #{$spinner-size} / 2);
+
+		// Delay showing the saving spinner until after 2 seconds.
+		// This should ensure it only shows for slow connections.
+		opacity: 0;
+		animation: 0.5s linear 2s normal forwards fadein;
+	}
+}
+
+@keyframes fadeouthalf {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+
+.wp-block-navigation__unsaved-changes-overlay.is-saving {
+	opacity: 1;
+	animation: 0.5s linear 2s normal forwards fadeouthalf;
+}
+
+.wp-block-navigation-delete-menu-button {
+	width: 100%;
+	justify-content: center;
+	margin-bottom: $grid-unit-20;
+}

package/src/navigation/index.js

@@ -11,7 +11,6 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import deprecated from './deprecated';
-import variations from './variations';
 
 const { name } = metadata;
 
@@ -19,7 +18,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	variations,
 	example: {
 		innerBlocks: [
 			{

package/src/navigation/index.php

@@ -85,103 +85,6 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 	return $font_sizes;
 }
 
-/**
- * Returns the menu items for a WordPress menu location.
- *
- * @param string $location The menu location.
- * @return array Menu items for the location.
- */
-function gutenberg_get_menu_items_at_location( $location ) {
-	if ( empty( $location ) ) {
-		return;
-	}
-
-	// Build menu data. The following approximates the code in
-	// `wp_nav_menu()` and `gutenberg_output_block_nav_menu`.
-
-	// Find the location in the list of locations, returning early if the
-	// location can't be found.
-	$locations = get_nav_menu_locations();
-	if ( ! isset( $locations[ $location ] ) ) {
-		return;
-	}
-
-	// Get the menu from the location, returning early if there is no
-	// menu or there was an error.
-	$menu = wp_get_nav_menu_object( $locations[ $location ] );
-	if ( ! $menu || is_wp_error( $menu ) ) {
-		return;
-	}
-
-	$menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) );
-	_wp_menu_item_classes_by_context( $menu_items );
-
-	return $menu_items;
-}
-
-/**
- * Sorts a standard array of menu items into a nested structure keyed by the
- * id of the parent menu.
- *
- * @param array $menu_items Menu items to sort.
- * @return array An array keyed by the id of the parent menu where each element
- *               is an array of menu items that belong to that parent.
- */
-function gutenberg_sort_menu_items_by_parent_id( $menu_items ) {
-	$sorted_menu_items = array();
-	foreach ( (array) $menu_items as $menu_item ) {
-		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
-	}
-	unset( $menu_items, $menu_item );
-
-	$menu_items_by_parent_id = array();
-	foreach ( $sorted_menu_items as $menu_item ) {
-		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
-	}
-
-	return $menu_items_by_parent_id;
-}
-
-/**
- * Turns menu item data into a nested array of parsed blocks
- *
- * @param array $menu_items               An array of menu items that represent
- *                                        an individual level of a menu.
- * @param array $menu_items_by_parent_id  An array keyed by the id of the
- *                                        parent menu where each element is an
- *                                        array of menu items that belong to
- *                                        that parent.
- * @return array An array of parsed block data.
- */
-function gutenberg_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
-	if ( empty( $menu_items ) ) {
-		return array();
-	}
-
-	$blocks = array();
-
-	foreach ( $menu_items as $menu_item ) {
-		$block = array(
-			'blockName' => 'core/navigation-link',
-			'attrs'     => array(
-				'label' => $menu_item->title,
-				'url'   => $menu_item->url,
-			),
-		);
-
-		$block['innerBlocks'] = gutenberg_parse_blocks_from_menu_items(
-			isset( $menu_items_by_parent_id[ $menu_item->ID ] )
-					? $menu_items_by_parent_id[ $menu_item->ID ]
-					: array(),
-			$menu_items_by_parent_id
-		);
-
-		$blocks[] = $block;
-	}
-
-	return $blocks;
-}
-
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
@@ -218,13 +121,19 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ! empty( $attributes['isResponsive'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
+	/**
+	 * This is for backwards compatibility after `isResponsive` attribute has been removed.
+	 */
+	$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
+	$is_responsive_menu           = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
+	$should_load_view_script      = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
 
 	$inner_blocks = $block->inner_blocks;
 
+	// If `__unstableLocation` is defined, create inner blocks from the classic menu assigned to that location.
 	if ( empty( $inner_blocks ) && array_key_exists( '__unstableLocation', $attributes ) ) {
 		$menu_items = gutenberg_get_menu_items_at_location( $attributes['__unstableLocation'] );
 		if ( empty( $menu_items ) ) {
@@ -233,24 +142,49 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 		$menu_items_by_parent_id = gutenberg_sort_menu_items_by_parent_id( $menu_items );
 		$parsed_blocks           = gutenberg_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id );
+		$inner_blocks            = new WP_Block_List( $parsed_blocks, $attributes );
+	}
+
+	if ( ! empty( $block->context['navigationArea'] ) ) {
+		$area    = $block->context['navigationArea'];
+		$mapping = get_option( 'fse_navigation_areas', array() );
+		if ( ! empty( $mapping[ $area ] ) ) {
+			$attributes['navigationMenuId'] = $mapping[ $area ];
+		}
+	}
+
+	// Load inner blocks from the navigation post.
+	if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
+		$navigation_post = get_post( $attributes['navigationMenuId'] );
+		if ( ! isset( $navigation_post ) ) {
+			return '';
+		}
+
+		$parsed_blocks = parse_blocks( $navigation_post->post_content );
+
+		// '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'] );
+			}
+		);
 
 		// TODO - this uses the full navigation block attributes for the
 		// context which could be refined.
-		$inner_blocks = new WP_Block_List( $parsed_blocks, $attributes );
+		$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
 	}
 
 	if ( empty( $inner_blocks ) ) {
 		return '';
 	}
-
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
-		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
-		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['isResponsive'] ) && true === $attributes['isResponsive'] ? array( 'is-responsive' ) : array()
+		$is_responsive_menu ? array( 'is-responsive' ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -288,7 +222,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
-	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
+	if ( ! $is_responsive_menu ) {
 		return sprintf(
 			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
@@ -296,9 +230,20 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		);
 	}
 
+	$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
+
+	$responsive_container_classes = array(
+		'wp-block-navigation__responsive-container',
+		$is_hidden_by_default ? 'hidden-by-default' : '',
+	);
+	$open_button_classes          = array(
+		'wp-block-navigation__responsive-container-open',
+		$is_hidden_by_default ? 'always-shown' : '',
+	);
+
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="wp-block-navigation__responsive-container-open" 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="wp-block-navigation__responsive-container" id="modal-%1$s" aria-hidden="true">
+		'<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="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>
@@ -311,7 +256,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$modal_unique_id,
 		$inner_blocks_html,
 		__( 'Open menu' ), // Open button label.
-		__( 'Close menu' ) // Close button label.
+		__( 'Close menu' ), // Close button label.
+		implode( ' ', $responsive_container_classes ),
+		implode( ' ', $open_button_classes )
 	);
 
 	return sprintf(

package/src/navigation/save.js

@@ -3,6 +3,12 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	if ( attributes.navigationMenuId ) {
+		// Avoid rendering inner blocks when a navigationMenuId 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;
+	}
 	return <InnerBlocks.Content />;
 }