Button Block: Add draft page creation capability

packages/block-library/src/button/edit.js

@@ -15,7 +15,13 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import {
+	useEffect,
+	useState,
+	useRef,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
 import {
 	TextControl,
 	ToolbarButton,
@@ -52,6 +58,49 @@ import {
 } from '@wordpress/blocks';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	store as coreStore,
+	useResourcePermissions,
+} from '@wordpress/core-data';
+
+/**
+ * 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.
+ */
+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 {
+				// for custom link which has no type
+				// always show pages as initial suggestions
+				initialSuggestionsSearchOptions: {
+					type: 'post',
+					subtype: 'page',
+					perPage: 20,
+				},
+			};
+	}
+}
 
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
@@ -219,6 +268,28 @@ function ButtonEdit( props ) {
 	const nofollow = !! rel?.includes( NOFOLLOW_REL );
 	const isLinkTag = 'a' === TagName;
 
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const postType = 'page';
+	const permissions = useResourcePermissions( {
+		kind: 'postType',
+		name: postType,
+	} );
+
+	async function handleCreate( pageTitle ) {
+		const page = await saveEntityRecord( 'postType', postType, {
+			title: pageTitle,
+			status: 'draft',
+		} );
+
+		return {
+			id: page.id,
+			type: postType,
+			title: decodeEntities( page.title.rendered ),
+			url: page.link,
+			kind: 'post-type',
+		};
+	}
+
 	function startEditing( event ) {
 		event.preventDefault();
 		setIsEditingURL( true );
@@ -400,6 +471,27 @@ function ButtonEdit( props ) {
 							} }
 							forceIsEditingLink={ isEditingURL }
 							settings={ LINK_SETTINGS }
+							withCreateSuggestion={ permissions.canCreate }
+							createSuggestion={ handleCreate }
+							createSuggestionButtonText={ ( searchTerm ) => {
+								return createInterpolateElement(
+									sprintf(
+										/* translators: %s: search term. */
+										__(
+											'Create draft page: <mark>%s</mark>'
+										),
+										searchTerm
+									),
+									{
+										mark: <mark />,
+									}
+								);
+							} }
+							showInitialSuggestions
+							suggestionsQuery={ getSuggestionsQuery(
+								postType,
+								'post-type'
+							) }
 						/>
 					</Popover>
 				) }