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

package/src/tag-cloud/README.md

@@ -25,8 +25,17 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `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`
+  - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
+- [`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/tag-cloud/block.json

@@ -36,8 +36,27 @@
 	],
 	"supports": {
 		"anchor": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"html": false,
 		"align": true,
+		"color": {
+			"background": true,
+			"link": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"link": true
+			}
+		},
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/template-part/edit/selection-modal.jsx

@@ -27,7 +27,7 @@ export default function TemplatePartSelectionModal( {
 		templatePartId
 	);
 
-	// We can map template parts to block patters to reuse the BlockPatternsList UI
+	// We can map template parts to block patterns to reuse the BlockPatternsList UI
 	const filteredTemplateParts = useMemo( () => {
 		const partsAsPatterns = templateParts.map( ( templatePart ) =>
 			mapTemplatePartToBlockPattern( templatePart )

package/src/term-count/README.md

@@ -22,13 +22,19 @@ _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`
+- [`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):
   - `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`
+  - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/term-count/block.json

@@ -17,6 +17,11 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
 			"__experimentalDefaultControls": {
@@ -24,12 +29,14 @@
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/term-description/README.md

@@ -21,6 +21,10 @@ _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):
   - [`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):
@@ -32,6 +36,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 
 ## Context
 

package/src/term-description/block.json

@@ -11,6 +11,14 @@
 		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"link": true,
 			"__experimentalDefaultControls": {
@@ -39,6 +47,7 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"shadow": true,
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,

package/src/term-name/README.md

@@ -26,9 +26,14 @@ _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`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `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):
   - `padding`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):

package/src/term-name/block.json

@@ -25,6 +25,15 @@
 		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -34,6 +43,7 @@
 				"link": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"padding": true
 		},

package/src/term-name/index.php

@@ -33,7 +33,7 @@ function render_block_core_term_name( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$term_name = $term->name;
+	$term_name = get_term_field( 'name', $term );
 	$level     = $attributes['level'] ?? 0;
 	$tag_name  = 0 === $level ? 'p' : 'h' . (int) $level;
 

package/src/term-template/README.md

@@ -28,6 +28,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`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `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
   - `blockGap`: `{"__experimentalDefault":"1.25em"}`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 
 ## Context
 

package/src/term-template/block.json

@@ -14,6 +14,14 @@
 		"html": false,
 		"align": [ "wide", "full" ],
 		"layout": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -55,7 +63,8 @@
 			"color": true,
 			"width": true,
 			"style": true
-		}
+		},
+		"shadow": true
 	},
 	"style": "wp-block-term-template",
 	"editorStyle": "wp-block-term-template-editor"

package/src/utils/search-patterns.js

@@ -1,4 +1,7 @@
-import removeAccents from 'remove-accents';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { unlock } from '../lock-unlock';
+
+const { normalizeString, searchItems } = unlock( blockEditorPrivateApis );
 
 /**
  * Sanitizes the search input string.
@@ -8,49 +11,11 @@ import removeAccents from 'remove-accents';
  * @return {string} The normalized search input.
  */
 export function normalizeSearchInput( input = '' ) {
-	// Disregard diacritics.
-	input = removeAccents( input );
-
-	// Trim & Lowercase.
-	input = input.trim().toLowerCase();
-
-	return input;
-}
-
-/**
- * Get the search rank for a given pattern and a specific search term.
- *
- * @param {Object} pattern     Pattern to rank
- * @param {string} searchValue Search term
- * @return {number} A pattern search rank
- */
-export function getPatternSearchRank( pattern, searchValue ) {
-	const normalizedSearchValue = normalizeSearchInput( searchValue );
-	const normalizedTitle = normalizeSearchInput( pattern.title );
-
-	let rank = 0;
-
-	if ( normalizedSearchValue === normalizedTitle ) {
-		rank += 30;
-	} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) {
-		rank += 20;
-	} else {
-		const searchTerms = normalizedSearchValue.split( ' ' );
-		const hasMatchedTerms = searchTerms.every( ( searchTerm ) =>
-			normalizedTitle.includes( searchTerm )
-		);
-
-		// Prefer pattern with every search word in the title.
-		if ( hasMatchedTerms ) {
-			rank += 10;
-		}
-	}
-
-	return rank;
+	return normalizeString( input ).trim();
 }
 
 /**
- * Filters an pattern list given a search term.
+ * Filters a pattern list given a search term.
  *
  * @param {Array}  patterns    Item list
  * @param {string} searchValue Search input.
@@ -58,16 +23,7 @@ export function getPatternSearchRank( pattern, searchValue ) {
  * @return {Array} Filtered pattern list.
  */
 export function searchPatterns( patterns = [], searchValue = '' ) {
-	if ( ! searchValue ) {
-		return patterns;
-	}
-
-	const rankedPatterns = patterns
-		.map( ( pattern ) => {
-			return [ pattern, getPatternSearchRank( pattern, searchValue ) ];
-		} )
-		.filter( ( [ , rank ] ) => rank > 0 );
-
-	rankedPatterns.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
-	return rankedPatterns.map( ( [ pattern ] ) => pattern );
+	return searchItems( patterns, searchValue, {
+		fields: [ { get: ( pattern ) => pattern.title } ],
+	} );
 }

package/src/utils/style-state.js

@@ -1,9 +1,11 @@
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	getStyleForState,
+	setStyleForState,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { unlock } from '../lock-unlock';
 
-const { cleanEmptyObject, getStyleForState, setStyleForState } = unlock(
-	blockEditorPrivateApis
-);
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 function getStateStyle( style, selectedState ) {
 	return getStyleForState( style, selectedState ) || {};

package/src/utils/test/{search-patterns.js → search-patterns.jsdom.test.js}

@@ -1,9 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import {
-	normalizeSearchInput,
-	getPatternSearchRank,
-	searchPatterns,
-} from '../search-patterns';
+import { normalizeSearchInput, searchPatterns } from '../search-patterns';
 
 describe( 'normalizeSearchInput', () => {
 	it( 'should remove accents', () => {
@@ -15,23 +11,6 @@ describe( 'normalizeSearchInput', () => {
 	} );
 } );
 
-describe( 'getPatternSearchRank', () => {
-	it( 'should give a high rank to exact matches', () => {
-		const pattern = { title: 'Foo' };
-		expect( getPatternSearchRank( pattern, 'Foo' ) ).toBe( 30 );
-	} );
-
-	it( 'should give a high rank to prefix matches', () => {
-		const pattern = { title: 'Foo' };
-		expect( getPatternSearchRank( pattern, 'Fo' ) ).toBe( 20 );
-	} );
-
-	it( 'should give a low rank to no matches', () => {
-		const pattern = { title: 'Foo' };
-		expect( getPatternSearchRank( pattern, 'Bar' ) ).toBe( 0 );
-	} );
-} );
-
 describe( 'searchPatterns', () => {
 	it( 'should return all patterns if no search term is provided', () => {
 		const patterns = [ { title: 'Foo' }, { title: 'Bar' } ];

package/src/video/README.md

@@ -41,6 +41,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `padding`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
+
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **shadow**: `.wp-block-video video`
 
 ## Block Markup
 

package/src/video/block.json

@@ -101,8 +101,14 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
 		}
 	},
+	"selectors": {
+		"shadow": ".wp-block-video video"
+	},
 	"editorStyle": "wp-block-video-editor",
 	"style": "wp-block-video"
 }

package/src/video/edit.jsx

@@ -13,6 +13,7 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	useBlockEditingMode,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -30,7 +31,6 @@ import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 import PosterImage from '../utils/poster-image';
-import { isGifVariation } from './variations';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 
@@ -43,8 +43,19 @@ function VideoEdit( {
 	onReplace,
 } ) {
 	const videoPlayer = useRef();
-	const { id, controls, poster, src, tracks, width, height } = attributes;
-	const isGif = isGifVariation( attributes );
+	const {
+		id,
+		controls,
+		poster,
+		src,
+		tracks,
+		width,
+		height,
+		autoplay,
+		loop,
+		muted,
+		playsInline,
+	} = attributes;
 	// Give the <video> an explicit (non-`auto`) aspect ratio derived from the
 	// stored dimensions. The width/height attributes alone only yield
 	// `aspect-ratio: auto W/H`, whose `auto` keyword defers to the element's
@@ -54,6 +65,10 @@ function VideoEdit( {
 	// swap. A non-`auto` ratio governs the box height throughout the load.
 	const aspectRatio =
 		width && height ? `${ width } / ${ height }` : undefined;
+	const videoStyle = {
+		...( aspectRatio && { aspectRatio } ),
+		...getShadowClassesAndStyles( attributes ).style,
+	};
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const blockEditingMode = useBlockEditingMode();
@@ -72,18 +87,6 @@ function VideoEdit( {
 			videoPlayer.current.load();
 		}
 	}, [ poster ] );
-
-	// The GIF variation plays like an animated GIF in the editor (the playback
-	// attributes are applied to the preview <video> below). Regular videos do
-	// not autoplay in the editor, so only nudge GIFs into playing after a
-	// source change in case the muted autoplay did not start on its own.
-	useEffect( () => {
-		if ( isGif ) {
-			// Browsers allow muted videos to be played programmatically.
-			videoPlayer.current?.play().catch( () => {} );
-		}
-	}, [ isGif, src, poster ] );
-
 	// TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes.
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
@@ -214,38 +217,36 @@ function VideoEdit( {
 					</BlockControls>
 				</>
 			) }
-			{ ! isGif && (
-				<InspectorControls>
-					<ToolsPanel
-						label={ __( 'Settings' ) }
-						resetAll={ () => {
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							autoplay: false,
+							controls: true,
+							loop: false,
+							muted: false,
+							playsInline: false,
+							preload: 'metadata',
+							poster: undefined,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<VideoCommonSettings
+						setAttributes={ setAttributes }
+						attributes={ attributes }
+					/>
+					<PosterImage
+						poster={ poster }
+						onChange={ ( posterImage ) =>
 							setAttributes( {
-								autoplay: false,
-								controls: true,
-								loop: false,
-								muted: false,
-								playsInline: false,
-								preload: 'metadata',
-								poster: undefined,
-							} );
-						} }
-						dropdownMenuProps={ dropdownMenuProps }
-					>
-						<VideoCommonSettings
-							setAttributes={ setAttributes }
-							attributes={ attributes }
-						/>
-						<PosterImage
-							poster={ poster }
-							onChange={ ( posterImage ) =>
-								setAttributes( {
-									poster: posterImage?.url,
-								} )
-							}
-						/>
-					</ToolsPanel>
-				</InspectorControls>
-			) }
+								poster: posterImage?.url,
+							} )
+						}
+					/>
+				</ToolsPanel>
+			</InspectorControls>
 			<figure { ...blockProps }>
 				<video
 					controls={ controls }
@@ -253,13 +254,17 @@ function VideoEdit( {
 					poster={ poster }
 					src={ src || temporaryURL }
 					ref={ videoPlayer }
-					autoPlay={ isGif }
-					loop={ isGif }
-					muted={ isGif }
-					playsInline={ isGif }
+					autoPlay={ autoplay }
+					loop={ loop }
+					muted={ muted }
+					playsInline={ playsInline }
 					width={ width }
 					height={ height }
-					style={ aspectRatio ? { aspectRatio } : undefined }
+					style={
+						Object.keys( videoStyle ).length
+							? videoStyle
+							: undefined
+					}
 				>
 					<Tracks tracks={ tracks } />
 				</video>

package/src/video/index.js

@@ -6,7 +6,6 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
-import variations from './variations';
 
 const { name } = metadata;
 
@@ -22,7 +21,6 @@ export const settings = {
 		},
 	},
 	transforms,
-	variations,
 	deprecated,
 	edit,
 	save,

package/src/video/save.jsx

@@ -2,6 +2,7 @@ import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 import Tracks from './tracks';
 
@@ -27,6 +28,10 @@ export default function save( { attributes } ) {
 	// `aspect-ratio: auto W/H`, whose `auto` keyword is unreliable during load.
 	const aspectRatio =
 		width && height ? `${ width } / ${ height }` : undefined;
+	const videoStyle = {
+		...( aspectRatio && { aspectRatio } ),
+		...getShadowClassesAndStyles( attributes ).style,
+	};
 	return (
 		<figure { ...useBlockProps.save() }>
 			{ src && (
@@ -41,7 +46,11 @@ export default function save( { attributes } ) {
 					playsInline={ playsInline }
 					width={ width }
 					height={ height }
-					style={ aspectRatio ? { aspectRatio } : undefined }
+					style={
+						Object.keys( videoStyle ).length
+							? videoStyle
+							: undefined
+					}
 				>
 					<Tracks tracks={ tracks } />
 				</video>