@wordpress/block-library 7.3.10 → 7.6.0

package/src/post-terms/hooks.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { postCategories, postTerms } from '@wordpress/icons';
+
+const variationIconMap = {
+	category: postCategories,
+	post_tag: postTerms,
+};
+
+// We add `icons` to categories and tags. The remaining ones use
+// the block's default icon.
+export default function enhanceVariations( settings, name ) {
+	if ( name !== 'core/post-terms' ) {
+		return settings;
+	}
+	const variations = settings.variations.map( ( variation ) => ( {
+		...variation,
+		...( variationIconMap[ variation.name ] && {
+			icon: variationIconMap[ variation.name ],
+		} ),
+	} ) );
+	return {
+		...settings,
+		variations,
+	};
+}

package/src/post-terms/index.js

@@ -1,20 +1,27 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import metadata from './block.json';
-import edit from './edit';
-import variations from './variations';
+import { postCategories as icon } from '@wordpress/icons';
+import { addFilter } from '@wordpress/hooks';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { postTerms as icon } from '@wordpress/icons';
+import metadata from './block.json';
+import edit from './edit';
+import enhanceVariations from './hooks';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	icon,
-	variations,
 	edit,
 };
+
+// Importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects
+addFilter(
+	'blocks.registerBlockType',
+	'core/template-part',
+	enhanceVariations
+);

package/src/post-terms/index.php

@@ -36,12 +36,22 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
+	$prefix = "<div $wrapper_attributes>";
+	if ( isset( $attributes['prefix'] ) && $attributes['prefix'] ) {
+		$prefix .= '<span class="wp-block-post-terms__prefix">' . $attributes['prefix'] . '</span>';
+	}
+
+	$suffix = '</div>';
+	if ( isset( $attributes['suffix'] ) && $attributes['suffix'] ) {
+		$suffix = '<span class="wp-block-post-terms__suffix">' . $attributes['suffix'] . '</span>' . $suffix;
+	}
+
 	return get_the_term_list(
 		$block->context['postId'],
 		$attributes['term'],
-		"<div $wrapper_attributes>",
+		wp_kses_post( $prefix ),
 		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
-		'</div>'
+		wp_kses_post( $suffix )
 	);
 }
 
@@ -49,10 +59,48 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
  * Registers the `core/post-terms` block on the server.
  */
 function register_block_core_post_terms() {
+	$taxonomies = get_taxonomies(
+		array(
+			'public'       => true,
+			'show_in_rest' => true,
+		),
+		'objects'
+	);
+
+	// Split the available taxonomies to `built_in` and custom ones,
+	// in order to prioritize the `built_in` taxonomies at the
+	// search results.
+	$built_ins         = array();
+	$custom_variations = array();
+
+	// Create and register the eligible taxonomies variations.
+	foreach ( $taxonomies as $taxonomy ) {
+		$variation = array(
+			'name'        => $taxonomy->name,
+			'title'       => $taxonomy->label,
+			/* translators: %s: taxonomy's label */
+			'description' => sprintf( __( 'Display the assigned taxonomy: %s' ), $taxonomy->label ),
+			'attributes'  => array(
+				'term' => $taxonomy->name,
+			),
+			'isActive'    => array( 'term' ),
+		);
+		// Set the category variation as the default one.
+		if ( 'category' === $taxonomy->name ) {
+			$variation['isDefault'] = true;
+		}
+		if ( $taxonomy->_builtin ) {
+			$built_ins[] = $variation;
+		} else {
+			$custom_variations[] = $variation;
+		}
+	}
+
 	register_block_type_from_metadata(
 		__DIR__ . '/post-terms',
 		array(
 			'render_callback' => 'render_block_core_post_terms',
+			'variations'      => array_merge( $built_ins, $custom_variations ),
 		)
 	);
 }

package/src/post-title/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { postTitle as icon } from '@wordpress/icons';
+import { title as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/pullquote/edit.js

@@ -13,7 +13,7 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 
 /**
@@ -87,7 +87,7 @@ function PullQuoteEdit( {
 							textAlign="center"
 							__unstableOnSplitAtEnd={ () =>
 								insertBlocksAfter(
-									createBlock( 'core/paragraph' )
+									createBlock( getDefaultBlockName() )
 								)
 							}
 						/>

package/src/pullquote/edit.native.js

@@ -10,7 +10,7 @@ import {
 	getColorObjectByAttributeValues,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -115,7 +115,7 @@ function PullQuoteEdit( props ) {
 							textAlign={ textAlign ?? 'center' }
 							__unstableOnSplitAtEnd={ () =>
 								insertBlocksAfter(
-									createBlock( 'core/paragraph' )
+									createBlock( getDefaultBlockName() )
 								)
 							}
 						/>

package/src/query/block.json

@@ -24,7 +24,8 @@
 				"exclude": [],
 				"sticky": "",
 				"inherit": true,
-				"taxQuery": null
+				"taxQuery": null,
+				"parents": []
 			}
 		},
 		"tagName": {

package/src/query/edit/inspector-controls/index.js

@@ -17,20 +17,28 @@ import {
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import OrderControl from './order-control';
 import AuthorControl from './author-control';
+import ParentControl from './parent-control';
 import TaxonomyControls from './taxonomy-controls';
+import StickyControl from './sticky-control';
 import { usePostTypes } from '../../utils';
 
-const stickyOptions = [
-	{ label: __( 'Include' ), value: '' },
-	{ label: __( 'Exclude' ), value: 'exclude' },
-	{ label: __( 'Only' ), value: 'only' },
-];
+function useIsPostTypeHierarchical( postType ) {
+	return useSelect(
+		( select ) => {
+			const type = select( coreStore ).getPostType( postType );
+			return type?.viewable && type?.hierarchical;
+		},
+		[ postType ]
+	);
+}
 
 export default function QueryInspectorControls( {
 	attributes: { query, displayLayout },
@@ -45,9 +53,11 @@ export default function QueryInspectorControls( {
 		sticky,
 		inherit,
 		taxQuery,
+		parents,
 	} = query;
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
 		setShowSticky( postType === 'post' );
 	}, [ postType ] );
@@ -72,6 +82,8 @@ export default function QueryInspectorControls( {
 		if ( newValue !== 'post' ) {
 			updateQuery.sticky = '';
 		}
+		// We need to reset `parents` because they are tied to each post type.
+		updateQuery.parents = [];
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
@@ -136,14 +148,9 @@ export default function QueryInspectorControls( {
 					/>
 				) }
 				{ showSticky && (
-					<SelectControl
-						label={ __( 'Sticky posts' ) }
-						options={ stickyOptions }
+					<StickyControl
 						value={ sticky }
 						onChange={ ( value ) => setQuery( { sticky: value } ) }
-						help={ __(
-							'Blog posts can be "stickied", a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
-						) }
 					/>
 				) }
 			</PanelBody>
@@ -156,6 +163,13 @@ export default function QueryInspectorControls( {
 						value={ querySearch }
 						onChange={ setQuerySearch }
 					/>
+					{ isPostTypeHierarchical && (
+						<ParentControl
+							parents={ parents }
+							postType={ postType }
+							onChange={ setQuery }
+						/>
+					) }
 				</PanelBody>
 			) }
 		</InspectorControls>

package/src/query/edit/inspector-controls/parent-control.js

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { FormTokenField } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getEntitiesInfo, mapToIHasNameAndId } from '../../utils';
+
+const EMPTY_ARRAY = [];
+const BASE_QUERY = {
+	order: 'asc',
+	_fields: 'id,title',
+	context: 'view',
+};
+
+function ParentControl( { parents, postType, onChange } ) {
+	const [ search, setSearch ] = useState( '' );
+	const [ value, setValue ] = useState( EMPTY_ARRAY );
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	const debouncedSearch = useDebounce( setSearch, 250 );
+	const { searchResults, searchHasResolved } = useSelect(
+		( select ) => {
+			if ( ! search ) {
+				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
+			}
+			const { getEntityRecords, hasFinishedResolution } = select(
+				coreStore
+			);
+			const selectorArgs = [
+				'postType',
+				postType,
+				{
+					...BASE_QUERY,
+					search,
+					orderby: 'relevance',
+					exclude: parents,
+					per_page: 20,
+				},
+			];
+			return {
+				searchResults: getEntityRecords( ...selectorArgs ),
+				searchHasResolved: hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+			};
+		},
+		[ search, parents ]
+	);
+	const currentParents = useSelect(
+		( select ) => {
+			if ( ! parents?.length ) return EMPTY_ARRAY;
+			const { getEntityRecords } = select( coreStore );
+			return getEntityRecords( 'postType', postType, {
+				...BASE_QUERY,
+				include: parents,
+				per_page: parents.length,
+			} );
+		},
+		[ parents ]
+	);
+	// Update the `value` state only after the selectors are resolved
+	// to avoid emptying the input when we're changing parents.
+	useEffect( () => {
+		if ( ! parents?.length ) {
+			setValue( EMPTY_ARRAY );
+		}
+		if ( ! currentParents?.length ) return;
+		const currentParentsInfo = getEntitiesInfo(
+			mapToIHasNameAndId( currentParents, 'title.rendered' )
+		);
+		// Returns only the existing entity ids. This prevents the component
+		// from crashing in the editor, when non existing ids are provided.
+		const sanitizedValue = parents.reduce( ( accumulator, id ) => {
+			const entity = currentParentsInfo.mapById[ id ];
+			if ( entity ) {
+				accumulator.push( {
+					id,
+					value: entity.name,
+				} );
+			}
+			return accumulator;
+		}, [] );
+		setValue( sanitizedValue );
+	}, [ parents, currentParents ] );
+
+	const entitiesInfo = useMemo( () => {
+		if ( ! searchResults?.length ) return EMPTY_ARRAY;
+		return getEntitiesInfo(
+			mapToIHasNameAndId( searchResults, 'title.rendered' )
+		);
+	}, [ searchResults ] );
+	// Update suggestions only when the query has resolved.
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		setSuggestions( entitiesInfo.names );
+	}, [ entitiesInfo.names, searchHasResolved ] );
+
+	const getIdByValue = ( entitiesMappedByName, entity ) => {
+		const id = entity?.id || entitiesMappedByName?.[ entity ]?.id;
+		if ( id ) return id;
+	};
+	const onParentChange = ( newValue ) => {
+		const ids = Array.from(
+			newValue.reduce( ( accumulator, entity ) => {
+				// Verify that new values point to existing entities.
+				const id = getIdByValue( entitiesInfo.mapByName, entity );
+				if ( id ) accumulator.add( id );
+				return accumulator;
+			}, new Set() )
+		);
+		setSuggestions( EMPTY_ARRAY );
+		onChange( { parents: ids } );
+	};
+	return (
+		<FormTokenField
+			label={ __( 'Parents' ) }
+			value={ value }
+			onInputChange={ debouncedSearch }
+			suggestions={ suggestions }
+			onChange={ onParentChange }
+		/>
+	);
+}
+
+export default ParentControl;

package/src/query/edit/inspector-controls/sticky-control.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const stickyOptions = [
+	{ label: __( 'Include' ), value: '' },
+	{ label: __( 'Exclude' ), value: 'exclude' },
+	{ label: __( 'Only' ), value: 'only' },
+];
+
+export default function StickyControl( { value, onChange } ) {
+	return (
+		<SelectControl
+			label={ __( 'Sticky posts' ) }
+			options={ stickyOptions }
+			value={ value }
+			onChange={ onChange }
+			help={ __(
+				'Blog posts can be "stickied", a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+			) }
+		/>
+	);
+}

package/src/query/utils.js

@@ -1,9 +1,15 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * @typedef IHasNameAndId
@@ -47,6 +53,22 @@ export const getEntitiesInfo = ( entities ) => {
 	};
 };
 
+/**
+ * Helper util to map records to add a `name` prop from a
+ * provided path, in order to handle all entities in the same
+ * fashion(implementing`IHasNameAndId` interface).
+ *
+ * @param {Object[]} entities The array of entities.
+ * @param {string}   path     The path to map a `name` property from the entity.
+ * @return {IHasNameAndId[]} An array of enitities that now implement the `IHasNameAndId` interface.
+ */
+export const mapToIHasNameAndId = ( entities, path ) => {
+	return ( entities || [] ).map( ( entity ) => ( {
+		...entity,
+		name: decodeEntities( get( entity, path ) ),
+	} ) );
+};
+
 /**
  * Returns a helper object that contains:
  * 1. An `options` object from the available post types, to be passed to a `SelectControl`.

package/src/query-title/index.js

@@ -9,7 +9,7 @@ import deprecated from './deprecated';
 /**
  * WordPress dependencies
  */
-import { queryTitle as icon } from '@wordpress/icons';
+import { title as icon } from '@wordpress/icons';
 
 const { name } = metadata;
 export { metadata, name };

package/src/query-title/variations.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { archiveTitle } from '@wordpress/icons';
+import { title } from '@wordpress/icons';
 const variations = [
 	{
 		isDefault: true,
@@ -11,7 +11,7 @@ const variations = [
 		description: __(
 			'Display the archive title based on the queried object.'
 		),
-		icon: archiveTitle,
+		icon: title,
 		attributes: {
 			type: 'archive',
 		},

package/src/quote/block.json

@@ -30,6 +30,7 @@
 	"supports": {
 		"anchor": true,
 		"__experimentalSlashInserter": true,
+		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/quote/edit.js

@@ -14,7 +14,7 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 
 const isWebPlatform = Platform.OS === 'web';
@@ -81,6 +81,7 @@ export default function QuoteEdit( {
 						createBlock( 'core/paragraph' )
 					}
 					textAlign={ align }
+					__unstableEmbedURLOnPaste
 				/>
 				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 					<RichText
@@ -102,7 +103,9 @@ export default function QuoteEdit( {
 						className="wp-block-quote__citation"
 						textAlign={ align }
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 					/>
 				) }

package/src/quote/index.js

@@ -16,7 +16,7 @@ import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name };
+export { metadata, name, settingsV2 };
 
 export const settingsV1 = {
 	icon,

package/src/quote/v2/edit.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Platform, useEffect } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
@@ -74,6 +74,7 @@ export default function QuoteEdit( {
 	insertBlocksAfter,
 	clientId,
 	className,
+	style,
 } ) {
 	const { citation, align } = attributes;
 
@@ -88,6 +89,7 @@ export default function QuoteEdit( {
 		className: classNames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
+		...( ! isWebPlatform && { style } ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -126,8 +128,11 @@ export default function QuoteEdit( {
 						}
 						className="wp-block-quote__citation"
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
+						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
 					/>
 				) }
 			</BlockQuotation>

package/src/rss/edit.js

@@ -109,7 +109,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<ToolbarGroup controls={ toolbarControls } />
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'RSS settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
 						label={ __( 'Number of items' ) }
 						value={ itemsToShow }

package/src/search/edit.js

@@ -103,8 +103,6 @@ export default function SearchEdit( {
 		} );
 	}, [ insertedInNavigationBlock ] );
 	const borderRadius = style?.border?.radius;
-	const borderColor = style?.border?.color;
-	const borderWidth = style?.border?.width;
 	const borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
@@ -219,6 +217,7 @@ export default function SearchEdit( {
 
 		return (
 			<input
+				type="search"
 				className={ textFieldClasses }
 				style={ textFieldStyles }
 				aria-label={ __( 'Optional placeholder text' ) }
@@ -392,10 +391,18 @@ export default function SearchEdit( {
 		radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;
 
 	const getWrapperStyles = () => {
-		const styles = {
-			borderColor,
-			borderWidth: isButtonPositionInside ? borderWidth : undefined,
-		};
+		const styles = isButtonPositionInside
+			? borderProps.style
+			: {
+					borderRadius: borderProps.style?.borderRadius,
+					borderTopLeftRadius: borderProps.style?.borderTopLeftRadius,
+					borderTopRightRadius:
+						borderProps.style?.borderTopRightRadius,
+					borderBottomLeftRadius:
+						borderProps.style?.borderBottomLeftRadius,
+					borderBottomRightRadius:
+						borderProps.style?.borderBottomRightRadius,
+			  };
 
 		const isNonZeroBorderRadius =
 			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
@@ -417,11 +424,11 @@ export default function SearchEdit( {
 				} = borderRadius;
 
 				return {
+					...styles,
 					borderTopLeftRadius: padBorderRadius( topLeft ),
 					borderTopRightRadius: padBorderRadius( topRight ),
 					borderBottomLeftRadius: padBorderRadius( bottomLeft ),
 					borderBottomRightRadius: padBorderRadius( bottomRight ),
-					...styles,
 				};
 			}