@wordpress/block-library 7.4.0 → 7.7.0

package/src/post-author-name/transforms.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-author' ],
+			transform: ( { textAlign } ) =>
+				createBlock( 'core/post-author-name', { textAlign } ),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-author' ],
+			transform: ( { textAlign } ) =>
+				createBlock( 'core/post-author', { textAlign } ),
+		},
+	],
+};
+
+export default transforms;

package/src/post-comment/block.json

@@ -1,10 +1,11 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/post-comment",
 	"title": "Post Comment (deprecated)",
 	"category": "theme",
-	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
+	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"commentId": {

package/src/post-comments/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-comments",
 	"title": "Post Comments (deprecated)",
 	"category": "theme",
-	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
+	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {
@@ -40,5 +40,6 @@
 		"wp-block-post-comments",
 		"wp-block-buttons",
 		"wp-block-button"
-	]
+	],
+	"editorStyle": "wp-block-post-comments-editor"
 }

package/src/post-comments/edit.js

@@ -6,65 +6,90 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,
 	Warning,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-
-function PostCommentsDisplay( { postId } ) {
-	return useSelect(
-		( select ) => {
-			const comments = select( coreStore ).getEntityRecords(
-				'root',
-				'comment',
-				{
-					post: postId,
-				}
-			);
-			// TODO: "No Comments" placeholder should be editable.
-			return comments && comments.length
-				? comments.map( ( comment ) => (
-						<RawHTML
-							className="wp-block-post-comments__comment"
-							key={ comment.id }
-						>
-							{ comment.content.rendered }
-						</RawHTML>
-				  ) )
-				: __( 'No comments.' );
-		},
-		[ postId ]
-	);
-}
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useDisabled } from '@wordpress/compose';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../post-comments-form/form';
 
 export default function PostCommentsEdit( {
-	attributes,
+	attributes: { textAlign },
 	setAttributes,
-	context,
+	context: { postType, postId },
 } ) {
-	const { postType, postId } = context;
-	const { textAlign } = attributes;
+	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	postTitle = postTitle || __( 'Post Title' );
+
+	const [ commentStatus ] = useEntityProp(
+		'postType',
+		postType,
+		'comment_status',
+		postId
+	);
+
+	const { avatarURL, defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
+
+	let warning = __(
+		'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments" block.'
+	);
+	let showPlaceholder = true;
+
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments block: Comments to this %s are not allowed.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( ! postTypeSupportsComments ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments block: Comments for this post type (%s) are not enabled.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( 'open' !== defaultCommentStatus ) {
+			warning = __( 'Post Comments block: Comments are not enabled.' );
+			showPlaceholder = false;
+		}
+	}
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
-	if ( ! postType || ! postId ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Post comments block: no post found.' ) }
-				</Warning>
-			</div>
-		);
-	}
+	const disabledRef = useDisabled();
 
 	return (
 		<>
@@ -78,7 +103,144 @@ export default function PostCommentsEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				<PostCommentsDisplay postId={ postId } />
+				<Warning>{ warning }</Warning>
+
+				{ showPlaceholder && (
+					<div
+						className="wp-block-post-comments__placeholder"
+						ref={ disabledRef }
+					>
+						<h3>
+							{
+								/* translators: %s: Post title. */
+								sprintf( __( 'One response to %s' ), postTitle )
+							}
+						</h3>
+
+						<div className="navigation">
+							<div className="alignleft">
+								<a href="#top">« { __( 'Older Comments' ) }</a>
+							</div>
+							<div className="alignright">
+								<a href="#top">{ __( 'Newer Comments' ) } »</a>
+							</div>
+						</div>
+
+						<ol className="commentlist">
+							<li className="comment even thread-even depth-1">
+								<article className="comment-body">
+									<footer className="comment-meta">
+										<div className="comment-author vcard">
+											<img
+												alt="Commenter Avatar"
+												src={ avatarURL }
+												className="avatar avatar-32 photo"
+												height="32"
+												width="32"
+												loading="lazy"
+											/>
+											{ 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-01T12:00:00+00:00">
+													{ __(
+														'January 1, 2000 at 12:00 am'
+													) }
+												</time>
+											</a>{ ' ' }
+											<span className="edit-link">
+												<a
+													className="comment-edit-link"
+													href="#top"
+												>
+													{ __( 'Edit' ) }
+												</a>
+											</span>
+										</div>
+									</footer>
+
+									<div className="comment-content">
+										<p>
+											{ __( 'Hi, this is a comment.' ) }
+											<br />
+											{ __(
+												'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
+											) }
+											<br />
+											{ 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>
+
+									<div className="reply">
+										<a
+											className="comment-reply-link"
+											href="#top"
+											aria-label={ sprintf(
+												/* translators: Comment reply button text. %s: Comment author name. */
+												__( 'Reply to %s' ),
+												__( 'A WordPress Commenter' )
+											) }
+										>
+											{ __( 'Reply' ) }
+										</a>
+									</div>
+								</article>
+							</li>
+						</ol>
+
+						<div className="navigation">
+							<div className="alignleft">
+								<a href="#top">« { __( 'Older Comments' ) }</a>
+							</div>
+							<div className="alignright">
+								<a href="#top">{ __( 'Newer Comments' ) } »</a>
+							</div>
+						</div>
+
+						<CommentsForm />
+					</div>
+				) }
 			</div>
 		</>
 	);

package/src/post-comments/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-post-comments__placeholder * {
+	pointer-events: none;
+}

package/src/post-comments/index.php

@@ -51,6 +51,8 @@ function render_block_core_post_comments( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$output             = ob_get_clean();
 
+	wp_enqueue_script( 'comment-reply' );
+
 	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $output );
 }
 
@@ -76,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,10 +1,24 @@
 .wp-block-post-comments {
-	// Remove extraneous top padding added to the first heading of the block.
-	> h3:first-of-type {
-		margin-top: 0;
+	/* utility classes */
+	.alignleft {
+		float: left;
+	}
+
+	.alignright {
+		float: right;
+	}
+	/* end utility classes */
+
+	.navigation {
+		&::after {
+			content: "";
+			display: table;
+			clear: both;
+		}
 	}
 
 	.commentlist {
+		clear: both;
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -48,11 +62,14 @@
 	.comment-meta {
 		font-size: 0.875em;
 		line-height: 1.5;
-		margin-left: -3.25em;
-
 		b {
 			font-weight: normal;
 		}
+		.comment-awaiting-moderation {
+			margin-top: 1em;
+			margin-bottom: 1em;
+			display: block;
+		}
 	}
 
 	.comment-body .commentmetadata {
@@ -87,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/block.json

@@ -34,6 +34,7 @@
 			}
 		}
 	},
+	"editorStyle": "wp-block-post-comments-form-editor",
 	"style": [
 		"wp-block-post-comments-form",
 		"wp-block-buttons",

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

@@ -11,9 +11,15 @@ import {
 	BlockControls,
 	Warning,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import CommentsForm from './form';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -34,7 +40,49 @@ export default function PostCommentsFormEdit( {
 		} ),
 	} );
 
-	const isInSiteEditor = postType === undefined || postId === undefined;
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const { defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
+
+	let warning = false;
+	let showPlaceholder = true;
+
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments Form block: Comments on this %s are not allowed.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( ! postTypeSupportsComments ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments Form block: Comments for this post type (%s) are not enabled.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( 'open' !== defaultCommentStatus ) {
+			warning = __(
+				'Post Comments Form block: Comments are not enabled.'
+			);
+			showPlaceholder = false;
+		}
+	}
 
 	return (
 		<>
@@ -47,28 +95,9 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ ! commentStatus && ! isInSiteEditor && (
-					<Warning>
-						{ __(
-							'Post Comments Form block: comments are not enabled for this post type.'
-						) }
-					</Warning>
-				) }
-
-				{ 'open' !== commentStatus && ! isInSiteEditor && (
-					<Warning>
-						{ sprintf(
-							/* translators: 1: Post type (i.e. "post", "page") */
-							__(
-								'Post Comments Form block: comments to this %s are not allowed.'
-							),
-							postType
-						) }
-					</Warning>
-				) }
+				{ warning && <Warning>{ warning }</Warning> }
 
-				{ ( 'open' === commentStatus || isInSiteEditor ) &&
-					__( 'Post Comments Form' ) }
+				{ showPlaceholder ? <CommentsForm /> : null }
 			</div>
 		</>
 	);

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

@@ -0,0 +1,3 @@
+.wp-block-post-comments-form * {
+	pointer-events: none;
+}

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

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalElementButtonClassName } from '@wordpress/block-editor';
+import { useDisabled, useInstanceId } from '@wordpress/compose';
+
+const CommentsForm = () => {
+	const disabledFormRef = useDisabled();
+	const instanceId = useInstanceId( CommentsForm );
+
+	return (
+		<div className="comment-respond">
+			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
+			<form noValidate className="comment-form" ref={ disabledFormRef }>
+				<p>
+					<label htmlFor={ `comment-${ instanceId }` }>
+						{ __( 'Comment' ) }
+					</label>
+					<textarea
+						id={ `comment-${ instanceId }` }
+						name="comment"
+						cols="45"
+						rows="8"
+					/>
+				</p>
+				<p className="form-submit wp-block-button">
+					<input
+						name="submit"
+						type="submit"
+						className={ classnames(
+							'submit',
+							'wp-block-button__link',
+							__experimentalElementButtonClassName
+						) }
+						label={ __( 'Post Comment' ) }
+						value={ __( 'Post Comment' ) }
+					/>
+				</p>
+			</form>
+		</div>
+	);
+};
+
+export default CommentsForm;

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

@@ -18,17 +18,25 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 		return '';
 	}
 
+	if ( post_password_required( $block->context['postId'] ) ) {
+		return;
+	}
+
 	$classes = 'comment-respond'; // See comment further below.
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes .= ' has-text-align-' . $attributes['textAlign'];
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
+	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
+
 	ob_start();
 	comment_form( array(), $block->context['postId'] );
 	$form = ob_get_clean();
 
+	remove_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
+
 	// We use the outermost wrapping `<div />` returned by `comment_form()`
 	// which is identified by its default classname `comment-respond` to inject
 	// our wrapper attributes. This way, it is guaranteed that all styling applied
@@ -64,10 +72,9 @@ 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>';
 	}
 
 	return $fields;
 }
-add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );

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

@@ -85,7 +85,21 @@ function Placeholder() {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<p>{ __( 'Post Content' ) }</p>
+			<p>
+				{ __(
+					'This is the Post Content block, it will display all the blocks in any single post or page.'
+				) }
+			</p>
+			<p>
+				{ __(
+					'That might be a simple arrangement like consecutive paragraphs in a blog post, or a more elaborate composition that includes image galleries, videos, tables, columns, and any other block types.'
+				) }
+			</p>
+			<p>
+				{ __(
+					'If there are any Custom Post Types registered at your site, the Post Content block can display the contents of those entries as well.'
+				) }
+			</p>
 		</div>
 	);
 }