Enable ability to create Pages from the inline Link UI

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

@@ -33,6 +33,8 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		reusableBlocks,
 		hasUploadPermissions,
 		canUseUnfilteredHTML,
+		userCanCreatePages,
+		userCanCreatePosts,
 	} = useSelect( ( select ) => {
 		const { canUserUseUnfilteredHTML } = select( editorStore );
 		const isWeb = Platform.OS === 'web';
@@ -61,11 +63,51 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			),
 			hasResolvedLocalSiteData: hasFinishedResolvingSiteData,
 			baseUrl: siteData?.url || '',
+			userCanCreatePages: select( coreStore ).canUser(
+				'create',
+				'pages'
+			),
+			userCanCreatePosts: select( coreStore ).canUser(
+				'create',
+				'posts'
+			),
 		};
 	}, [] );
 
 	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 {string} postType the post type of the "post" to be created.
+	 * @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 createEntity = ( postType, options ) => {
+		const postTypeWhitelist = [ 'post', 'page' ];
+
+		if ( ! postTypeWhitelist.includes( postType ) ) {
+			return Promise.reject( {
+				message: `Only Posts and Pages may be created.`,
+			} );
+		}
+
+		const permsOnEntity =
+			postType === 'page' ? userCanCreatePages : userCanCreatePosts;
+
+		const pluralType = postType === 'page' ? 'Pages' : 'Posts';
+
+		if ( ! permsOnEntity ) {
+			return Promise.reject( {
+				message: `You do not have permission to create ${ pluralType }.`,
+			} );
+		}
+		return saveEntityRecord( 'postType', postType, options );
+	};
+
 	return useMemo(
 		() => ( {
 			...pick( settings, [
@@ -117,6 +159,9 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			__experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML,
 			__experimentalUndo: undo,
 			outlineMode: hasTemplate,
+			__experimentalCreateEntity: createEntity,
+			__experimentalUserCanCreate:
+				userCanCreatePosts && userCanCreatePages,
 		} ),
 		[
 			settings,
@@ -125,6 +170,9 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			canUseUnfilteredHTML,
 			undo,
 			hasTemplate,
+			userCanCreatePosts,
+			userCanCreatePages,
+			createEntity,
 		]
 	);
 }

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

@@ -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 { createEntity, userCanCreate } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const _settings = getSettings();
+
+		return {
+			createEntity: _settings.__experimentalCreateEntity,
+			userCanCreate: _settings.__experimentalUserCanCreate,
+		};
+	}, [] );
+
 	const linkValue = {
 		url: activeAttributes.url,
 		type: activeAttributes.type,
@@ -137,6 +151,24 @@ function InlineLinkUI( {
 	// otherwise it causes a render of the content.
 	const focusOnMount = useRef( addingLink ? 'firstElement' : false );
 
+	async function handleCreate( pageTitle ) {
+		const type = 'page';
+		const postType = type || 'page';
+
+		const page = await createEntity( postType, {
+			title: pageTitle,
+			status: 'draft',
+		} );
+
+		return {
+			id: page.id,
+			type: postType,
+			title: page.title.rendered,
+			url: page.link,
+			kind: 'post-type',
+		};
+	}
+
 	return (
 		<Popover
 			anchorRef={ anchorRef }
@@ -150,6 +182,8 @@ function InlineLinkUI( {
 				onRemove={ removeLink }
 				forceIsEditingLink={ addingLink }
 				hasRichPreviews
+				createSuggestion={ createEntity && handleCreate }
+				withCreateSuggestion={ userCanCreate }
 			/>
 		</Popover>
 	);