@wordpress/block-library 11.1.0 → 11.2.0

package/src/latest-posts/block.json

@@ -97,6 +97,10 @@
 				"link": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/list/README.md

@@ -37,12 +37,17 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
+- [`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`
 - [`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`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 - [`listView`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#listview): `true`
@@ -52,6 +57,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
 - **border**: `.wp-block-list:not(.wp-block-list .wp-block-list)`
+- **shadow**: `.wp-block-list:not(.wp-block-list .wp-block-list)`
 
 ## Block Markup
 

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

@@ -33,6 +33,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`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`

package/src/loginout/block.json

@@ -38,6 +38,10 @@
 			"gradients": true,
 			"link": true
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/math/README.md

@@ -30,6 +30,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `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`

package/src/math/block.json

@@ -32,6 +32,10 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"shadow": true,
 		"spacing": {
 			"margin": true,

package/src/media-text/README.md

@@ -42,17 +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`
@@ -66,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,
@@ -122,10 +127,15 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true
 		},
+		"shadow": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -139,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/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/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/test/get-suggestions-query.jsdom.test.js

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { getSuggestionsQuery } from '..';
+
+const PER_PAGE = 20;
+
+const LINK_TYPES = [
+	[ 'page', 'post-type', { type: 'post', subtype: 'page' } ],
+	[ 'post', 'post-type', { type: 'post', subtype: 'post' } ],
+	[ 'category', 'taxonomy', { type: 'term', subtype: 'category' } ],
+	[ 'tag', 'taxonomy', { type: 'term', subtype: 'post_tag' } ],
+	[ 'post_format', 'taxonomy', { type: 'post-format' } ],
+	[ 'event', 'post-type', { type: 'post', subtype: 'event' } ],
+	[ 'genre', 'taxonomy', { type: 'term', subtype: 'genre' } ],
+];
+
+describe( 'getSuggestionsQuery', () => {
+	// A typed search is unscoped: naming no type leaves every endpoint to
+	// answer it, which is what lets a category be found from a page link.
+	it.each( LINK_TYPES )(
+		'searches every entity type from a %s link',
+		( type, kind ) => {
+			const query = getSuggestionsQuery( type, kind );
+
+			expect( query.type ).toBeUndefined();
+			expect( query.subtype ).toBeUndefined();
+		}
+	);
+
+	// Searching everything only helps if the link's own kind leads, so the
+	// block names it rather than narrowing to it.
+	it.each( LINK_TYPES )(
+		'ranks the %s link’s own type above the usual order',
+		( type, kind, expected ) => {
+			expect( getSuggestionsQuery( type, kind ).preferTypes ).toEqual( [
+				expected.subtype ? expected : expected.type,
+			] );
+		}
+	);
+
+	// Before anything is typed there is nothing to rank, so the preview is
+	// narrowed to the link's own type instead.
+	it.each( LINK_TYPES )(
+		'suggests the %s link’s own type before anything is typed',
+		( type, kind, expected ) => {
+			expect(
+				getSuggestionsQuery( type, kind )
+					.initialSuggestionsSearchOptions
+			).toEqual( { ...expected, perPage: PER_PAGE } );
+		}
+	);
+
+	// A custom link points at a URL, and a link just inserted has no type at
+	// all, so neither has a kind of its own to preview. Pages are the most
+	// likely thing to link to.
+	it.each( [
+		[ 'a custom link', 'custom', 'custom' ],
+		[ 'a link with no type', undefined, undefined ],
+	] )(
+		'suggests pages before anything is typed for %s',
+		( _label, type, kind ) => {
+			expect(
+				getSuggestionsQuery( type, kind )
+					.initialSuggestionsSearchOptions
+			).toEqual( { type: 'post', subtype: 'page', perPage: PER_PAGE } );
+		}
+	);
+} );

package/src/navigation-link/shared/index.js

@@ -19,3 +19,7 @@ export { useEnableLinkStatusValidation } from './use-enable-link-status-validati
 export { useIsDraggingWithin } from './use-is-dragging-within';
 export { selectLabelText } from './select-label-text';
 export { useLinkPreview } from './use-link-preview';
+export {
+	isBlockSuggestion,
+	useBlockSuggestions,
+} from './use-block-suggestions';