@wordpress/block-library 6.0.2 → 6.0.6

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.
+// 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-block;
+	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,23 @@ $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.
+		.wp-block-navigation.is-selected .is-small &,
+		.wp-block-navigation.is-selected .is-medium & {
+			display: none;
+		}
 	}
 }
 
@@ -304,17 +320,15 @@ $color-control-label-height: 20px;
 
 	// Show stacked for the vertical navigation, or small placeholders.
 	.is-small &,
-	.is-medium &,
-	.is-vertical & {
+	.is-medium & {
 		.wp-block-navigation-placeholder__actions {
 			flex-direction: column;
 		}
-	}
 
-	// Both selected and vertical.
-	.is-selected.is-vertical & {
-		display: inline-flex; // This makes the white box not take up all available space.
-		padding: $grid-unit-15;
+		// Hide the separators in the vertical version.
+		.wp-block-navigation-placeholder__actions hr {
+			display: none;
+		}
 	}
 
 	.wp-block-navigation-placeholder__icon {
@@ -324,67 +338,50 @@ $color-control-label-height: 20px;
 
 	// Block title
 	.wp-block-navigation-placeholder__actions__indicator {
-		margin-right: $grid-unit-15;
-		padding: 0;
+		display: flex;
+		padding: 0 ($grid-unit-15 * 0.5) 0 0;
 		align-items: center;
 		justify-content: flex-start;
 		line-height: 0;
+		min-height: $button-size;
 
 		// Line up with the icon in the toolbar.
-		margin-left: $grid-unit-05 + $border-width;
+		margin-left: $grid-unit-05;
 
 		svg {
 			margin-right: $grid-unit-05;
 		}
-
-		.is-vertical & {
-			margin-bottom: $grid-unit-05;
-			margin-left: 0;
-		}
-
-		// Show only in big placeholders.
-		display: none;
-		.is-large & {
-			display: inline-flex;
-		}
 	}
 }
 
-// When block is vertical.
-.is-vertical .wp-block-navigation-placeholder,
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-	min-height:
-		$icon-size +
-		( $grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15 ) * 3;
-}
-
-.is-vertical .wp-block-navigation-placeholder__preview,
-.is-vertical .wp-block-navigation-placeholder__controls {
-	flex-direction: column;
-	align-items: flex-start;
-}
-
 .wp-block-navigation-placeholder__actions {
 	display: flex;
 	font-size: $default-font-size;
 	font-family: $default-font;
-
-	.components-button.components-dropdown-menu__toggle.has-icon {
-		padding:
-			( $grid-unit-15 * 0.5 ) $grid-unit-05 ( $grid-unit-15 * 0.5 )
-			$grid-unit-15;
-		display: flex;
-		flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
-	}
+	gap: $grid-unit-15 * 0.5;
 
 	// Margins.
 	.components-dropdown,
 	> .components-button {
-		margin-right: $grid-unit-15;
+		margin-right: 0;
+	}
+
+	// Separator.
+	height: 100%; // This allows the separator to scale vertically.
+
+	// Separator.
+	&.wp-block-navigation-placeholder__actions hr {
+		border: 0;
+		min-height: $border-width;
+		min-width: $border-width;
+		background-color: $gray-900;
+		margin: auto 0;
+		height: 100%;
+		max-height: $grid-unit-20;
 	}
 }
 
+
 /**
  * Mobile menu.
  */
@@ -509,3 +506,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: [
 			{