Clean up LinkUI duplication for Add block and Create page flows (#71499)

getdave · web-flow · commit dbe2a397bce5 · 2025-09-05T10:43:04.000+01:00
* refactor: extract shared BackButton component from LinkUI - Create shared BackButton component to eliminate duplication - Replace duplicated back button implementations in LinkUIBlockInserter and LinkUIPageCreator - Standardize back button behavior and styling across components - Remove unused chevron icon imports from page-creator.js - Add proper JSDoc documentation for BackButton component Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> This is the first phase of LinkUI duplication cleanup as discussed in PR #71163 follow-ups. * refactor: extract useDialogIds hook for dialog accessibility IDs - Create useDialogIds hook to eliminate duplicated useInstanceId calls - Replace duplicated accessibility ID generation in LinkUIBlockInserter and UnforwardedLinkUI - Maintain correct component parameters (LinkControl vs LinkUI) for proper ID generation - Standardize dialog accessibility ID pattern across components - Export hook for potential reuse in other components This is the second phase of LinkUI duplication cleanup as discussed in PR #71163 follow-ups. * refactor: create DialogWrapper component with minimal API - Create shared DialogWrapper component that handles all dialog concerns internally - Eliminate useDialogIds hook by inlining useInstanceId calls directly in DialogWrapper - Derive component, componentName, and backButtonClassName from className prop - Move useFocusOnMount logic inside DialogWrapper for complete encapsulation - Replace duplicated dialog structures in LinkUIBlockInserter and LinkUIPageCreator - Fix useDialogIds reference error in main LinkUI component - Maintain all existing CSS styling and accessibility features - Fix nested ternary linting error with if/else statements This completes the major refactoring of LinkUI duplication cleanup as discussed in PR #71163 follow-ups. * refactor: extract LinkUIBlockInserter to separate file and consolidate BackButton - Extract LinkUIBlockInserter component to block-inserter.js for consistency with page-creator.js - Consolidate BackButton component into dialog-wrapper.js since it's only used there - Fix import issues with privateApis in block-inserter.js - Remove separate back-button.js file to reduce file count - Clean up unused imports in link-ui.js after component extraction - Fix JSDoc alignment in block-inserter.js - Maintain all existing functionality while improving file organization This completes the component extraction phase of the LinkUI duplication cleanup. * refactor: simplify DialogWrapper instance ID generation Use DialogWrapper as the component for useInstanceId instead of deriving it from className. This removes unnecessary complexity and unused imports. * Standardise ID generation in Dialog
diff --git a/packages/block-library/src/navigation-link/block-inserter.js b/packages/block-library/src/navigation-link/block-inserter.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import DialogWrapper from './dialog-wrapper';
+import { unlock } from '../lock-unlock';
+
+const { PrivateQuickInserter: QuickInserter } = unlock(
+	blockEditorPrivateApis
+);
+
+/**
+ * Component for inserting blocks within the Navigation Link UI.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.clientId      Client ID of the navigation link block.
+ * @param {Function} props.onBack        Callback when user wants to go back.
+ * @param {Function} props.onBlockInsert Callback when a block is inserted.
+ */
+function LinkUIBlockInserter( { clientId, onBack, onBlockInsert } ) {
+	const { rootBlockClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return {
+				rootBlockClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! clientId ) {
+		return null;
+	}
+
+	return (
+		<DialogWrapper
+			className="link-ui-block-inserter"
+			title={ __( 'Add block' ) }
+			description={ __( 'Choose a block to add to your Navigation.' ) }
+			onBack={ onBack }
+		>
+			<QuickInserter
+				rootClientId={ rootBlockClientId }
+				clientId={ clientId }
+				isAppender={ false }
+				prioritizePatterns={ false }
+				selectBlockOnInsert={ ! onBlockInsert }
+				onSelect={ onBlockInsert ? onBlockInsert : undefined }
+				hasSearch={ false }
+			/>
+		</DialogWrapper>
+	);
+}
+
+export default LinkUIBlockInserter;
diff --git a/packages/block-library/src/navigation-link/dialog-wrapper.js b/packages/block-library/src/navigation-link/dialog-wrapper.js
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, VisuallyHidden } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+
+/**
+ * Shared BackButton component for consistent navigation across LinkUI sub-components.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className CSS class name for the button.
+ * @param {Function} props.onBack    Callback when user wants to go back.
+ */
+function BackButton( { className, onBack } ) {
+	return (
+		<Button
+			className={ className }
+			icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+			onClick={ ( e ) => {
+				e.preventDefault();
+				onBack();
+			} }
+			size="small"
+		>
+			{ __( 'Back' ) }
+		</Button>
+	);
+}
+
+/**
+ * Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.
+ *
+ * @param {Object}   props             Component props.
+ * @param {string}   props.className   CSS class name for the dialog container.
+ * @param {string}   props.title       Dialog title for accessibility.
+ * @param {string}   props.description Dialog description for accessibility.
+ * @param {Function} props.onBack      Callback when user wants to go back.
+ * @param {Object}   props.children    Child components to render inside the dialog.
+ */
+function DialogWrapper( { className, title, description, onBack, children } ) {
+	const dialogTitleId = useInstanceId(
+		DialogWrapper,
+		'link-ui-dialog-title'
+	);
+	const dialogDescriptionId = useInstanceId(
+		DialogWrapper,
+		'link-ui-dialog-description'
+	);
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const backButtonClassName = `${ className }__back`;
+
+	return (
+		<div
+			className={ className }
+			role="dialog"
+			aria-labelledby={ dialogTitleId }
+			aria-describedby={ dialogDescriptionId }
+			ref={ focusOnMountRef }
+		>
+			<VisuallyHidden>
+				<h2 id={ dialogTitleId }>{ title }</h2>
+				<p id={ dialogDescriptionId }>{ description }</p>
+			</VisuallyHidden>
+
+			<BackButton className={ backButtonClassName } onBack={ onBack } />
+
+			{ children }
+		</div>
+	);
+}
+
+export default DialogWrapper;
diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
@@ -8,13 +8,8 @@ import {
 	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
-import {
-	LinkControl,
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-	useBlockEditingMode,
-} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { LinkControl, useBlockEditingMode } from '@wordpress/block-editor';
 import {
 	useMemo,
 	useState,
@@ -23,19 +18,14 @@ import {
 	forwardRef,
 } from '@wordpress/element';
 import { useResourcePermissions } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { chevronLeftSmall, chevronRightSmall, plus } from '@wordpress/icons';
-import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+import { plus } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../lock-unlock';
 import { LinkUIPageCreator } from './page-creator';
-
-const { PrivateQuickInserter: QuickInserter } = unlock(
-	blockEditorPrivateApis
-);
+import LinkUIBlockInserter from './block-inserter';
 
 /**
  * Given the Link block's type attribute, return the query params to give to
@@ -75,74 +65,6 @@ export function getSuggestionsQuery( type, kind ) {
 	}
 }
 
-function LinkUIBlockInserter( { clientId, onBack, onBlockInsert } ) {
-	const { rootBlockClientId } = useSelect(
-		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
-
-			return {
-				rootBlockClientId: getBlockRootClientId( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-
-	const dialogTitleId = useInstanceId(
-		LinkControl,
-		`link-ui-block-inserter__title`
-	);
-	const dialogDescriptionId = useInstanceId(
-		LinkControl,
-		`link-ui-block-inserter__description`
-	);
-
-	if ( ! clientId ) {
-		return null;
-	}
-
-	return (
-		<div
-			className="link-ui-block-inserter"
-			role="dialog"
-			aria-labelledby={ dialogTitleId }
-			aria-describedby={ dialogDescriptionId }
-			ref={ focusOnMountRef }
-		>
-			<VisuallyHidden>
-				<h2 id={ dialogTitleId }>{ __( 'Add block' ) }</h2>
-
-				<p id={ dialogDescriptionId }>
-					{ __( 'Choose a block to add to your Navigation.' ) }
-				</p>
-			</VisuallyHidden>
-
-			<Button
-				className="link-ui-block-inserter__back"
-				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-				onClick={ ( e ) => {
-					e.preventDefault();
-					onBack();
-				} }
-				size="small"
-			>
-				{ __( 'Back' ) }
-			</Button>
-
-			<QuickInserter
-				rootClientId={ rootBlockClientId }
-				clientId={ clientId }
-				isAppender={ false }
-				prioritizePatterns={ false }
-				selectBlockOnInsert={ ! onBlockInsert }
-				onSelect={ onBlockInsert ? onBlockInsert : undefined }
-				hasSearch={ false }
-			/>
-		</div>
-	);
-}
-
 function UnforwardedLinkUI( props, ref ) {
 	const { label, url, opensInNewTab, type, kind } = props.link;
 	const postType = type || 'page';
@@ -151,7 +73,7 @@ function UnforwardedLinkUI( props, ref ) {
 	const [ addingPage, setAddingPage ] = useState( false );
 	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
 	const [ focusAddPageButton, setFocusAddPageButton ] = useState( false );
-	const permissions = useResourcePermissions( {
+	const { canCreate: canCreatePage } = useResourcePermissions( {
 		kind: 'postType',
 		name: postType,
 	} );
@@ -176,11 +98,11 @@ function UnforwardedLinkUI( props, ref ) {
 
 	const dialogTitleId = useInstanceId(
 		LinkUI,
-		`link-ui-link-control__title`
+		'link-ui-link-control__title'
 	);
 	const dialogDescriptionId = useInstanceId(
 		LinkUI,
-		`link-ui-link-control__description`
+		'link-ui-link-control__description'
 	);
 
 	const blockEditingMode = useBlockEditingMode();
@@ -233,8 +155,8 @@ function UnforwardedLinkUI( props, ref ) {
 										setAddingPage( true );
 										setFocusAddPageButton( false );
 									} }
-									canCreatePage={ permissions.canCreate }
 									blockEditingMode={ blockEditingMode }
+									canCreatePage={ canCreatePage }
 								/>
 							)
 						}
diff --git a/packages/block-library/src/navigation-link/page-creator.js b/packages/block-library/src/navigation-link/page-creator.js
@@ -9,13 +9,16 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
-import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
-import { useFocusOnMount } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import DialogWrapper from './dialog-wrapper';
 
 /**
  * Component for creating new pages within the Navigation Link UI.
@@ -35,9 +38,6 @@ export function LinkUIPageCreator( {
 	const [ title, setTitle ] = useState( initialTitle );
 	const [ shouldPublish, setShouldPublish ] = useState( false );
 
-	// Focus the first element when the component mounts
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-
 	// Check if the title is valid for submission
 	const isTitleValid = title.trim().length > 0;
 
@@ -95,19 +95,12 @@ export function LinkUIPageCreator( {
 	const isSubmitDisabled = isSaving || ! isTitleValid;
 
 	return (
-		<div className="link-ui-page-creator" ref={ focusOnMountRef }>
-			<Button
-				className="link-ui-page-creator__back"
-				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-				onClick={ ( e ) => {
-					e.preventDefault();
-					onBack();
-				} }
-				size="small"
-			>
-				{ __( 'Back' ) }
-			</Button>
-
+		<DialogWrapper
+			className="link-ui-page-creator"
+			title={ __( 'Create page' ) }
+			description={ __( 'Create a new page to add to your Navigation.' ) }
+			onBack={ onBack }
+		>
 			<VStack className="link-ui-page-creator__inner" spacing={ 4 }>
 				<form onSubmit={ createPage }>
 					<VStack spacing={ 4 }>
@@ -159,6 +152,6 @@ export function LinkUIPageCreator( {
 					</VStack>
 				</form>
 			</VStack>
-		</div>
+		</DialogWrapper>
 	);
 }
