Try adding featured transforms in Link Control for Navigation Link it…

…ems. (#35857)

* Try adding featured transforms in Link Control

* Change to using render prop with explicit location.

* Add block icon and use Button component.

* Add markup and styles

* Update link control docs

* Transforms only show for empty link.

* Un-nest function and use getBlockTransformItems

* Change flex implementation

packages/block-editor/src/components/link-control/README.md

@@ -192,6 +192,13 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
+### renderControlBottom 
+
+-   Type: `Function`
+-   Required: No
+-   Default: null
+
+A render prop that can be used to pass optional controls to be rendered at the bottom of the component.
 
 # LinkControlSearchInput
 

packages/block-editor/src/components/link-control/index.js

@@ -94,6 +94,7 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
+ * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
  */
 
 /**
@@ -121,6 +122,7 @@ function LinkControl( {
 	createSuggestionButtonText,
 	hasRichPreviews = false,
 	hasTextControl = false,
+	renderControlBottom = null,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -346,6 +348,7 @@ function LinkControl( {
 					/>
 				</div>
 			) }
+			{ renderControlBottom && renderControlBottom() }
 		</div>
 	);
 }

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

@@ -7,9 +7,10 @@ import { escape } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, switchToBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	Button,
 	PanelBody,
 	Popover,
 	TextControl,
@@ -22,6 +23,7 @@ import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
+	BlockIcon,
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,
@@ -279,6 +281,37 @@ function navStripHTML( html ) {
 	return doc.body.textContent || '';
 }
 
+/**
+ * Add transforms to Link Control
+ */
+
+function LinkControlTransforms( { block, transforms, replace } ) {
+	return (
+		<div className="link-control-transform">
+			<h3 className="link-control-transform__subheading">Transform</h3>
+			<div className="link-control-transform__items">
+				{ transforms.map( ( item, index ) => {
+					return (
+						<Button
+							key={ `transform-${ index }` }
+							onClick={ () =>
+								replace(
+									block.clientId,
+									switchToBlockType( block, item.name )
+								)
+							}
+							className="link-control-transform__item"
+						>
+							<BlockIcon icon={ item.icon } />
+							{ item.title }
+						</Button>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+}
+
 export default function NavigationLinkEdit( {
 	attributes,
 	isSelected,
@@ -324,16 +357,20 @@ export default function NavigationLinkEdit( {
 		hasDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
+		thisBlock,
+		blockTransforms,
 	} = useSelect(
 		( select ) => {
 			const {
+				getBlock,
 				getBlocks,
 				getBlockName,
 				getBlockRootClientId,
 				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
+				getBlockTransformItems,
 			} = select( blockEditorStore );
 
 			const selectedBlockId = getSelectedBlockClientId();
@@ -371,6 +408,11 @@ export default function NavigationLinkEdit( {
 					'create',
 					'posts'
 				),
+				thisBlock: getBlock( clientId ),
+				blockTransforms: getBlockTransformItems(
+					[ getBlock( clientId ) ],
+					getBlockRootClientId( clientId )
+				),
 			};
 		},
 		[ clientId ]
@@ -397,6 +439,15 @@ export default function NavigationLinkEdit( {
 		replaceBlock( clientId, newSubmenu );
 	}
 
+	const featuredBlocks = [
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+	const featuredTransforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item.name );
+	} );
+
 	useEffect( () => {
 		// Show the LinkControl on mount if the URL is empty
 		// ( When adding a new menu item)
@@ -706,6 +757,19 @@ export default function NavigationLinkEdit( {
 									)
 								}
 								onRemove={ removeLink }
+								renderControlBottom={
+									! url
+										? () => (
+												<LinkControlTransforms
+													block={ thisBlock }
+													transforms={
+														featuredTransforms
+													}
+													replace={ replaceBlock }
+												/>
+										  )
+										: null
+								}
 							/>
 						</Popover>
 					) }

packages/block-library/src/navigation-link/editor.scss

@@ -96,3 +96,32 @@
 		cursor: pointer;
 	}
 }
+
+/**
+* Link Control Transforms
+*/
+
+.link-control-transform {
+	border-top: $border-width solid $gray-400;
+	padding: 0 $grid-unit-20 $grid-unit-10 $grid-unit-20;
+}
+
+.link-control-transform__subheading {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
+	margin-bottom: 1.5em;
+}
+
+.link-control-transform__items {
+	display: flex;
+	justify-content: space-between;
+}
+
+.link-control-transform__item {
+	flex-basis: 33%;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	height: auto;
+}