@wordpress/block-library 7.5.0 → 7.6.0

package/src/post-comments/edit.js

@@ -16,7 +16,8 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+import { useDisabled } from '@wordpress/compose';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -110,7 +111,10 @@ export default function PostCommentsEdit( {
 						ref={ disabledRef }
 					>
 						<h3>
-							{ __( 'One response to' ) } “{ postTitle }”
+							{
+								/* translators: %s: Post title. */
+								sprintf( __( 'One response to %s' ), postTitle )
+							}
 						</h3>
 
 						<div className="navigation">
@@ -135,23 +139,43 @@ export default function PostCommentsEdit( {
 												width="32"
 												loading="lazy"
 											/>
-											<b className="fn">
-												<a href="#top" className="url">
-													{ __(
-														'A WordPress Commenter'
-													) }
-												</a>
-											</b>{ ' ' }
-											<span className="says">
-												{ __( 'says' ) }:
-											</span>
+											{ createInterpolateElement(
+												sprintf(
+													/* translators: %s: Comment author link. */
+													__(
+														'%s <span>says:</span>'
+													),
+													sprintf(
+														'<cite><a>%s</a></cite>',
+														__(
+															'A WordPress Commenter'
+														)
+													)
+												),
+												{
+													span: (
+														<span className="says" />
+													),
+													a: (
+														/* eslint-disable jsx-a11y/anchor-has-content */
+														<a
+															href="#top"
+															className="url"
+														/>
+														/* eslint-enable jsx-a11y/anchor-has-content */
+													),
+													cite: (
+														<cite className="fn" />
+													),
+												}
+											) }
 										</div>
 
 										<div className="comment-metadata">
 											<a href="#top">
-												<time dateTime="2000-01-01T00:00:00+00:00">
+												<time dateTime="2000-01-01T12:00:00+00:00">
 													{ __(
-														'January 1, 2000 at 00:00 am'
+														'January 1, 2000 at 12:00 am'
 													) }
 												</time>
 											</a>{ ' ' }
@@ -174,13 +198,17 @@ export default function PostCommentsEdit( {
 												'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
 											) }
 											<br />
-											{ __(
-												'Commenter avatars come from'
-											) }{ ' ' }
-											<a href="https://gravatar.com/">
-												Gravatar
-											</a>
-											.
+											{ createInterpolateElement(
+												__(
+													'Commenter avatars come from <a>Gravatar</a>'
+												),
+												{
+													a: (
+														/* eslint-disable-next-line jsx-a11y/anchor-has-content */
+														<a href="https://gravatar.com/" />
+													),
+												}
+											) }
 										</p>
 									</div>
 
@@ -188,7 +216,11 @@ export default function PostCommentsEdit( {
 										<a
 											className="comment-reply-link"
 											href="#top"
-											aria-label="Reply to A WordPress Commenter"
+											aria-label={ sprintf(
+												/* translators: Comment reply button text. %s: Comment author name. */
+												__( 'Reply to %s' ),
+												__( 'A WordPress Commenter' )
+											) }
 										>
 											{ __( 'Reply' ) }
 										</a>

package/src/post-comments/style.scss

@@ -1,4 +1,22 @@
 .wp-block-post-comments {
+	/* utility classes */
+	.alignleft {
+		float: left;
+	}
+
+	.alignright {
+		float: right;
+	}
+	/* end utility classes */
+
+	.navigation {
+		&::after {
+			content: "";
+			display: table;
+			clear: both;
+		}
+	}
+
 	.commentlist {
 		clear: both;
 		list-style: none;
@@ -86,6 +104,14 @@
 		}
 	}
 
+	.comment-reply-title {
+		margin-bottom: 0;
+		:where(small) {
+			font-size: var(--wp--preset--font-size--medium, smaller);
+			margin-left: 0.5em;
+		}
+	}
+
 	.reply {
 		font-size: 0.875em;
 		margin-bottom: 1.4em;

package/src/post-comments-count/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/post-comments-count",
 	"title": "Post Comments Count",
 	"category": "theme",

package/src/post-comments-form/form.js

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+import { useDisabled, useInstanceId } from '@wordpress/compose';
 
 const CommentsForm = () => {
 	const disabledFormRef = useDisabled();

package/src/post-comments-form/style.scss

@@ -69,13 +69,10 @@
 	}
 
 	.comment-reply-title {
-		align-items: baseline;
-		display: flex;
-		justify-content: space-between;
 		margin-bottom: 0;
-
 		:where(small) {
 			font-size: var(--wp--preset--font-size--medium, smaller);
+			margin-left: 0.5em;
 		}
 	}
 }

package/src/post-comments-link/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/post-comments-link",
 	"title": "Post Comments Link",
 	"category": "theme",

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

@@ -15,6 +15,7 @@ import {
 	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';
@@ -25,11 +26,22 @@ 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, prefix, suffix } = attributes;
 	const { postId, postType } = context;
@@ -86,6 +98,7 @@ export default function PostTermsEdit( {
 				{ isLoading && <Spinner /> }
 				{ ! isLoading && hasPostTerms && (
 					<RichText
+						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__prefix"
 						multiline={ false }
 						aria-label={ __( 'Prefix' ) }
@@ -124,6 +137,7 @@ export default function PostTermsEdit( {
 						__( 'Term items not found.' ) ) }
 				{ ! isLoading && hasPostTerms && (
 					<RichText
+						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__suffix"
 						multiline={ false }
 						aria-label={ __( 'Suffix' ) }
@@ -133,6 +147,11 @@ export default function PostTermsEdit( {
 							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

@@ -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/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>