@wordpress/block-library 7.8.0 → 7.11.0

package/src/comments/edit/placeholder.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../../post-comments-form/form';
+
+export default function PostCommentsPlaceholder( { postType, postId } ) {
+	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	postTitle = postTitle || __( 'Post Title' );
+
+	const { avatarURL } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const disabledRef = useDisabled();
+
+	return (
+		<div
+			className="wp-block-comments__legacy-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"
+								/>
+								<b className="fn">
+									<a href="#top" className="url">
+										{ __( 'A WordPress Commenter' ) }
+									</a>
+								</b>{ ' ' }
+								<span className="says">{ __( 'says' ) }:</span>
+							</div>
+
+							<div className="comment-metadata">
+								<a href="#top">
+									<time dateTime="2000-01-01T00:00:00+00:00">
+										{ __( 'January 1, 2000 at 00: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 />
+								{ __( 'Commenter avatars come from' ) }{ ' ' }
+								<a href="https://gravatar.com/">Gravatar</a>.
+							</p>
+						</div>
+
+						<div className="reply">
+							<a
+								className="comment-reply-link"
+								href="#top"
+								aria-label="Reply to 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 postId={ postId } postType={ postType } />
+		</div>
+	);
+}

package/src/comments/{edit.js → edit/template.js}

@@ -1,13 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import CommentsInspectorControls from './edit/comments-inspector-controls';
-
 const TEMPLATE = [
 	[ 'core/comments-title' ],
 	[
@@ -37,7 +27,12 @@ const TEMPLATE = [
 						'core/column',
 						{},
 						[
-							[ 'core/comment-author-name' ],
+							[
+								'core/comment-author-name',
+								{
+									fontSize: 'small',
+								},
+							],
 							[
 								'core/group',
 								{
@@ -52,12 +47,27 @@ const TEMPLATE = [
 									},
 								},
 								[
-									[ 'core/comment-date' ],
-									[ 'core/comment-edit-link' ],
+									[
+										'core/comment-date',
+										{
+											fontSize: 'small',
+										},
+									],
+									[
+										'core/comment-edit-link',
+										{
+											fontSize: 'small',
+										},
+									],
 								],
 							],
 							[ 'core/comment-content' ],
-							[ 'core/comment-reply-link' ],
+							[
+								'core/comment-reply-link',
+								{
+									fontSize: 'small',
+								},
+							],
 						],
 					],
 				],
@@ -68,21 +78,4 @@ const TEMPLATE = [
 	[ 'core/post-comments-form' ],
 ];
 
-export default function CommentsEdit( { attributes, setAttributes } ) {
-	const { tagName: TagName } = attributes;
-
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
-	} );
-
-	return (
-		<>
-			<CommentsInspectorControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-			/>
-			<TagName { ...innerBlocksProps } />
-		</>
-	);
-}
+export default TEMPLATE;

package/src/comments/editor.scss

@@ -1,3 +1,12 @@
+@import "./style.scss";
+
 .block-library-comments-toolbar__popover .components-popover__content {
 	min-width: 230px;
 }
+
+.wp-block-comments__legacy-placeholder {
+	@extend .wp-block-post-comments;
+	* {
+		pointer-events: none;
+	}
+}

package/src/comments/index.js

@@ -7,6 +7,7 @@ import { postComments as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import metadata from './block.json';
+import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
 
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };

package/src/comments/index.php

@@ -0,0 +1,219 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments` block on the server.
+ *
+ * This render callback is mainly for rendering a dynamic, legacy version of
+ * this block (the old `core/post-comments`). It uses the `comments_template()`
+ * function to generate the output, in the same way as classic PHP themes.
+ *
+ * As this callback will always run during SSR, first we need to check whether
+ * the block is in legacy mode. If not, the HTML generated in the editor is
+ * returned instead.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string Returns the filtered post comments for the current post wrapped inside "p" tags.
+ */
+function render_block_core_comments( $attributes, $content, $block ) {
+	global $post;
+
+	$is_legacy = 'core/post-comments' === $block->name || ! empty( $attributes['legacy'] );
+	if ( ! $is_legacy ) {
+		return $block->render( array( 'dynamic' => false ) );
+	}
+
+	$post_id = $block->context['postId'];
+	if ( ! isset( $post_id ) ) {
+		return '';
+	}
+
+	$comment_args = array(
+		'post_id' => $post_id,
+		'count'   => true,
+		'status'  => 'approve',
+	);
+	// Return early if there are no comments and comments are closed.
+	if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) {
+		return '';
+	}
+
+	$post_before = $post;
+	$post        = get_post( $post_id );
+	setup_postdata( $post );
+
+	ob_start();
+
+	/*
+	 * There's a deprecation warning generated by WP Core.
+	 * Ideally this deprecation is removed from Core.
+	 * In the meantime, this removes it from the output.
+	 */
+	add_filter( 'deprecated_file_trigger_error', '__return_false' );
+	comments_template();
+	remove_filter( 'deprecated_file_trigger_error', '__return_false' );
+
+	$output = ob_get_clean();
+	$post   = $post_before;
+
+	$classnames = array();
+	// Adds the old class name for styles' backwards compatibility.
+	if ( isset( $attributes['legacy'] ) ) {
+		$classnames[] = 'wp-block-post-comments';
+	}
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classnames[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array( 'class' => implode( ' ', $classnames ) )
+	);
+
+	/*
+	 * Enqueues scripts and styles required only for the legacy version. That is
+	 * why they are not defined in `block.json`.
+	 */
+	wp_enqueue_script( 'comment-reply' );
+	enqueue_legacy_post_comments_block_styles( $block->name );
+
+	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $output );
+}
+
+/**
+ * Registers the `core/comments` block on the server.
+ */
+function register_block_core_comments() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments',
+		array(
+			'render_callback'   => 'render_block_core_comments',
+			'skip_inner_blocks' => true,
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments' );
+
+/**
+ * Use the button block classes for the form-submit button.
+ *
+ * @param array $fields The default comment form arguments.
+ *
+ * @return array Returns the modified fields.
+ */
+function 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 ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" 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', 'comments_block_form_defaults' );
+
+/**
+ * Enqueues styles from the legacy `core/post-comments` block. These styles are
+ * required only by the block's fallback.
+ *
+ * @param string $block_name Name of the new block type.
+ */
+function enqueue_legacy_post_comments_block_styles( $block_name ) {
+	static $are_styles_enqueued = false;
+
+	if ( ! $are_styles_enqueued ) {
+		$handles = array(
+			'wp-block-post-comments',
+			'wp-block-buttons',
+			'wp-block-button',
+		);
+		foreach ( $handles as $handle ) {
+			wp_enqueue_block_style( $block_name, array( 'handle' => $handle ) );
+		}
+		$are_styles_enqueued = true;
+	}
+}
+
+/**
+ * Ensures backwards compatibility for any users running the Gutenberg plugin
+ * who have used Post Comments before it was merged into Comments Query Loop.
+ *
+ * The same approach was followed when core/query-loop was renamed to
+ * core/post-template.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/41807
+ * @see https://github.com/WordPress/gutenberg/pull/32514
+ */
+function register_legacy_post_comments_block() {
+	$registry = WP_Block_Type_Registry::get_instance();
+
+	/*
+	 * Remove the old `post-comments` block if it was already registered, as it
+	 * is about to be replaced by the type defined below.
+	 */
+	if ( $registry->is_registered( 'core/post-comments' ) ) {
+		unregister_block_type( 'core/post-comments' );
+	}
+
+	// Recreate the legacy block metadata.
+	$metadata = array(
+		'name'              => 'core/post-comments',
+		'category'          => 'theme',
+		'attributes'        => array(
+			'textAlign' => array(
+				'type' => 'string',
+			),
+		),
+		'uses_context'      => array(
+			'postId',
+			'postType',
+		),
+		'supports'          => array(
+			'html'       => false,
+			'align'      => array( 'wide', 'full' ),
+			'typography' => array(
+				'fontSize'                      => true,
+				'lineHeight'                    => true,
+				'__experimentalFontStyle'       => true,
+				'__experimentalFontWeight'      => true,
+				'__experimentalLetterSpacing'   => true,
+				'__experimentalTextTransform'   => true,
+				'__experimentalDefaultControls' => array(
+					'fontSize' => true,
+				),
+			),
+			'color'      => array(
+				'gradients'                     => true,
+				'link'                          => true,
+				'__experimentalDefaultControls' => array(
+					'background' => true,
+					'text'       => true,
+				),
+			),
+			'inserter'   => false,
+		),
+		'style'             => array(
+			'wp-block-post-comments',
+			'wp-block-buttons',
+			'wp-block-button',
+		),
+		'editorStyle'       => 'wp-block-post-comments-editor',
+		'render_callback'   => 'render_block_core_comments',
+		'skip_inner_blocks' => true,
+	);
+
+	/*
+	 * Filters the metadata object, the same way it's done inside
+	 * `register_block_type_from_metadata()`. This applies some default filters,
+	 * like `_wp_multiple_block_styles`, which is required in this case because
+	 * the block has multiple styles.
+	 */
+	$metadata = apply_filters( 'block_type_metadata', $metadata );
+
+	register_block_type( 'core/post-comments', $metadata );
+}
+add_action( 'init', 'register_legacy_post_comments_block', 21 );

package/src/comments/save.js

@@ -1,12 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export default function CommentsSave( { attributes: { tagName: Tag } } ) {
-	return (
-		<Tag { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</Tag>
-	);
+export default function save( { attributes: { tagName: Tag, legacy } } ) {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	// The legacy version is dynamic (i.e. PHP rendered) and doesn't allow inner
+	// blocks, so nothing is saved in that case.
+	return legacy ? null : <Tag { ...innerBlocksProps } />;
 }

package/src/{post-comments → comments}/style.scss

@@ -1,4 +1,6 @@
+/* Styles for backwards compatibility with the legacy `post-comments` block */
 .wp-block-post-comments {
+
 	/* utility classes */
 	.alignleft {
 		float: left;
@@ -7,6 +9,7 @@
 	.alignright {
 		float: right;
 	}
+
 	/* end utility classes */
 
 	.navigation {
@@ -62,9 +65,11 @@
 	.comment-meta {
 		font-size: 0.875em;
 		line-height: 1.5;
+
 		b {
 			font-weight: normal;
 		}
+
 		.comment-awaiting-moderation {
 			margin-top: 1em;
 			margin-bottom: 1em;
@@ -87,6 +92,7 @@
 	}
 
 	.comment-form {
+
 		textarea,
 		input:not([type="submit"]):not([type="checkbox"]) {
 			display: block;
@@ -106,6 +112,7 @@
 
 	.comment-reply-title {
 		margin-bottom: 0;
+
 		:where(small) {
 			font-size: var(--wp--preset--font-size--medium, smaller);
 			margin-left: 0.5em;
@@ -128,8 +135,12 @@
 	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;
-	}
+
+// Using :where to give this a low specificity so that element styles take precedence.
+// Needed for backwards compatibility.
+// Styles copied from button block styles.
+:where(.wp-block-post-comments input[type="submit"]) {
+	border: none;
 }

package/src/comments-pagination/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comments-pagination",
 	"title": "Comments Pagination",
 	"category": "theme",
-	"parent": [ "core/comments-query-loop" ],
+	"parent": [ "core/comments" ],
 	"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
 	"textdomain": "default",
 	"attributes": {

package/src/comments-title/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comments-title",
 	"title": "Comments Title",
 	"category": "theme",
-	"ancestor": [ "core/comments-query-loop" ],
+	"ancestor": [ "core/comments" ],
 	"description": "Displays a title with the number of comments",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],

package/src/comments-title/deprecated.js

@@ -18,13 +18,11 @@ export default [
 		},
 		supports,
 		migrate: ( oldAttributes ) => {
-			/* eslint-disable no-unused-vars */
 			const {
 				singleCommentLabel,
 				multipleCommentsLabel,
 				...newAttributes
 			} = oldAttributes;
-			/* eslint-enable no-unused-vars */
 			return newAttributes;
 		},
 		isEligible: ( { multipleCommentsLabel, singleCommentLabel } ) =>

package/src/common.scss

@@ -1,3 +1,5 @@
+@import "./elements.scss";
+
 // The following selectors have increased specificity (using the :root prefix)
 // to assure colors take effect over another base class color, mainly to let
 // the colors override the added specificity by link states such as :hover.

package/src/cover/block.json

@@ -83,6 +83,7 @@
 		"html": false,
 		"spacing": {
 			"padding": true,
+			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"padding": true
 			}

package/src/cover/edit/block-controls.js

@@ -14,22 +14,17 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { ALLOWED_MEDIA_TYPES, IMAGE_BACKGROUND_TYPE } from '../shared';
+import { ALLOWED_MEDIA_TYPES } from '../shared';
 
 export default function CoverBlockControls( {
 	attributes,
 	setAttributes,
 	onSelectMedia,
 	currentSettings,
+	toggleUseFeaturedImage,
 } ) {
-	const {
-		contentPosition,
-		id,
-		useFeaturedImage,
-		dimRatio,
-		minHeight,
-		minHeightUnit,
-	} = attributes;
+	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
+		attributes;
 	const { hasInnerBlocks, url } = currentSettings;
 
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
@@ -63,17 +58,6 @@ export default function CoverBlockControls( {
 		} );
 	};
 
-	const toggleUseFeaturedImage = () => {
-		setAttributes( {
-			id: undefined,
-			url: undefined,
-			useFeaturedImage: ! useFeaturedImage,
-			dimRatio: dimRatio === 100 ? 50 : dimRatio,
-			backgroundType: useFeaturedImage
-				? IMAGE_BACKGROUND_TYPE
-				: undefined,
-		} );
-	};
 	return (
 		<>
 			<BlockControls group="block">

package/src/cover/edit/cover-placeholder.js

@@ -16,6 +16,7 @@ export default function CoverPlaceholder( {
 	onSelectMedia,
 	onError,
 	style,
+	toggleUseFeaturedImage,
 } ) {
 	return (
 		<MediaPlaceholder
@@ -30,6 +31,7 @@ export default function CoverPlaceholder( {
 			accept="image/*,video/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			disableMediaButtons={ disableMediaButtons }
+			onToggleFeaturedImage={ toggleUseFeaturedImage }
 			onError={ onError }
 			style={ style }
 		>

package/src/cover/edit/index.js

@@ -211,12 +211,25 @@ function CoverEdit( {
 		overlayColor,
 	};
 
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			id: undefined,
+			url: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			backgroundType: useFeaturedImage
+				? IMAGE_BACKGROUND_TYPE
+				: undefined,
+		} );
+	};
+
 	const blockControls = (
 		<CoverBlockControls
 			attributes={ attributes }
 			setAttributes={ setAttributes }
 			onSelectMedia={ onSelectMedia }
 			currentSettings={ currentSettings }
+			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 		/>
 	);
 
@@ -228,6 +241,7 @@ function CoverEdit( {
 			setOverlayColor={ setOverlayColor }
 			coverRef={ ref }
 			currentSettings={ currentSettings }
+			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 		/>
 	);
 
@@ -249,6 +263,7 @@ function CoverEdit( {
 						style={ {
 							minHeight: minHeightWithUnit || undefined,
 						} }
+						toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
@@ -384,6 +399,7 @@ function CoverEdit( {
 					disableMediaButtons
 					onSelectMedia={ onSelectMedia }
 					onError={ onUploadError }
+					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 				/>
 				<div { ...innerBlocksProps } />
 			</div>