Display inserter popover in offcanvas UI

packages/block-editor/package.json

@@ -44,6 +44,7 @@
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
+		"@wordpress/escape-html": "file:../escape-html",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

packages/block-editor/src/components/inserter/index.js

@@ -260,6 +260,7 @@ export default compose( [
 					allowedBlockType,
 					directInsertBlock,
 					onSelectOrClose,
+					selectBlockOnInsert,
 				} = ownProps;
 
 				if ( ! hasSingleBlockType && ! directInsertBlock ) {
@@ -370,10 +371,17 @@ export default compose( [
 					blockToInsert = createBlock( allowedBlockType.name );
 				}
 
-				insertBlock( blockToInsert, getInsertionIndex(), rootClientId );
+				insertBlock(
+					blockToInsert,
+					getInsertionIndex(),
+					rootClientId,
+					selectBlockOnInsert
+				);
 
 				if ( onSelectOrClose ) {
-					onSelectOrClose();
+					onSelectOrClose( {
+						insertedBlockId: blockToInsert?.clientId,
+					} );
 				}
 
 				const message = sprintf(

packages/block-editor/src/components/off-canvas-editor/appender.js

@@ -1,15 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { forwardRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
+import { LinkUI } from './link-ui';
+import { updateAttributes } from './update-attributes';
 
 export const Appender = forwardRef( ( props, ref ) => {
+	const [ insertedBlock, setInsertedBlock ] = useState();
+
 	const { hideInserter, clientId } = useSelect( ( select ) => {
 		const {
 			getTemplateLock,
@@ -27,18 +31,71 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
+	const { insertedBlockAttributes } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			return {
+				insertedBlockAttributes: getBlockAttributes( insertedBlock ),
+			};
+		},
+		[ insertedBlock ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const setAttributes =
+		( insertedBlockClientId ) => ( _updatedAttributes ) => {
+			updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+		};
+
+	let maybeLinkUI;
+
+	if ( insertedBlock ) {
+		const link = {
+			url: insertedBlockAttributes.url,
+			opensInNewTab: insertedBlockAttributes.opensInNewTab,
+			title: insertedBlockAttributes.label,
+		};
+		maybeLinkUI = (
+			<LinkUI
+				clientId={ insertedBlock }
+				value={ link }
+				linkAttributes={ {
+					type: insertedBlockAttributes.type,
+					url: insertedBlockAttributes.url,
+					kind: insertedBlockAttributes.kind,
+				} }
+				onClose={ () => setInsertedBlock( null ) }
+				hasCreateSuggestion={ false }
+				onChange={ ( updatedValue ) => {
+					updateAttributes(
+						updatedValue,
+						setAttributes( insertedBlock ),
+						insertedBlockAttributes
+					);
+					setInsertedBlock( null );
+				} }
+			/>
+		);
+	}
+
 	if ( hideInserter ) {
 		return null;
 	}
 
 	return (
 		<div className="offcanvas-editor__appender">
+			{ maybeLinkUI }
 			<Inserter
 				ref={ ref }
 				rootClientId={ clientId }
 				position="bottom right"
-				isAppender
-				__experimentalIsQuick
+				isAppender={ true }
+				selectBlockOnInsert={ false }
+				onSelectOrClose={ ( { insertedBlockId } ) => {
+					setInsertedBlock( insertedBlockId );
+				} }
 				{ ...props }
 			/>
 		</div>

packages/block-editor/src/components/off-canvas-editor/link-ui.js

@@ -0,0 +1,160 @@
+// Note: this file is copied directly from packages/block-library/src/navigation-link/link-ui.js
+
+/**
+ * WordPress dependencies
+ */
+import { Popover, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { switchToBlockType } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import LinkControl from '../link-control';
+import BlockIcon from '../block-icon';
+
+/**
+ * Given the Link block's type attribute, return the query params to give to
+ * /wp/v2/search.
+ *
+ * @param {string} type Link block's type attribute.
+ * @param {string} kind Link block's entity of kind (post-type|taxonomy)
+ * @return {{ type?: string, subtype?: string }} Search query params.
+ */
+export function getSuggestionsQuery( type, kind ) {
+	switch ( type ) {
+		case 'post':
+		case 'page':
+			return { type: 'post', subtype: type };
+		case 'category':
+			return { type: 'term', subtype: 'category' };
+		case 'tag':
+			return { type: 'term', subtype: 'post_tag' };
+		case 'post_format':
+			return { type: 'post-format' };
+		default:
+			if ( kind === 'taxonomy' ) {
+				return { type: 'term', subtype: type };
+			}
+			if ( kind === 'post-type' ) {
+				return { type: 'post', subtype: type };
+			}
+			return {};
+	}
+}
+
+/**
+ * Add transforms to Link Control
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.clientId Block client ID.
+ */
+function LinkControlTransforms( { clientId } ) {
+	const { getBlock, blockTransforms } = useSelect(
+		( select ) => {
+			const {
+				getBlock: _getBlock,
+				getBlockRootClientId,
+				getBlockTransformItems,
+			} = select( blockEditorStore );
+
+			return {
+				getBlock: _getBlock,
+				blockTransforms: getBlockTransformItems(
+					_getBlock( clientId ),
+					getBlockRootClientId( clientId )
+				),
+			};
+		},
+		[ clientId ]
+	);
+
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const featuredBlocks = [
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+
+	const transforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item?.name );
+	} );
+
+	if ( ! transforms?.length ) {
+		return null;
+	}
+
+	if ( ! clientId ) {
+		return null;
+	}
+
+	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={ () =>
+								replaceBlock(
+									clientId,
+									switchToBlockType(
+										getBlock( clientId ),
+										item.name
+									)
+								)
+							}
+							className="link-control-transform__item"
+						>
+							<BlockIcon icon={ item.icon } />
+							{ item.title }
+						</Button>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+}
+
+export function LinkUI( props ) {
+	return (
+		<Popover
+			placement="bottom"
+			onClose={ props?.onClose }
+			anchor={ props?.anchor }
+			shift
+		>
+			<LinkControl
+				hasTextControl
+				hasRichPreviews
+				className="wp-block-navigation-link__inline-link-input"
+				value={ props?.value }
+				showInitialSuggestions={ true }
+				withCreateSuggestion={ props?.hasCreateSuggestion }
+				noDirectEntry={ !! props?.linkAttributes?.type }
+				noURLSuggestion={ !! props?.linkAttributes?.type }
+				suggestionsQuery={ getSuggestionsQuery(
+					props?.linkAttributes?.type,
+					props?.linkAttributes?.kind
+				) }
+				onChange={ props.onChange }
+				onRemove={ props.onRemove }
+				renderControlBottom={
+					! props?.linkAttributes?.url
+						? () => (
+								<LinkControlTransforms
+									clientId={ props?.clientId }
+								/>
+						  )
+						: null
+				}
+			/>
+		</Popover>
+	);
+}