@wordpress/block-library 6.0.1 → 6.0.5

package/src/post-comment/block.json

@@ -1,9 +1,9 @@
 {
 	"apiVersion": 2,
 	"name": "core/post-comment",
-	"title": "Post Comment",
+	"title": "Post Comment (deprecated)",
 	"category": "theme",
-	"description": "Post comment.",
+	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"commentId": {
@@ -14,6 +14,7 @@
 		"commentId": "commentId"
 	},
 	"supports": {
-		"html": false
+		"html": false,
+		"inserter": false
 	}
 }

package/src/post-comment/edit.js

@@ -1,27 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Placeholder, TextControl, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { blockDefault } from '@wordpress/icons';
-import {
-	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-} from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 const ALLOWED_BLOCKS = [
-	'core/post-comment-content',
-	'core/post-comment-author',
-	'core/post-comment-date',
+	'core/comment-author-avatar',
+	'core/comment-author-name',
+	'core/comment-content',
+	'core/comment-date',
+	'core/comment-edit-link',
+	'core/comment-reply-link',
 ];
 const TEMPLATE = [
-	[ 'core/post-comment-content' ],
-	[ 'core/post-comment-author' ],
+	[ 'core/comment-author-avatar' ],
+	[ 'core/comment-author-name' ],
+	[ 'core/comment-date' ],
+	[ 'core/comment-content' ],
+	[ 'core/comment-reply-link' ],
+	[ 'core/comment-edit-link' ],
 ];
 
-export default function Edit( { attributes, setAttributes } ) {
-	const { commentId } = attributes;
+export default function Edit( { attributes: { commentId }, setAttributes } ) {
 	const [ commentIdInput, setCommentIdInput ] = useState( commentId );
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -34,7 +37,7 @@ export default function Edit( { attributes, setAttributes } ) {
 			<div { ...blockProps }>
 				<Placeholder
 					icon={ blockDefault }
-					label={ __( 'Post Comment' ) }
+					label={ _x( 'Post Comment', 'block title' ) }
 					instructions={ __(
 						'To show a comment, input the comment ID.'
 					) }

package/src/post-comment/save.js

@@ -1,12 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save() {
-	return (
-		<div { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</div>
-	);
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	return <div { ...innerBlocksProps } />;
 }

package/src/post-comments/block.json

@@ -16,7 +16,14 @@
 		"align": [ "wide", "full" ],
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		},
 		"color": {
 			"gradients": true,

package/src/post-comments/index.php

@@ -16,13 +16,22 @@
 function render_block_core_post_comments( $attributes, $content, $block ) {
 	global $post;
 
-	if ( ! isset( $block->context['postId'] ) ) {
+	$post_id = $block->context['postId'];
+	if ( ! isset( $post_id ) ) {
 		return '';
 	}
 
-	$post_before = $post;
+	$comment_args = array(
+		'post_id' => $post_id,
+		'count'   => true,
+	);
+	// Return early if there are no comments and comments are closed.
+	if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) {
+		return '';
+	}
 
-	$post = get_post( $block->context['postId'] );
+	$post_before = $post;
+	$post        = get_post( $post_id );
 	setup_postdata( $post );
 
 	ob_start();

package/src/post-comments/style.scss

@@ -1,4 +1,9 @@
 .wp-block-post-comments {
+	// Remove extraneous top padding added to the first heading of the block.
+	> h3:first-of-type {
+		margin-top: 0;
+	}
+
 	.commentlist {
 		list-style: none;
 		margin: 0;
@@ -55,6 +60,7 @@
 	.comment-form-url {
 		label {
 			display: block;
+			margin-bottom: 0.25em;
 		}
 	}
 
@@ -63,13 +69,33 @@
 		width: 100%;
 	}
 
+	.comment-form-cookies-consent {
+		display: flex;
+		gap: 0.25em;
+
+		#wp-comment-cookies-consent {
+			margin-top: 0.35em;
+		}
+	}
+
 	.reply {
 		font-size: 0.75em;
 		margin-bottom: 1.4em;
 	}
 
 	textarea,
-	input {
+	input:not([type="submit"]) {
 		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:not([type="submit"]):not([type="checkbox"]) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+
+	input[type="submit"] {
+		border: none;
 	}
 }

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

@@ -18,7 +18,13 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

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

@@ -19,8 +19,15 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
-	"style": "wp-block-post-comments-form"
+	"style": [ "wp-block-post-comments-form", "wp-block-buttons", "wp-block-button" ]
 }

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

@@ -61,17 +61,3 @@ function gutenberg_comment_form_block_form_defaults( $fields ) {
 	return $fields;
 }
 add_filter( 'comment_form_defaults', 'gutenberg_comment_form_block_form_defaults' );
-
-add_action(
-	'wp_enqueue_scripts',
-	/**
-	 * Add the button stylesheet as a dependency for the post-comment form stylesheet.
-	 */
-	function() {
-		global $wp_styles;
-		if ( ! empty( $wp_styles->registered ) && ! empty( $wp_styles->registered['wp-block-post-comments-form'] ) ) {
-			$wp_styles->registered['wp-block-post-comments-form']->deps[] = 'wp-block-button';
-		}
-	},
-	1
-);

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

@@ -1,9 +1,49 @@
 // Styles copied from button block styles.
-.wp-block-post-comments-form input[type="submit"] {
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	display: inline-block;
-	text-align: center;
-	overflow-wrap: break-word;
+.wp-block-post-comments-form {
+
+	input[type="submit"] {
+		border: none;
+		box-shadow: none;
+		cursor: pointer;
+		display: inline-block;
+		text-align: center;
+		overflow-wrap: break-word;
+	}
+
+	textarea,
+	input:not([type="submit"]) {
+		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:not([type="submit"]):not([type="checkbox"]) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+
+	.comment-form-comment textarea {
+		display: block;
+		box-sizing: border-box;
+		width: 100%;
+	}
+
+	.comment-form-comment,
+	.comment-form-author,
+	.comment-form-email,
+	.comment-form-url {
+		label {
+			display: block;
+			margin-bottom: 0.25em;
+		}
+	}
+
+	.comment-form-cookies-consent {
+		display: flex;
+		gap: 0.25em;
+
+		#wp-comment-cookies-consent {
+			margin-top: 0.35em;
+		}
+	}
 }

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

@@ -19,7 +19,14 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/post-content/edit.js

@@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data';
 import { RawHTML } from '@wordpress/element';
 import {
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	useSetting,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	store as blockEditorStore,
@@ -85,7 +85,7 @@ function Placeholder() {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<p>{ __( 'This is a placeholder for post content.' ) }</p>
+			<p>{ __( 'Post Content' ) }</p>
 		</div>
 	);
 }

package/src/post-date/block.json

@@ -27,7 +27,14 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontWeight": true
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/post-date/deprecated.js

@@ -0,0 +1,52 @@
+/**
+ * Internal dependencies
+ */
+import migrateFontFamily from '../utils/migrate-font-family';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		format: {
+			type: 'string',
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+		},
+	},
+	supports: {
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalLetterSpacing: true,
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateFontFamily,
+	isEligible( { style } ) {
+		return style?.typography?.fontFamily;
+	},
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v1 ];

package/src/post-date/edit.js

@@ -72,7 +72,7 @@ export default function PostDateEdit( {
 			{ dateI18n( resolvedFormat, date ) }
 		</time>
 	) : (
-		__( 'No Date' )
+		__( 'Post Date' )
 	);
 	if ( isLink && date ) {
 		postDate = (

package/src/post-date/index.js

@@ -8,6 +8,7 @@ import { postDate as icon } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -15,4 +16,5 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	deprecated,
 };

package/src/post-excerpt/block.json

@@ -24,9 +24,20 @@
 			"gradients": true,
 			"link": true
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",

package/src/post-excerpt/edit.js

@@ -57,13 +57,7 @@ export default function PostExcerptEditor( {
 		return document.body.textContent || document.body.innerText || '';
 	}, [ renderedExcerpt ] );
 	if ( ! postType || ! postId ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Post excerpt block: no post found.' ) }
-				</Warning>
-			</div>
-		);
+		return <div { ...blockProps }>{ __( 'Post Excerpt' ) }</div>;
 	}
 	if ( isProtected && ! userCanEdit ) {
 		return (

package/src/post-excerpt/index.php

@@ -18,6 +18,12 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$excerpt = get_the_excerpt( $block->context['postId'] );
+
+	if ( empty( $excerpt ) ) {
+		return '';
+	}
+
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . $attributes['moreText'] . '</a>' : '';
 	$filter_excerpt_more = function( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
@@ -38,7 +44,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
-	$content               = '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
+	$content               = '<p class="wp-block-post-excerpt__excerpt">' . $excerpt;
 	$show_more_on_new_line = ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'];
 	if ( $show_more_on_new_line && ! empty( $more_text ) ) {
 		$content .= '</p><p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';

package/src/post-featured-image/block.json

@@ -29,7 +29,11 @@
 			"text": false,
 			"background": false
 		},
-		"html": false
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-post-featured-image-editor",
 	"style": "wp-block-post-featured-image"

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

@@ -10,7 +10,7 @@ div[data-type="core/post-featured-image"] {
 	.post-featured-image_placeholder {
 		display: flex;
 		flex-direction: row;
-		align-items: flex-start;
+		align-items: center;
 		border-radius: $radius-block-ui;
 		background-color: $white;
 		box-shadow: inset 0 0 0 $border-width $gray-900;

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

@@ -1,5 +1,4 @@
 .wp-block-post-featured-image {
-	line-height: 0;
 	margin-left: 0;
 	margin-right: 0;
 	a {
@@ -9,6 +8,7 @@
 		max-width: 100%;
 		width: 100%;
 		height: auto;
+		vertical-align: bottom;
 	}
 
 	&.alignwide img,

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

@@ -30,7 +30,14 @@
 		"html": false,
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/post-navigation-link/index.php

@@ -63,8 +63,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 				 */
 				$label = 'next' === $navigation_type ? _x( 'Next:', 'label before the title of the next post' ) : _x( 'Previous:', 'label before the title of the previous post' );
 				$link  = sprintf(
-					/* translators: 1: label. 2: post title */
-					__( '<span class="post-navigation-link__label">%1$s</span> <span class="post-navigation-link__title">%2$s</span>' ),
+					'<span class="post-navigation-link__label">%1$s</span> <span class="post-navigation-link__title">%2$s</span>',
 					$label,
 					'%title'
 				);

package/src/post-template/edit.js

@@ -13,7 +13,7 @@ import {
 	BlockContextProvider,
 	BlockPreview,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
@@ -24,6 +24,12 @@ const TEMPLATE = [
 	[ 'core/post-date' ],
 	[ 'core/post-excerpt' ],
 ];
+
+function PostTemplateInnerBlocks() {
+	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
+	return <li { ...innerBlocksProps } />;
+}
+
 export default function PostTemplateEdit( {
 	clientId,
 	context: {
@@ -125,7 +131,6 @@ export default function PostTemplateEdit( {
 			[ `columns-${ columns }` ]: hasLayoutFlex,
 		} ),
 	} );
-	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
 
 	if ( ! posts ) {
 		return (
@@ -149,7 +154,7 @@ export default function PostTemplateEdit( {
 					>
 						{ blockContext ===
 						( activeBlockContext || blockContexts[ 0 ] ) ? (
-							<li { ...innerBlocksProps } />
+							<PostTemplateInnerBlocks />
 						) : (
 							<li>
 								<BlockPreview

package/src/post-template/index.php

@@ -34,17 +34,6 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		}
 	}
 
-	/**
-	 * Passing an empty array to post__in will return have_posts() as true (and all posts will be returned).
-	 * Logic should be used before hand to determine if WP_Query should be used in the event that the array
-	 * being passed to post__in is empty.
-	 *
-	 * @see https://core.trac.wordpress.org/ticket/28099
-	 */
-	if ( isset( $query_args['post__in'] ) && count( $query_args['post__in'] ) === 0 ) {
-		return '';
-	}
-
 	$query = new WP_Query( $query_args );
 
 	if ( ! $query->have_posts() ) {

package/src/post-terms/block.json

@@ -27,7 +27,13 @@
 		"typography": {
 			"lineHeight": true,
 			"fontSize": true,
-			"__experimentalFontWeight": true
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"

package/src/post-terms/edit.js

@@ -52,20 +52,8 @@ export default function PostTermsEdit( {
 		} ),
 	} );
 
-	if ( ! hasPost ) {
-		return (
-			<div { ...blockProps }>
-				{ __( 'Post Terms block: post not found.' ) }
-			</div>
-		);
-	}
-
-	if ( ! term ) {
-		return (
-			<div { ...blockProps }>
-				{ __( 'Post Terms block: no term specified.' ) }
-			</div>
-		);
+	if ( ! hasPost || ! term ) {
+		return <div { ...blockProps }>{ __( 'Post Terms' ) }</div>;
 	}
 
 	return (

package/src/post-terms/use-post-terms.js

@@ -19,7 +19,7 @@ export default function usePostTerms( { postId, postType, term } ) {
 			}
 			if ( ! termIds ) {
 				// Waiting for post terms to be fetched.
-				return { isLoading: true };
+				return { isLoading: term?.postTerms?.includes( postType ) };
 			}
 			if ( ! termIds.length ) {
 				return { isLoading: false };