Convert navigation link to use hooks and context. (#28996)

* Convert navigation link to use hooks and context.

* Switch back variable name.

packages/block-library/src/navigation-link/edit.js

@@ -2,19 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, head } from 'lodash';
+import { escape } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
-import {
-	useSelect,
-	useDispatch,
-	withDispatch,
-	withSelect,
-} from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	KeyboardShortcuts,
 	PanelBody,
@@ -125,24 +119,15 @@ function getSuggestionsQuery( type ) {
 	}
 }
 
-function NavigationLinkEdit( {
+export default function NavigationLinkEdit( {
 	attributes,
-	hasDescendants,
 	isSelected,
-	isImmediateParentOfSelectedBlock,
-	isParentOfSelectedBlock,
 	setAttributes,
-	showSubmenuIcon,
-	insertLinkBlock,
-	textColor,
-	backgroundColor,
-	inlineStyles,
-	selectedBlockHasDescendants,
-	userCanCreatePages = false,
-	userCanCreatePosts = false,
 	insertBlocksAfter,
 	mergeBlocks,
 	onReplace,
+	context,
+	clientId,
 } ) {
 	const {
 		label,
@@ -157,18 +142,75 @@ function NavigationLinkEdit( {
 		url,
 		opensInNewTab,
 	};
+	const { textColor, backgroundColor, style, showSubmenuIcon } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const { insertBlock } = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add link…' );
 	const ref = useRef();
 
-	const isDraggingBlocks = useSelect(
-		( select ) => select( blockEditorStore ).isDraggingBlocks(),
-		[]
+	const {
+		isDraggingBlocks,
+		isParentOfSelectedBlock,
+		isImmediateParentOfSelectedBlock,
+		hasDescendants,
+		selectedBlockHasDescendants,
+		numberOfDescendants,
+		userCanCreatePages,
+		userCanCreatePosts,
+	} = useSelect(
+		( select ) => {
+			const {
+				getClientIdsOfDescendants,
+				hasSelectedInnerBlock,
+				getSelectedBlockClientId,
+				isDraggingBlocks: _isDraggingBlocks,
+			} = select( blockEditorStore );
+
+			const selectedBlockId = getSelectedBlockClientId();
+
+			const descendants = getClientIdsOfDescendants( [ clientId ] )
+				.length;
+
+			return {
+				isParentOfSelectedBlock: hasSelectedInnerBlock(
+					clientId,
+					true
+				),
+				isImmediateParentOfSelectedBlock: hasSelectedInnerBlock(
+					clientId,
+					false
+				),
+				hasDescendants: !! descendants,
+				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
+					selectedBlockId,
+				] )?.length,
+				numberOfDescendants: descendants,
+				isDraggingBlocks: _isDraggingBlocks(),
+				userCanCreatePages: select( coreStore ).canUser(
+					'create',
+					'pages'
+				),
+				userCanCreatePosts: select( coreStore ).canUser(
+					'create',
+					'posts'
+				),
+			};
+		},
+		[ clientId ]
 	);
 
+	/**
+	 * Insert a link block when submenu is added.
+	 */
+	function insertLinkBlock() {
+		const insertionPoint = numberOfDescendants;
+		const blockToInsert = createBlock( 'core/navigation-link' );
+		insertBlock( blockToInsert, insertionPoint, clientId );
+	}
+
 	// Show the LinkControl on mount if the URL is empty
 	// ( When adding a new menu item)
 	// This can't be done in the useState call because it conflicts
@@ -256,15 +298,14 @@ function NavigationLinkEdit( {
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
 			'has-child': hasDescendants,
-			'has-text-color': !! textColor || !! inlineStyles?.color?.text,
+			'has-text-color': !! textColor || !! style?.color?.text,
 			[ `has-${ textColor }-color` ]: !! textColor,
-			'has-background':
-				!! backgroundColor || !! inlineStyles?.color?.background,
+			'has-background': !! backgroundColor || !! style?.color?.background,
 			[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
 		} ),
 		style: {
-			color: inlineStyles?.color?.text,
-			backgroundColor: inlineStyles?.color?.background,
+			color: style?.color?.text,
+			backgroundColor: style?.color?.background,
 		},
 	} );
 
@@ -445,7 +486,7 @@ function NavigationLinkEdit( {
 						</Popover>
 					) }
 				</div>
-				{ showSubmenuIcon && (
+				{ hasDescendants && showSubmenuIcon && (
 					<span className="wp-block-navigation-link__submenu-icon">
 						<ItemSubmenuIcon />
 					</span>
@@ -455,72 +496,3 @@ function NavigationLinkEdit( {
 		</Fragment>
 	);
 }
-
-export default compose( [
-	withSelect( ( select, ownProps ) => {
-		const {
-			getBlockAttributes,
-			getClientIdsOfDescendants,
-			hasSelectedInnerBlock,
-			getBlockParentsByBlockName,
-			getSelectedBlockClientId,
-		} = select( blockEditorStore );
-		const { clientId } = ownProps;
-		const rootBlock = head(
-			getBlockParentsByBlockName( clientId, 'core/navigation' )
-		);
-		const navigationBlockAttributes = getBlockAttributes( rootBlock );
-		const hasDescendants = !! getClientIdsOfDescendants( [ clientId ] )
-			.length;
-		const showSubmenuIcon =
-			!! navigationBlockAttributes.showSubmenuIcon && hasDescendants;
-		const inlineStyles = navigationBlockAttributes.style;
-		const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true );
-		const isImmediateParentOfSelectedBlock = hasSelectedInnerBlock(
-			clientId,
-			false
-		);
-		const selectedBlockId = getSelectedBlockClientId();
-		const selectedBlockHasDescendants = !! getClientIdsOfDescendants( [
-			selectedBlockId,
-		] )?.length;
-
-		return {
-			isParentOfSelectedBlock,
-			isImmediateParentOfSelectedBlock,
-			hasDescendants,
-			selectedBlockHasDescendants,
-			showSubmenuIcon,
-			inlineStyles,
-			textColor: navigationBlockAttributes.textColor,
-			backgroundColor: navigationBlockAttributes.backgroundColor,
-			userCanCreatePages: select( coreStore ).canUser(
-				'create',
-				'pages'
-			),
-			userCanCreatePosts: select( coreStore ).canUser(
-				'create',
-				'posts'
-			),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps, registry ) => {
-		return {
-			insertLinkBlock() {
-				const { clientId } = ownProps;
-
-				const { insertBlock } = dispatch( blockEditorStore );
-
-				const { getClientIdsOfDescendants } = registry.select(
-					'core/block-editor'
-				);
-				const navItems = getClientIdsOfDescendants( [ clientId ] );
-				const insertionPoint = navItems.length ? navItems.length : 0;
-
-				const blockToInsert = createBlock( 'core/navigation-link' );
-
-				insertBlock( blockToInsert, insertionPoint, clientId );
-			},
-		};
-	} ),
-] )( NavigationLinkEdit );