@wordpress/block-library 7.4.0 → 7.7.0

package/src/post-date/edit.js

@@ -18,13 +18,13 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
+	__experimentalPublishDateTimePicker as PublishDateTimePicker,
 } from '@wordpress/block-editor';
 import {
 	Dropdown,
 	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
-	DateTimePicker,
 	PanelBody,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -101,13 +101,14 @@ export default function PostDateEdit( {
 					<ToolbarGroup>
 						<Dropdown
 							popoverProps={ { anchorRef: timeRef.current } }
-							renderContent={ () => (
-								<DateTimePicker
+							renderContent={ ( { onClose } ) => (
+								<PublishDateTimePicker
 									currentDate={ date }
 									onChange={ setDate }
 									is12Hour={ is12HourFormat(
 										siteTimeFormat
 									) }
+									onClose={ onClose }
 								/>
 							) }
 							renderToggle={ ( { isOpen, onToggle } ) => {

package/src/post-excerpt/edit.js

@@ -57,7 +57,20 @@ export default function PostExcerptEditor( {
 		return document.body.textContent || document.body.innerText || '';
 	}, [ renderedExcerpt ] );
 	if ( ! postType || ! postId ) {
-		return <div { ...blockProps }>{ __( 'Post Excerpt' ) }</div>;
+		return (
+			<div { ...blockProps }>
+				<p>
+					{ __(
+						'This is the Post Excerpt block, it will display the excerpt from single posts.'
+					) }
+				</p>
+				<p>
+					{ __(
+						'If there are any Custom Post Types with support for excerpts, the Post Excerpt block can display the excerpts of those entries as well.'
+					) }
+				</p>
+			</div>
+		);
 	}
 	if ( isProtected && ! userCanEdit ) {
 		return (

package/src/post-featured-image/edit.js

@@ -118,7 +118,7 @@ function PostFeaturedImageDisplay( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
-		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
 	const controls = (

package/src/post-template/edit.js

@@ -84,6 +84,7 @@ export default function PostTemplateEdit( {
 			sticky,
 			inherit,
 			taxQuery,
+			parents,
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
@@ -138,6 +139,9 @@ export default function PostTemplateEdit( {
 			if ( exclude?.length ) {
 				query.exclude = exclude;
 			}
+			if ( parents?.length ) {
+				query.parent = parents;
+			}
 			// If sticky is not set, it will return all posts in the results.
 			// If sticky is set to `only`, it will limit the results to sticky posts only.
 			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
@@ -172,6 +176,7 @@ export default function PostTemplateEdit( {
 			inherit,
 			templateSlug,
 			taxQuery,
+			parents,
 		]
 	);
 	const blockContexts = useMemo(

package/src/post-template/index.php

@@ -5,6 +5,32 @@
  * @package WordPress
  */
 
+/**
+ * Determines whether a block list contains a block that uses the featured image.
+ *
+ * @param WP_Block_List $inner_blocks Inner block instance.
+ *
+ * @return bool Whether the block list contains a block that uses the featured image.
+ */
+function block_core_post_template_uses_featured_image( $inner_blocks ) {
+	foreach ( $inner_blocks as $block ) {
+		if ( 'core/post-featured-image' === $block->name ) {
+			return true;
+		}
+		if (
+			'core/cover' === $block->name &&
+			! empty( $block->attributes['useFeaturedImage'] )
+		) {
+			return true;
+		}
+		if ( $block->inner_blocks && block_core_post_template_uses_featured_image( $block->inner_blocks ) ) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
 /**
  * Renders the `core/post-template` block on the server.
  *
@@ -40,6 +66,10 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		return '';
 	}
 
+	if ( block_core_post_template_uses_featured_image( $block->inner_blocks ) ) {
+		update_post_thumbnail_cache( $query );
+	}
+
 	$classnames = '';
 	if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) {
 		if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) {

package/src/post-terms/block.json

@@ -16,6 +16,14 @@
 		"separator": {
 			"type": "string",
 			"default": ", "
+		},
+		"prefix": {
+			"type": "string",
+			"default": ""
+		},
+		"suffix": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/post-terms/edit.js

@@ -13,7 +13,9 @@ import {
 	BlockControls,
 	useBlockProps,
 	useBlockDisplayInformation,
+	RichText,
 } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -24,13 +26,24 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import usePostTerms from './use-post-terms';
 
+// Allowed formats for the prefix and suffix fields.
+const ALLOWED_FORMATS = [
+	'core/bold',
+	'core/image',
+	'core/italic',
+	'core/link',
+	'core/strikethrough',
+	'core/text-color',
+];
+
 export default function PostTermsEdit( {
 	attributes,
 	clientId,
 	context,
 	setAttributes,
+	insertBlocksAfter,
 } ) {
-	const { term, textAlign, separator } = attributes;
+	const { term, textAlign, separator, prefix, suffix } = attributes;
 	const { postId, postType } = context;
 
 	const selectedTerm = useSelect(
@@ -83,6 +96,20 @@ export default function PostTermsEdit( {
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ isLoading && <Spinner /> }
+				{ ! isLoading && hasPostTerms && (
+					<RichText
+						allowedFormats={ ALLOWED_FORMATS }
+						className="wp-block-post-terms__prefix"
+						multiline={ false }
+						aria-label={ __( 'Prefix' ) }
+						placeholder={ __( 'Prefix' ) + ' ' }
+						value={ prefix }
+						onChange={ ( value ) =>
+							setAttributes( { prefix: value } )
+						}
+						tagName="span"
+					/>
+				) }
 				{ ! isLoading &&
 					hasPostTerms &&
 					postTerms
@@ -108,6 +135,25 @@ export default function PostTermsEdit( {
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||
 						__( 'Term items not found.' ) ) }
+				{ ! isLoading && hasPostTerms && (
+					<RichText
+						allowedFormats={ ALLOWED_FORMATS }
+						className="wp-block-post-terms__suffix"
+						multiline={ false }
+						aria-label={ __( 'Suffix' ) }
+						placeholder={ ' ' + __( 'Suffix' ) }
+						value={ suffix }
+						onChange={ ( value ) =>
+							setAttributes( { suffix: value } )
+						}
+						tagName="span"
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
+				) }
 			</div>
 		</>
 	);

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.'
+			) }
+		/>
+	);
+}