@wordpress/block-library 7.5.0 → 7.8.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/index.php

@@ -78,7 +78,7 @@ add_action( 'init', 'register_block_core_post_comments' );
  */
 function post_comments_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

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

@@ -1,11 +1,14 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+import { __experimentalElementButtonClassName } from '@wordpress/block-editor';
+import { useDisabled, useInstanceId } from '@wordpress/compose';
 
 const CommentsForm = () => {
 	const disabledFormRef = useDisabled();
@@ -30,7 +33,11 @@ const CommentsForm = () => {
 					<input
 						name="submit"
 						type="submit"
-						className="submit wp-block-button__link"
+						className={ classnames(
+							'submit',
+							'wp-block-button__link',
+							__experimentalElementButtonClassName
+						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }
 					/>

package/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

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

@@ -118,9 +118,8 @@ function RecursionError() {
 export default function PostContentEdit( { context, attributes } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		contextPostId
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
 		return <RecursionError />;

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

@@ -20,7 +20,6 @@ import {
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -28,24 +27,18 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import DimensionControls from './dimension-controls';
 
-const placeholderIllustration = (
-	<SVG
-		className="components-placeholder__illustration"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 60 60"
-		preserveAspectRatio="none"
-	>
-		<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
-	</SVG>
-);
-
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const placeholderChip = (
-	<div className="wp-block-post-featured-image__placeholder">
-		{ placeholderIllustration }
-	</div>
-);
+
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
 
 function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
@@ -101,15 +94,6 @@ function PostFeaturedImageDisplay( {
 		style: { width, height },
 	} );
 
-	const placeholder = ( content ) => {
-		return (
-			<Placeholder className="block-editor-media-placeholder">
-				{ placeholderIllustration }
-				{ content }
-			</Placeholder>
-		);
-	};
-
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
@@ -118,7 +102,7 @@ function PostFeaturedImageDisplay( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
-		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
 	const controls = (
@@ -153,7 +137,7 @@ function PostFeaturedImageDisplay( {
 		return (
 			<>
 				{ controls }
-				<div { ...blockProps }>{ placeholderChip }</div>
+				<div { ...blockProps }>{ placeholder() }</div>
 			</>
 		);
 	}
@@ -187,7 +171,7 @@ function PostFeaturedImageDisplay( {
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
 		image = ! media ? (
-			placeholderChip
+			placeholder()
 		) : (
 			<img
 				src={ mediaUrl }
@@ -232,7 +216,7 @@ function PostFeaturedImageDisplay( {
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
 	if ( ! props.context?.postId ) {
-		return <div { ...blockProps }>{ placeholderChip }</div>;
+		return <div { ...blockProps }>{ placeholder() }</div>;
 	}
 	return <PostFeaturedImageDisplay { ...props } />;
 }

package/src/post-featured-image/editor.scss

@@ -39,21 +39,6 @@
 		// against any background color.
 		color: currentColor;
 		background: transparent;
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			pointer-events: none;
-
-			// Inherit border radius from style variations.
-			border-radius: inherit;
-		}
 
 		// Style the upload button.
 		.components-placeholder__fieldset {
@@ -82,20 +67,6 @@
 			color: $white;
 		}
 
-		// Style the placeholder illustration.
-		.components-placeholder__illustration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			stroke: currentColor;
-			stroke-dasharray: 3;
-			opacity: 0.4;
-		}
-
 		// Show default placeholder height when not resized.
 		min-height: 200px;
 	}

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

@@ -29,9 +29,13 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"color": {
+			"link": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

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
+);