@wordpress/block-library 7.5.0 → 7.8.0

package/src/post-terms/index.php

@@ -49,9 +49,9 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 	return get_the_term_list(
 		$block->context['postId'],
 		$attributes['term'],
-		$prefix,
+		wp_kses_post( $prefix ),
 		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
-		$suffix
+		wp_kses_post( $suffix )
 	);
 }
 
@@ -59,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/deprecated.js

@@ -397,7 +397,8 @@ const deprecated = [
 			const blockquoteClasses =
 				textColor || customTextColor
 					? classnames( 'has-text-color', {
-							[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+							[ blockquoteTextColorClass ]:
+								blockquoteTextColorClass,
 					  } )
 					: undefined;
 			const blockquoteStyle = blockquoteTextColorClass

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/index.js

@@ -37,6 +37,8 @@ export function QueryContent( {
 	attributes,
 	setAttributes,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
 	const {
 		queryId,
@@ -45,9 +47,8 @@ export function QueryContent( {
 		tagName: TagName = 'div',
 		layout = {},
 	} = attributes;
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -109,6 +110,8 @@ export function QueryContent( {
 			/>
 			<BlockControls>
 				<QueryToolbar
+					name={ name }
+					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
@@ -213,10 +216,8 @@ function QueryPatternSetup( {
 
 const QueryEdit = ( props ) => {
 	const { clientId, name } = props;
-	const [
-		isPatternSelectionModalOpen,
-		setIsPatternSelectionModalOpen,
-	] = useState( false );
+	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
+		useState( false );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const hasInnerBlocks = useSelect(
 		( select ) =>
@@ -226,9 +227,8 @@ const QueryEdit = ( props ) => {
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
 	const onBlockPatternSelect = ( blocks ) => {
 		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
-			clonedBlocks
-		);
+		const firstQueryClientId =
+			getFirstQueryClientIdFromBlocks( clonedBlocks );
 		replaceBlock( clientId, clonedBlocks );
 		if ( firstQueryClientId ) {
 			selectBlock( firstQueryClientId );

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,132 @@
+/**
+ * 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/edit/query-toolbar.js

@@ -11,13 +11,31 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { settings, list, grid } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 export default function QueryToolbar( {
 	attributes: { query, displayLayout },
 	setQuery,
 	setDisplayLayout,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
+	const hasPatterns = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			return !! __experimentalGetPatternsByBlockTypes(
+				name,
+				rootClientId
+			).length;
+		},
+		[ name, clientId ]
+	);
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
@@ -129,11 +147,13 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
-			<ToolbarGroup className="wp-block-template-part__block-control-group">
-				<ToolbarButton onClick={ openPatternSelectionModal }>
-					{ __( 'Replace' ) }
-				</ToolbarButton>
-			</ToolbarGroup>
+			{ hasPatterns && (
+				<ToolbarGroup className="wp-block-template-part__block-control-group">
+					<ToolbarButton onClick={ openPatternSelectionModal }>
+						{ __( 'Replace' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
 			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);

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-pagination/index.php

@@ -20,7 +20,6 @@ function render_block_core_query_pagination( $attributes, $content ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'role'       => 'navigation',
 			'aria-label' => __( 'Pagination' ),
 		)
 	);

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/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/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';
 
@@ -39,9 +39,8 @@ const TEMPLATE = [ [ 'core/paragraph', {} ] ];
  */
 const useMigrateOnLoad = ( attributes, clientId ) => {
 	const registry = useRegistry();
-	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { updateBlockAttributes, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		// As soon as the block is loaded, migrate it to the new version.
 
@@ -50,9 +49,8 @@ const useMigrateOnLoad = ( attributes, clientId ) => {
 			return;
 		}
 
-		const [ newAttributes, newInnerBlocks ] = migrateToQuoteV2(
-			attributes
-		);
+		const [ newAttributes, newInnerBlocks ] =
+			migrateToQuoteV2( attributes );
 
 		deprecated( 'Value attribute on the quote block', {
 			since: '6.0',
@@ -128,7 +126,9 @@ export default function QuoteEdit( {
 						}
 						className="wp-block-quote__citation"
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
 					/>

package/src/quote/v2/test/migrate.js

@@ -68,8 +68,7 @@ describe( 'Migrate quote block', () => {
 
 	it( 'should keep the formats of the value', () => {
 		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
-			value:
-				'<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
+			value: '<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
 			citation: 'Author',
 		} );
 		expect( attributes ).toEqual( {

package/src/search/block.json

@@ -38,6 +38,10 @@
 		"buttonUseIcon": {
 			"type": "boolean",
 			"default": false
+		},
+		"query": {
+			"type": "object",
+			"default": {}
 		}
 	},
 	"supports": {