@wordpress/block-library 11.0.2-next.v.202609171837.0 → 11.2.0

package/src/list/block.json

@@ -58,6 +58,15 @@
 				"fontSize": true
 			}
 		},
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -74,6 +83,7 @@
 				"padding": false
 			}
 		},
+		"shadow": true,
 		"__unstablePasteTextInline": true,
 		"__experimentalOnMerge": true,
 		"__experimentalSlashInserter": true,
@@ -83,7 +93,8 @@
 		"listView": true
 	},
 	"selectors": {
-		"border": ".wp-block-list:not(.wp-block-list .wp-block-list)"
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list)",
+		"shadow": ".wp-block-list:not(.wp-block-list .wp-block-list)"
 	},
 	"editorStyle": "wp-block-list-editor",
 	"style": "wp-block-list"

package/src/list-item/README.md

@@ -33,6 +33,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `false`
 - [`splitting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#splitting): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
@@ -40,6 +44,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
@@ -52,6 +57,7 @@ _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/refe
 
 - **root**: `.wp-block-list > li`
 - **border**: `.wp-block-list:not(.wp-block-list .wp-block-list) > li`
+- **shadow**: `.wp-block-list:not(.wp-block-list .wp-block-list) > li`
 
 ## Block Markup
 

package/src/list-item/block.json

@@ -24,6 +24,11 @@
 		"html": false,
 		"className": false,
 		"splitting": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -46,6 +51,7 @@
 				"padding": false
 			}
 		},
+		"shadow": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -65,6 +71,7 @@
 	},
 	"selectors": {
 		"root": ".wp-block-list > li",
-		"border": ".wp-block-list:not(.wp-block-list .wp-block-list) > li"
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list) > li",
+		"shadow": ".wp-block-list:not(.wp-block-list .wp-block-list) > li"
 	}
 }

package/src/list-item/index.js

@@ -1,5 +1,6 @@
 import { listItem as icon } from '@wordpress/icons';
 import { privateApis } from '@wordpress/block-editor';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
@@ -7,12 +8,16 @@ import save from './save';
 import transforms from './transforms';
 import { unlock } from '../lock-unlock';
 
+const { editableRootKey } = unlock( blocksPrivateApis );
+
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
 	icon,
+	// Opt into the editing host behaviour privately, like the paragraph.
+	[ editableRootKey ]: true,
 	edit,
 	save,
 	merge( attributes, attributesToMerge ) {

package/src/loginout/README.md

@@ -24,17 +24,25 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/loginout/block.json

@@ -23,12 +23,25 @@
 	"supports": {
 		"anchor": true,
 		"className": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"background": true,
 			"text": false,
 			"gradients": true,
 			"link": true
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -56,6 +69,7 @@
 			"width": true,
 			"style": true
 		},
+		"shadow": true,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/math/README.md

@@ -24,8 +24,16 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`

package/src/math/block.json

@@ -16,6 +16,15 @@
 			"style": true,
 			"width": true
 		},
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"__experimentalDefaultControls": {
@@ -23,6 +32,11 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/media-text/README.md

@@ -42,16 +42,27 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
+  - [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 - [`allowedBlocks`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#allowedblocks): `true`
@@ -65,6 +76,13 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 - `postId`
 - `postType`
 
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **filter**:
+  - duotone: `.wp-block-media-text > .wp-block-media-text__media img, .wp-block-media-text > .wp-block-media-text__media video`
+
 ## Block Markup
 
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.

package/src/media-text/block.json

@@ -100,6 +100,11 @@
 		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -116,15 +121,21 @@
 			"gradients": true,
 			"heading": true,
 			"link": true,
+			"button": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true
 		},
+		"shadow": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -138,11 +149,19 @@
 				"fontSize": true
 			}
 		},
+		"filter": {
+			"duotone": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		},
 		"allowedBlocks": true
 	},
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-media-text > .wp-block-media-text__media img, .wp-block-media-text > .wp-block-media-text__media video"
+		}
+	},
 	"editorStyle": "wp-block-media-text-editor",
 	"style": "wp-block-media-text"
 }

package/src/media-text/style.scss

@@ -52,11 +52,15 @@
 	grid-column: 2;
 	grid-row: 1;
 	/*rtl:end:ignore*/
-	padding: 0 8% 0 8%;
 	// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 	word-break: break-word;
 }
 
+// Zero specificity so the default padding can be overridden by theme.json or theme styles.
+:where(.wp-block-media-text > .wp-block-media-text__content) {
+	padding: 0 8%;
+}
+
 .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*rtl:begin:ignore*/
 	grid-column: 2;

package/src/navigation/edit/index.jsx

@@ -295,10 +295,8 @@ function Navigation( {
 		hasSelectedStyleState,
 	} = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				hasSelectedStyleState: hasSelectedBlockStyleState,
-			} = unlock( select( blockEditorStore ) );
+			const { getSettings, hasSelectedBlockStyleState } =
+				select( blockEditorStore );
 			const settings = getSettings();
 
 			return {

package/src/navigation/style.scss

@@ -123,6 +123,24 @@ $navigation-icon-size: 24px;
 		--navigation-layout-direction: column;
 		--navigation-layout-justify: initial;
 		--navigation-layout-align: flex-start;
+
+		// Align wrapped label text with the item justification. Only vertical
+		// menus need it: a horizontal item is only ever as wide as its own text.
+		text-align: var(--navigation-layout-text-align, inherit);
+
+		// Buttons declare their own text-align, and a directly declared value
+		// beats an inherited one, so opt submenu toggles back in.
+		.wp-block-navigation-item__content {
+			text-align: inherit;
+		}
+
+		// Flyout submenus are separate panels, so they keep their own
+		// alignment rather than following the parent menu's justification.
+		// open-always submenus render inline as part of the same vertical
+		// stack instead, so they should keep following it.
+		.wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container {
+			text-align: initial;
+		}
 	}
 
 	&.no-wrap {
@@ -132,6 +150,7 @@ $navigation-icon-size: 24px;
 	&.items-justified-center {
 		--navigation-layout-justification-setting: center;
 		--navigation-layout-justify: center;
+		--navigation-layout-text-align: center;
 
 		&.is-vertical {
 			--navigation-layout-align: center;
@@ -141,6 +160,7 @@ $navigation-icon-size: 24px;
 	&.items-justified-right {
 		--navigation-layout-justification-setting: flex-end;
 		--navigation-layout-justify: flex-end;
+		--navigation-layout-text-align: end;
 
 		&.is-vertical {
 			--navigation-layout-align: flex-end;
@@ -248,18 +268,18 @@ $navigation-icon-size: 24px;
 		height: auto;
 	}
 
-	// Show submenus on hover unless they open on click.
+	// Show submenus on hover unless they open on click or are always shown.
 	// Restricted to true-hover devices to prevent sticky touch-hover on mobile.
 	@media (hover: hover) {
-		&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+		&:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container {
 			@include show-submenu;
 			min-width: 200px;
 		}
 	}
 	// Keep submenus open when focus is within.
-	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
+	&:not(.open-on-click):not(.open-on-hover-click):not(.open-always):focus-within > .wp-block-navigation__submenu-container,
 	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
+	&:not(.open-always) .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
 		@include show-submenu;
 		min-width: 200px;
 	}
@@ -313,6 +333,8 @@ $navigation-icon-size: 24px;
 			border: none;
 			background-color: transparent;
 			color: inherit;
+			// Has to be !important to override the inline instance style.
+			box-shadow: none !important;
 		}
 	}
 }
@@ -607,6 +629,7 @@ button.wp-block-navigation-item__content {
 
 				// Inherit alignment settings from container.
 				align-items: var(--navigation-layout-justification-setting, inherit);
+				text-align: var(--navigation-layout-text-align, inherit);
 
 				// Always align the contents of the menu to the top.
 				&,
@@ -645,11 +668,18 @@ button.wp-block-navigation-item__content {
 				// Apply top padding to nested submenus.
 				.wp-block-navigation__submenu-container {
 					padding-top: var(--wp--style--block-gap, 2em);
+
+					// Unfolded inline here, not shown as a panel, so submenus
+					// follow the menu's justification.
+					text-align: inherit;
 				}
 
 				// A default padding is added to submenu items. It's not appropriate inside the modal.
 				.wp-block-navigation-item__content {
 					padding: 0;
+
+					// See the note on submenu toggles above.
+					text-align: inherit;
 				}
 
 				// Default column display for overlay menu contents.
@@ -673,6 +703,12 @@ button.wp-block-navigation-item__content {
 				background: transparent !important;
 			}
 
+			// Submenus unfold inline here, so drop the dropdown shadow.
+			// Has to be !important to override the inline instance style.
+			.wp-block-navigation-item .wp-block-navigation__submenu-container {
+				box-shadow: none !important;
+			}
+
 			// Override justification dropdown menu positioning rules.
 			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 				right: auto;

package/src/navigation/test/use-navigation-menu.jsdom.test.js

@@ -3,7 +3,7 @@ import { createRegistry, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import useNavigationMenu from '../use-navigation-menu';
 
-vi.mock( '@wordpress/api-fetch' );
+vi.mock( import( '@wordpress/api-fetch' ) );
 
 const BASE_ENTITY = {
 	kind: 'postType',

package/src/navigation-link/README.md

@@ -1,4 +1,4 @@
-# Custom Link
+# Navigation Link
 
 <!-- START TOKEN(Autogenerated block API docs) -->
 Add a page, link, or another item to your navigation.

package/src/navigation-link/editor.scss

@@ -35,11 +35,16 @@
 			// We use important here because if the parent block is selected and submenus are present, they should always be visible.
 			visibility: visible !important;
 			opacity: 1 !important;
-			min-width: 200px !important;
 			height: auto !important;
 			width: auto !important;
 			overflow: visible !important;
 		}
+
+		// Always-open submenus are laid out inline rather than as a flyout,
+		// so the flyout minimum width would only make them jump when selected.
+		&:not(.open-always) > .wp-block-navigation__submenu-container {
+			min-width: 200px !important;
+		}
 	}
 }
 

package/src/navigation-link/link-ui/index.jsx

@@ -20,49 +20,62 @@ import { VisuallyHidden } from '@wordpress/ui';
 import { isURL } from '@wordpress/url';
 import { LinkUIPageCreator } from './page-creator';
 import LinkUIBlockInserter from './block-inserter';
-import { useEntityBinding, useLinkPreview } from '../shared';
+import {
+	isBlockSuggestion,
+	useBlockSuggestions,
+	useEntityBinding,
+	useLinkPreview,
+} from '../shared';
 
 /**
- * Given the Link block's type attribute, return the query params to give to
- * /wp/v2/search.
+ * Given the Link block's type attribute, return the query params for that one
+ * entity type.
  *
  * @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.
+ * @return {{ type: string, subtype?: string }} Search query params.
  */
-export function getSuggestionsQuery( type, kind ) {
-	// How many results to show initially and per search.
-	const perPage = 20;
-
+function getOwnTypeSearchOptions( type, kind ) {
 	switch ( type ) {
 		case 'post':
 		case 'page':
-			return { type: 'post', subtype: type, perPage };
+			return { type: 'post', subtype: type };
 		case 'category':
-			return { type: 'term', subtype: 'category', perPage };
+			return { type: 'term', subtype: 'category' };
 		case 'tag':
-			return { type: 'term', subtype: 'post_tag', perPage };
+			return { type: 'term', subtype: 'post_tag' };
 		case 'post_format':
-			return { type: 'post-format', perPage };
+			return { type: 'post-format' };
 		default:
 			if ( kind === 'taxonomy' ) {
-				return { type: 'term', subtype: type, perPage };
+				return { type: 'term', subtype: type };
 			}
 			if ( kind === 'post-type' ) {
-				return { type: 'post', subtype: type, perPage };
+				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,
-				},
-			};
+			// for custom link which has no type
+			// always show pages as initial suggestions
+			return { type: 'post', subtype: 'page' };
 	}
 }
 
+/**
+ * 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 {Object} Search query params.
+ */
+export function getSuggestionsQuery( type, kind ) {
+	const ownType = getOwnTypeSearchOptions( type, kind );
+
+	return {
+		preferTypes: [ ownType.subtype ? ownType : ownType.type ],
+		initialSuggestionsSearchOptions: { ...ownType, perPage: 20 },
+	};
+}
+
 function UnforwardedLinkUI( props, ref ) {
 	const { label, url, opensInNewTab, type, kind, id } = props.link;
 
@@ -179,6 +192,18 @@ function UnforwardedLinkUI( props, ref ) {
 	}, [ shouldFocusPane ] );
 
 	const blockEditingMode = useBlockEditingMode();
+	const canAddBlock = blockEditingMode !== 'disabled';
+
+	// Blocks are listed in the search results only when the "Add block"
+	// button would be shown: the link has no URL yet and the block is not
+	// locked.
+	const { transformSuggestions, insertBlockFromSuggestion } =
+		useBlockSuggestions( {
+			clientId,
+			isEnabled: canAddBlock && ! link?.url?.length,
+			onBlockInsert: props.onBlockInsert,
+			onClose: props.onClose,
+		} );
 
 	return (
 		<Popover
@@ -213,7 +238,17 @@ function UnforwardedLinkUI( props, ref ) {
 						noDirectEntry={ !! type }
 						noURLSuggestion={ !! type }
 						suggestionsQuery={ getSuggestionsQuery( type, kind ) }
-						onChange={ props.onChange }
+						transformSuggestions={ transformSuggestions }
+						onChange={ ( updatedValue ) => {
+							if ( isBlockSuggestion( updatedValue ) ) {
+								insertBlockFromSuggestion(
+									updatedValue.blockItemId
+								);
+								return;
+							}
+
+							props.onChange( updatedValue );
+						} }
 						onInputChange={ ( value ) => {
 							// Observe the input value so we can pass the value to the page creator
 							// and restore it on back button click
@@ -245,9 +280,7 @@ function UnforwardedLinkUI( props, ref ) {
 										permissions?.canCreate &&
 										type === 'page'
 									}
-									canAddBlock={
-										blockEditingMode !== 'disabled'
-									}
+									canAddBlock={ canAddBlock }
 								/>
 							);
 						} }

package/src/navigation-link/link-ui/page-creator.jsx

@@ -2,7 +2,7 @@ import {
 	Button,
 	TextControl,
 	Notice,
-	CheckboxControl,
+	CheckboxControl as WCCheckboxControl,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
@@ -127,7 +127,7 @@ export function LinkUIPageCreator( {
 							value={ title }
 						/>
 
-						<CheckboxControl
+						<WCCheckboxControl
 							label={ __( 'Publish' ) }
 							help={ __(
 								"Turn off to save as a draft. Drafts won't appear on your site until published."