@wordpress/block-library 8.9.0 → 8.11.0

package/src/navigation/edit/leaf-more-menu.js

@@ -0,0 +1,170 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import {
+	addSubmenu,
+	chevronUp,
+	chevronDown,
+	moreVertical,
+} from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+function AddSubmenuItem( {
+	block,
+	onClose,
+	expandedState,
+	expand,
+	setInsertedBlock,
+} ) {
+	const { insertBlock, replaceBlock, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const clientId = block.clientId;
+	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
+		block.name
+	);
+	return (
+		<MenuItem
+			icon={ addSubmenu }
+			disabled={ isDisabled }
+			onClick={ () => {
+				const updateSelectionOnInsert = false;
+				const newLink = createBlock( 'core/navigation-link' );
+
+				if ( block.name === 'core/navigation-submenu' ) {
+					insertBlock(
+						newLink,
+						block.innerBlocks.length,
+						clientId,
+						updateSelectionOnInsert
+					);
+				} else {
+					// Convert to a submenu if the block currently isn't one.
+					const newSubmenu = createBlock(
+						'core/navigation-submenu',
+						block.attributes,
+						block.innerBlocks
+					);
+
+					// The following must happen as two independent actions.
+					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+					// selector to determine which block is "active". As the UX needs the newLink to be
+					// the "active" block it must be the last block to be inserted.
+					// Therefore the Submenu is first created and **then** the newLink is inserted
+					// thus ensuring it is the last inserted block.
+					replaceBlock( clientId, newSubmenu );
+
+					replaceInnerBlocks(
+						newSubmenu.clientId,
+						[ newLink ],
+						updateSelectionOnInsert
+					);
+				}
+
+				// This call sets the local List View state for the "last inserted block".
+				// This is required for the Nav Block to determine whether or not to display
+				// the Link UI for this new block.
+				setInsertedBlock( newLink );
+
+				if ( ! expandedState[ block.clientId ] ) {
+					expand( block.clientId );
+				}
+				onClose();
+			} }
+		>
+			{ __( 'Add submenu link' ) }
+		</MenuItem>
+	);
+}
+
+export default function LeafMoreMenu( props ) {
+	const { block } = props;
+	const { clientId } = block;
+
+	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
+		useDispatch( blockEditorStore );
+
+	const removeLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ chevronUp }
+							onClick={ () => {
+								moveBlocksUp( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move up' ) }
+						</MenuItem>
+						<MenuItem
+							icon={ chevronDown }
+							onClick={ () => {
+								moveBlocksDown( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move down' ) }
+						</MenuItem>
+						<AddSubmenuItem
+							block={ block }
+							onClose={ onClose }
+							expanded
+							expandedState={ props.expandedState }
+							expand={ props.expand }
+							setInsertedBlock={ props.setInsertedBlock }
+						/>
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								removeBlocks( [ clientId ], false );
+								onClose();
+							} }
+						>
+							{ removeLabel }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/navigation/edit/menu-inspector-controls.js

@@ -12,7 +12,7 @@ import {
 	__experimentalHeading as Heading,
 	Spinner,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -22,9 +22,16 @@ import NavigationMenuSelector from './navigation-menu-selector';
 import { unlock } from '../../private-apis';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
+import LeafMoreMenu from './leaf-more-menu';
+import { updateAttributes } from '../../navigation-link/update-attributes';
+import { LinkUI } from '../../navigation-link/link-ui';
 
 /* translators: %s: The name of a menu. */
 const actionLabel = __( "Switch to '%s'" );
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 const MainContent = ( {
 	clientId,
@@ -33,7 +40,8 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(
@@ -43,6 +51,15 @@ const MainContent = ( {
 		},
 		[ clientId ]
 	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const setInsertedBlockAttributes =
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			if ( ! _insertedBlockClientId ) return;
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
+		};
+
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
@@ -57,19 +74,70 @@ const MainContent = ( {
 		? sprintf(
 				/* translators: %s: The name of a menu. */
 				__( 'Structure for navigation menu: %s' ),
-				navigationMenu?.title || __( 'Untitled menu' )
+				navigationMenu?.title?.rendered || __( 'Untitled menu' )
 		  )
 		: __(
 				'You have not yet created any menus. Displaying a list of your Pages'
 		  );
+
+	const renderLinkUI = (
+		currentBlock,
+		lastInsertedBlock,
+		setLastInsertedBlock
+	) => {
+		const blockSupportsLinkUI = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
+			lastInsertedBlock?.name
+		);
+		const currentBlockWasJustInserted =
+			lastInsertedBlock?.clientId === currentBlock.clientId;
+
+		const shouldShowLinkUIForBlock =
+			blockSupportsLinkUI && currentBlockWasJustInserted;
+
+		return (
+			shouldShowLinkUIForBlock && (
+				<LinkUI
+					clientId={ lastInsertedBlock?.clientId }
+					link={ lastInsertedBlock?.attributes }
+					onClose={ () => {
+						setLastInsertedBlock( null );
+					} }
+					hasCreateSuggestion={ false }
+					onChange={ ( updatedValue ) => {
+						updateAttributes(
+							updatedValue,
+							setInsertedBlockAttributes(
+								lastInsertedBlock?.clientId
+							),
+							lastInsertedBlock?.attributes
+						);
+						setLastInsertedBlock( null );
+					} }
+					onCancel={ () => {
+						setLastInsertedBlock( null );
+					} }
+				/>
+			)
+		);
+	};
+
 	return (
-		<OffCanvasEditor
-			blocks={ clientIdsTree }
-			parentClientId={ clientId }
-			isExpanded={ true }
-			LeafMoreMenu={ LeafMoreMenu }
-			description={ description }
-		/>
+		<div className="wp-block-navigation__menu-inspector-controls">
+			{ clientIdsTree.length === 0 && (
+				<p className="wp-block-navigation__menu-inspector-controls__empty-message">
+					{ __( 'This navigation menu is empty.' ) }
+				</p>
+			) }
+			<PrivateListView
+				blocks={ clientIdsTree }
+				rootClientId={ clientId }
+				isExpanded
+				description={ description }
+				showAppender
+				blockSettingsMenu={ LeafMoreMenu }
+				renderAdditionalBlockUI={ renderLinkUI }
+			/>
+		</div>
 	);
 };
 

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

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Button, Flex, FlexItem, Modal } from '@wordpress/components';
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import {
 	store as coreStore,
 	useEntityId,
@@ -44,34 +48,30 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 							'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( title );
-								} }
-							>
-								{ __( 'Confirm' ) }
-							</Button>
-						</FlexItem>
-					</Flex>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								setIsConfirmModalVisible( false );
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							onClick={ () => {
+								deleteEntityRecord(
+									'postType',
+									'wp_navigation',
+									id,
+									{ force: true }
+								);
+								onDelete( title );
+							} }
+						>
+							{ __( 'Confirm' ) }
+						</Button>
+					</HStack>
 				</Modal>
 			) }
 		</>

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

@@ -10,31 +10,10 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useNavigationMenu from '../use-navigation-menu';
 import { areBlocksDirty } from './are-blocks-dirty';
+import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
 
 const EMPTY_OBJECT = {};
-const DRAFT_MENU_PARAMS = [
-	'postType',
-	'wp_navigation',
-	{ status: 'draft', per_page: -1 },
-];
-
-const DEFAULT_BLOCK = {
-	name: 'core/navigation-link',
-};
-
-const ALLOWED_BLOCKS = [
-	'core/navigation-link',
-	'core/search',
-	'core/social-links',
-	'core/page-list',
-	'core/spacer',
-	'core/home-link',
-	'core/site-title',
-	'core/site-logo',
-	'core/navigation-submenu',
-];
 
 export default function UnsavedInnerBlocks( {
 	blocks,
@@ -90,35 +69,30 @@ export default function UnsavedInnerBlocks( {
 		}
 	);
 
-	const { isSaving, hasResolvedDraftNavigationMenus } = useSelect(
+	const { isSaving, hasResolvedAllNavigationMenus } = useSelect(
 		( select ) => {
 			if ( isDisabled ) {
 				return EMPTY_OBJECT;
 			}
 
-			const {
-				getEntityRecords,
-				hasFinishedResolution,
-				isSavingEntityRecord,
-			} = select( coreStore );
+			const { hasFinishedResolution, isSavingEntityRecord } =
+				select( coreStore );
 
 			return {
 				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
-				draftNavigationMenus: getEntityRecords(
-					// This is needed so that hasResolvedDraftNavigationMenus gives the correct status.
-					...DRAFT_MENU_PARAMS
-				),
-				hasResolvedDraftNavigationMenus: hasFinishedResolution(
+				hasResolvedAllNavigationMenus: hasFinishedResolution(
 					'getEntityRecords',
-					DRAFT_MENU_PARAMS
+					[
+						'postType',
+						'wp_navigation',
+						{ per_page: -1, status: [ 'publish', 'draft' ] },
+					]
 				),
 			};
 		},
 		[ isDisabled ]
 	);
 
-	const { hasResolvedNavigationMenus } = useNavigationMenu();
-
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
@@ -136,8 +110,7 @@ export default function UnsavedInnerBlocks( {
 		if (
 			isDisabled ||
 			isSaving ||
-			! hasResolvedDraftNavigationMenus ||
-			! hasResolvedNavigationMenus ||
+			! hasResolvedAllNavigationMenus ||
 			! hasSelection ||
 			! innerBlocksAreDirty
 		) {
@@ -150,8 +123,7 @@ export default function UnsavedInnerBlocks( {
 		createNavigationMenu,
 		isDisabled,
 		isSaving,
-		hasResolvedDraftNavigationMenus,
-		hasResolvedNavigationMenus,
+		hasResolvedAllNavigationMenus,
 		innerBlocksAreDirty,
 		hasSelection,
 	] );

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

@@ -97,7 +97,7 @@ function useConvertClassicToBlockMenu( clientId ) {
 					'wp_navigation',
 					navigationMenu.id,
 					{
-						status: postStatus,
+						status: 'publish',
 					},
 					{ throwOnError: true }
 				);

package/src/navigation/editor.scss

@@ -657,3 +657,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-navigation__responsive-container-open.components-button {
 	opacity: 1;
 }
+
+.wp-block-navigation__menu-inspector-controls {
+	overflow-x: auto;
+
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+	margin-left: 24px;
+}