@wordpress/block-library 6.0.1 → 6.0.5

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Flex, FlexItem, Modal } from '@wordpress/components';
+import {
+	store as coreStore,
+	useEntityId,
+	useEntityProp,
+} from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+export default function NavigationMenuDeleteControl( { onDelete } ) {
+	const [ isConfirmModalVisible, setIsConfirmModalVisible ] = useState(
+		false
+	);
+	const id = useEntityId( 'postType', 'wp_navigation' );
+	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	return (
+		<>
+			<Button
+				className="wp-block-navigation-delete-menu-button"
+				variant="secondary"
+				isDestructive
+				onClick={ () => {
+					setIsConfirmModalVisible( true );
+				} }
+			>
+				{ __( 'Delete menu' ) }
+			</Button>
+			{ isConfirmModalVisible && (
+				<Modal
+					title={ sprintf(
+						/* translators: %s: the name of a menu to delete */
+						__( 'Delete %s' ),
+						title
+					) }
+					closeLabel={ __( 'Cancel' ) }
+					onRequestClose={ () => setIsConfirmModalVisible( false ) }
+				>
+					<p>
+						{ __(
+							'Are you sure you want to delete this navigation menu?'
+						) }
+					</p>
+					<Flex justify="flex-end">
+						<FlexItem>
+							<Button
+								variant="secondary"
+								onClick={ () => {
+									setIsConfirmModalVisible( false );
+								} }
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="primary"
+								onClick={ () => {
+									deleteEntityRecord(
+										'postType',
+										'wp_navigation',
+										id,
+										{ force: true }
+									);
+									onDelete();
+								} }
+							>
+								{ __( 'Confirm' ) }
+							</Button>
+						</FlexItem>
+					</Flex>
+				</Modal>
+			) }
+		</>
+	);
+}

package/src/navigation/edit/navigation-menu-name-control.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+export default function NavigationMenuNameControl() {
+	const [ title, updateTitle ] = useEntityProp(
+		'postType',
+		'wp_navigation',
+		'title'
+	);
+
+	return (
+		<TextControl
+			label={ __( 'Menu name' ) }
+			value={ title }
+			onChange={ updateTitle }
+		/>
+	);
+}

package/src/navigation/edit/navigation-menu-name-modal.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Flex,
+	FlexItem,
+	Modal,
+	TextControl,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+export default function NavigationMenuNameModal( {
+	title,
+	finishButtonText = __( 'Create' ),
+	onFinish,
+	onRequestClose,
+	value = '',
+} ) {
+	const [ name, setName ] = useState( value );
+
+	return (
+		<Modal
+			title={ title }
+			closeLabel={ __( 'Cancel' ) }
+			onRequestClose={ onRequestClose }
+			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					onFinish( name );
+				} }
+			>
+				<TextControl
+					label={ __( 'Name' ) }
+					value={ name }
+					onChange={ setName }
+				/>
+				<Flex
+					className="wp-block-template-part__placeholder-create-new__title-form-actions"
+					justify="flex-end"
+				>
+					<FlexItem>
+						<Button
+							variant="secondary"
+							onClick={ () => {
+								onRequestClose();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! name.length }
+							aria-disabled={ ! name.length }
+						>
+							{ finishButtonText }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}

package/src/navigation/edit/navigation-menu-publish-button.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import {
+	useEntityId,
+	useEntityProp,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenuNameModal from './navigation-menu-name-modal';
+
+export default function NavigationMenuPublishButton() {
+	const [ isNameModalVisible, setIsNameModalVisible ] = useState( false );
+	const id = useEntityId( 'postType', 'wp_navigation' );
+	const [ navigationMenuTitle ] = useEntityProp(
+		'postType',
+		'wp_navigation',
+		'title'
+	);
+	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
+		coreStore
+	);
+
+	return (
+		<>
+			<ToolbarButton onClick={ () => setIsNameModalVisible( true ) }>
+				{ __( 'Save as' ) }
+			</ToolbarButton>
+			{ isNameModalVisible && (
+				<NavigationMenuNameModal
+					title={ __( 'Save your new navigation menu' ) }
+					value={ navigationMenuTitle }
+					onRequestClose={ () => setIsNameModalVisible( false ) }
+					finishButtonText={ __( 'Save' ) }
+					onFinish={ ( updatedTitle ) => {
+						editEntityRecord( 'postType', 'wp_navigation', id, {
+							title: updatedTitle,
+							status: 'publish',
+						} );
+						saveEditedEntityRecord(
+							'postType',
+							'wp_navigation',
+							id
+						);
+					} }
+				/>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';
+import { useEntityId } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationMenu from '../use-navigation-menu';
+
+export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
+	const { navigationMenus } = useNavigationMenu();
+	const navigationMenuId = useEntityId( 'postType', 'wp_navigation' );
+
+	return (
+		<>
+			<MenuGroup>
+				<MenuItemsChoice
+					value={ navigationMenuId }
+					onSelect={ ( selectedId ) =>
+						onSelect(
+							navigationMenus.find(
+								( post ) => post.id === selectedId
+							)
+						)
+					}
+					choices={ navigationMenus.map( ( { id, title } ) => ( {
+						value: id,
+						label: title.rendered,
+					} ) ) }
+				/>
+			</MenuGroup>
+			<MenuGroup>
+				<MenuItem onClick={ onCreateNew }>
+					{ __( 'Create new menu' ) }
+				</MenuItem>
+			</MenuGroup>
+		</>
+	);
+}

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

@@ -0,0 +1,257 @@
+/**
+ * WordPress dependencies
+ */
+import { serialize, createBlock } from '@wordpress/blocks';
+import {
+	Placeholder,
+	Button,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useCallback, useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { navigation, chevronDown, Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+
+import useNavigationEntities from '../../use-navigation-entities';
+import PlaceholderPreview from './placeholder-preview';
+import menuItemsToBlocks from '../../menu-items-to-blocks';
+import NavigationMenuNameModal from '../navigation-menu-name-modal';
+import useNavigationMenu from '../../use-navigation-menu';
+
+const ExistingMenusDropdown = ( {
+	canSwitchNavigationMenu,
+	navigationMenus,
+	setSelectedMenu,
+	onFinish,
+	menus,
+	onCreateFromMenu,
+} ) => {
+	const toggleProps = {
+		variant: 'primary',
+		className: 'wp-block-navigation-placeholder__actions__dropdown',
+	};
+	return (
+		<DropdownMenu
+			text={ __( 'Select existing menu' ) }
+			icon={ chevronDown }
+			toggleProps={ toggleProps }
+			popoverProps={ { isAlternate: true } }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup label={ __( 'Menus' ) }>
+						{ canSwitchNavigationMenu &&
+							navigationMenus?.map( ( menu ) => {
+								return (
+									<MenuItem
+										onClick={ () => {
+											setSelectedMenu( menu.id );
+											onFinish( menu );
+										} }
+										onClose={ onClose }
+										key={ menu.id }
+									>
+										{ menu.title.rendered }
+									</MenuItem>
+								);
+							} ) }
+					</MenuGroup>
+					<MenuGroup label={ __( 'Classic Menus' ) }>
+						{ menus?.map( ( menu ) => {
+							return (
+								<MenuItem
+									onClick={ () => {
+										setSelectedMenu( menu.id );
+										onCreateFromMenu( menu.name );
+									} }
+									onClose={ onClose }
+									key={ menu.id }
+								>
+									{ menu.name }
+								</MenuItem>
+							);
+						} ) }
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+};
+
+export default function NavigationPlaceholder( {
+	onFinish,
+	canSwitchNavigationMenu,
+	hasResolvedNavigationMenus,
+} ) {
+	const [ selectedMenu, setSelectedMenu ] = useState();
+
+	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
+
+	const [ menuName, setMenuName ] = useState( '' );
+
+	const [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState(
+		false
+	);
+
+	const [ createEmpty, setCreateEmpty ] = useState( false );
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	// This callback uses data from the two placeholder steps and only creates
+	// a new navigation menu when the user completes the final step.
+	const createNavigationMenu = useCallback(
+		async ( title = __( 'Untitled Navigation Menu' ), blocks = [] ) => {
+			const record = {
+				title,
+				content: serialize( blocks ),
+				status: 'publish',
+			};
+
+			const navigationMenu = await saveEntityRecord(
+				'postType',
+				'wp_navigation',
+				record
+			);
+
+			return navigationMenu;
+		},
+		[ serialize, saveEntityRecord ]
+	);
+
+	const onFinishMenuCreation = async ( navigationMenuTitle, blocks ) => {
+		const navigationMenu = await createNavigationMenu(
+			navigationMenuTitle,
+			blocks
+		);
+		onFinish( navigationMenu );
+	};
+
+	const {
+		isResolvingPages,
+		menus,
+		isResolvingMenus,
+		menuItems,
+		hasResolvedMenuItems,
+		hasPages,
+		hasMenus,
+	} = useNavigationEntities( selectedMenu );
+
+	const isStillLoading = isResolvingPages || isResolvingMenus;
+
+	const createFromMenu = useCallback(
+		( name ) => {
+			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
+			onFinishMenuCreation( name, blocks );
+		},
+		[ menuItems, menuItemsToBlocks, onFinish ]
+	);
+
+	const onCreateFromMenu = ( name ) => {
+		// If we have menu items, create the block right away.
+		if ( hasResolvedMenuItems ) {
+			createFromMenu( name );
+			return;
+		}
+
+		// Otherwise, create the block when resolution finishes.
+		setIsCreatingFromMenu( true );
+		// Store the name to use later.
+		setMenuName( name );
+	};
+
+	const onCreateEmptyMenu = ( name ) => {
+		onFinishMenuCreation( name, [] );
+	};
+
+	const onCreateAllPages = ( name ) => {
+		const block = [ createBlock( 'core/page-list' ) ];
+		onFinishMenuCreation( name, block );
+		setIsNewMenuModalVisible( true );
+	};
+
+	useEffect( () => {
+		// If the user selected a menu but we had to wait for menu items to
+		// finish resolving, then create the block once resolution finishes.
+		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
+			createFromMenu( menuName );
+			setIsCreatingFromMenu( false );
+		}
+	}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );
+
+	const { navigationMenus } = useNavigationMenu();
+
+	return (
+		<>
+			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
+				<PlaceholderPreview isLoading />
+			) }
+			{ hasResolvedNavigationMenus && ! isStillLoading && (
+				<Placeholder className="wp-block-navigation-placeholder">
+					<PlaceholderPreview />
+					<div className="wp-block-navigation-placeholder__controls">
+						<div className="wp-block-navigation-placeholder__actions">
+							<div className="wp-block-navigation-placeholder__actions__indicator">
+								<Icon icon={ navigation } />{ ' ' }
+								{ __( 'Navigation' ) }
+							</div>
+							{ hasMenus || navigationMenus.length ? (
+								<ExistingMenusDropdown
+									canSwitchNavigationMenu={
+										canSwitchNavigationMenu
+									}
+									navigationMenus={ navigationMenus }
+									setSelectedMenu={ setSelectedMenu }
+									onFinish={ onFinish }
+									menus={ menus }
+									onCreateFromMenu={ onCreateFromMenu }
+								/>
+							) : undefined }
+							{ hasPages ? (
+								<Button
+									variant={
+										hasMenus || canSwitchNavigationMenu
+											? 'tertiary'
+											: 'primary'
+									}
+									onClick={ () => {
+										setIsNewMenuModalVisible( true );
+										setCreateEmpty( false );
+									} }
+								>
+									{ __( 'Add all pages' ) }
+								</Button>
+							) : undefined }
+							<Button
+								variant="tertiary"
+								onClick={ () => {
+									setIsNewMenuModalVisible( true );
+									setCreateEmpty( true );
+								} }
+							>
+								{ __( 'Start empty' ) }
+							</Button>
+						</div>
+					</div>
+				</Placeholder>
+			) }
+			{ isNewMenuModalVisible && (
+				<NavigationMenuNameModal
+					title={ __( 'Create your new navigation menu' ) }
+					onRequestClose={ () => {
+						setIsNewMenuModalVisible( false );
+					} }
+					onFinish={
+						createEmpty ? onCreateEmptyMenu : onCreateAllPages
+					}
+				/>
+			) }
+		</>
+	);
+}

package/src/navigation/{placeholder-preview.js → edit/placeholder/placeholder-preview.js}

@@ -1,11 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { Icon, search } from '@wordpress/icons';
 
-const PlaceholderPreview = () => {
+const PlaceholderPreview = ( { isLoading } ) => {
 	return (
-		<ul className="wp-block-navigation-placeholder__preview wp-block-navigation__container">
+		<ul
+			className={ classnames(
+				'wp-block-navigation-placeholder__preview',
+				'wp-block-navigation__container',
+				{ 'is-loading': isLoading }
+			) }
+		>
 			<li className="wp-block-navigation-item">&#8203;</li>
 			<li className="wp-block-navigation-item">&#8203;</li>
 			<li className="wp-block-navigation-item">&#8203;</li>

package/src/navigation/{responsive-wrapper.js → edit/responsive-wrapper.js}

@@ -17,6 +17,7 @@ export default function ResponsiveWrapper( {
 	isOpen,
 	isResponsive,
 	onToggle,
+	isHiddenByDefault,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -25,8 +26,13 @@ export default function ResponsiveWrapper( {
 		'wp-block-navigation__responsive-container',
 		{
 			'is-menu-open': isOpen,
+			'hidden-by-default': isHiddenByDefault,
 		}
 	);
+	const openButtonClasses = classnames(
+		'wp-block-navigation__responsive-container-open',
+		{ 'always-shown': isHiddenByDefault }
+	);
 
 	const modalId = `${ id }-modal`;
 
@@ -37,7 +43,7 @@ export default function ResponsiveWrapper( {
 					aria-haspopup="true"
 					aria-expanded={ isOpen }
 					aria-label={ __( 'Open menu' ) }
-					className="wp-block-navigation__responsive-container-open"
+					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
 					<SVG
@@ -55,11 +61,7 @@ export default function ResponsiveWrapper( {
 				</Button>
 			) }
 
-			<div
-				className={ responsiveContainerClasses }
-				id={ modalId }
-				aria-hidden={ ! isOpen }
-			>
+			<div className={ responsiveContainerClasses } id={ modalId }>
 				<div
 					className="wp-block-navigation__responsive-close"
 					tabIndex="-1"