Enable ability to create Pages from the inline Link UI

packages/block-editor/src/components/link-control/style.scss

@@ -380,6 +380,18 @@ $preview-image-height: 140px;
 	}
 }
 
+.block-editor-link-control__search-create {
+	align-items: center; // align text with icon.
+
+	.block-editor-link-control__search-item-title {
+		margin-bottom: 0;
+	}
+
+	.block-editor-link-control__search-item-icon {
+		top: 0; // cancel compensatory spacing added to default suggestions.
+	}
+}
+
 // Specificity overide
 .block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
 	padding: 10px;

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -13,6 +13,7 @@ import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -33,6 +34,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		reusableBlocks,
 		hasUploadPermissions,
 		canUseUnfilteredHTML,
+		userCanCreatePages,
 	} = useSelect( ( select ) => {
 		const { canUserUseUnfilteredHTML } = select( editorStore );
 		const isWeb = Platform.OS === 'web';
@@ -61,11 +63,30 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			),
 			hasResolvedLocalSiteData: hasFinishedResolvingSiteData,
 			baseUrl: siteData?.url || '',
+			userCanCreatePages: canUser( 'create', 'pages' ),
 		};
 	}, [] );
 
 	const { undo } = useDispatch( editorStore );
 
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	/**
+	 * Creates a Post entity.
+	 * This is utilised by the Link UI to allow for on-the-fly creation of Posts/Pages.
+	 *
+	 * @param {Object} options parameters for the post being created. These mirror those used on 3rd param of saveEntityRecord.
+	 * @return {Object} the post type object that was created.
+	 */
+	const createPageEntity = ( options ) => {
+		if ( ! userCanCreatePages ) {
+			return Promise.reject( {
+				message: __( 'You do not have permission to create Pages.' ),
+			} );
+		}
+		return saveEntityRecord( 'postType', 'page', options );
+	};
+
 	return useMemo(
 		() => ( {
 			...pick( settings, [
@@ -117,6 +138,8 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			__experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML,
 			__experimentalUndo: undo,
 			outlineMode: hasTemplate,
+			__experimentalCreatePageEntity: createPageEntity,
+			__experimentalUserCanCreatePages: userCanCreatePages,
 		} ),
 		[
 			settings,
@@ -125,6 +148,9 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			canUseUnfilteredHTML,
 			undo,
 			hasTemplate,
+
+			userCanCreatePages,
+			createPageEntity,
 		]
 	);
 }

packages/format-library/src/link/inline.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { useState, useRef, createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { withSpokenMessages, Popover } from '@wordpress/components';
 import { prependHTTP } from '@wordpress/url';
 import {
@@ -13,7 +13,11 @@ import {
 	useAnchorRef,
 	removeFormat,
 } from '@wordpress/rich-text';
-import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
+import {
+	__experimentalLinkControl as LinkControl,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -41,6 +45,16 @@ function InlineLinkUI( {
 	 */
 	const [ nextLinkValue, setNextLinkValue ] = useState();
 
+	const { createPageEntity, userCanCreatePages } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const _settings = getSettings();
+
+		return {
+			createPageEntity: _settings.__experimentalCreatePageEntity,
+			userCanCreatePages: _settings.__experimentalUserCanCreatePages,
+		};
+	}, [] );
+
 	const linkValue = {
 		url: activeAttributes.url,
 		type: activeAttributes.type,
@@ -137,6 +151,32 @@ function InlineLinkUI( {
 	// otherwise it causes a render of the content.
 	const focusOnMount = useRef( addingLink ? 'firstElement' : false );
 
+	async function handleCreate( pageTitle ) {
+		const page = await createPageEntity( {
+			title: pageTitle,
+			status: 'draft',
+		} );
+
+		return {
+			id: page.id,
+			type: page.type,
+			title: page.title.rendered,
+			url: page.link,
+			kind: 'post-type',
+		};
+	}
+
+	function createButtonText( searchTerm ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: search term. */
+				__( 'Create Page: <mark>%s</mark>' ),
+				searchTerm
+			),
+			{ mark: <mark /> }
+		);
+	}
+
 	return (
 		<Popover
 			anchorRef={ anchorRef }
@@ -150,6 +190,9 @@ function InlineLinkUI( {
 				onRemove={ removeLink }
 				forceIsEditingLink={ addingLink }
 				hasRichPreviews
+				createSuggestion={ createPageEntity && handleCreate }
+				withCreateSuggestion={ userCanCreatePages }
+				createSuggestionButtonText={ createButtonText }
 			/>
 		</Popover>
 	);