@wordpress/block-library 7.3.2 → 7.3.3

package/build-style/post-comments/editor-rtl.css

@@ -0,0 +1,79 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.wp-block-post-comments__placeholder * {
+  pointer-events: none;
+}

package/build-style/post-comments/editor.css

@@ -0,0 +1,79 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.wp-block-post-comments__placeholder * {
+  pointer-events: none;
+}

package/build-style/post-comments/style-rtl.css

@@ -74,10 +74,8 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-post-comments > h3:first-of-type {
-  margin-top: 0;
-}
 .wp-block-post-comments .commentlist {
+  clear: both;
   list-style: none;
   margin: 0;
   padding: 0;

package/build-style/post-comments/style.css

@@ -74,10 +74,8 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-post-comments > h3:first-of-type {
-  margin-top: 0;
-}
 .wp-block-post-comments .commentlist {
+  clear: both;
   list-style: none;
   margin: 0;
   padding: 0;

package/build-style/post-comments-form/editor-rtl.css

@@ -0,0 +1,79 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.wp-block-post-comments-form * {
+  pointer-events: none;
+}

package/build-style/post-comments-form/editor.css

@@ -0,0 +1,79 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.wp-block-post-comments-form * {
+  pointer-events: none;
+}

package/build-style/post-comments-form/style-rtl.css

@@ -128,4 +128,13 @@
 }
 .wp-block-post-comments-form .comment-form-cookies-consent #wp-comment-cookies-consent {
   margin-top: 0.35em;
+}
+.wp-block-post-comments-form .comment-reply-title {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+.wp-block-post-comments-form .comment-reply-title :where(small) {
+  font-size: var(--wp--preset--font-size--medium, smaller);
 }

package/build-style/post-comments-form/style.css

@@ -128,4 +128,13 @@
 }
 .wp-block-post-comments-form .comment-form-cookies-consent #wp-comment-cookies-consent {
   margin-top: 0.35em;
+}
+.wp-block-post-comments-form .comment-reply-title {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+.wp-block-post-comments-form .comment-reply-title :where(small) {
+  font-size: var(--wp--preset--font-size--medium, smaller);
 }

package/build-style/style-rtl.css

@@ -2099,10 +2099,8 @@ p.has-background {
   margin: 0;
 }
 
-.wp-block-post-comments > h3:first-of-type {
-  margin-top: 0;
-}
 .wp-block-post-comments .commentlist {
+  clear: both;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2240,6 +2238,15 @@ p.has-background {
 .wp-block-post-comments-form .comment-form-cookies-consent #wp-comment-cookies-consent {
   margin-top: 0.35em;
 }
+.wp-block-post-comments-form .comment-reply-title {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+.wp-block-post-comments-form .comment-reply-title :where(small) {
+  font-size: var(--wp--preset--font-size--medium, smaller);
+}
 
 .wp-block-post-excerpt__more-link {
   display: inline-block;

package/build-style/style.css

@@ -2123,10 +2123,8 @@ p.has-background {
   margin: 0;
 }
 
-.wp-block-post-comments > h3:first-of-type {
-  margin-top: 0;
-}
 .wp-block-post-comments .commentlist {
+  clear: both;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2264,6 +2262,15 @@ p.has-background {
 .wp-block-post-comments-form .comment-form-cookies-consent #wp-comment-cookies-consent {
   margin-top: 0.35em;
 }
+.wp-block-post-comments-form .comment-reply-title {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+.wp-block-post-comments-form .comment-reply-title :where(small) {
+  font-size: var(--wp--preset--font-size--medium, smaller);
+}
 
 .wp-block-post-excerpt__more-link {
   display: inline-block;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.3.2",
+	"version": "7.3.3",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,11 +37,11 @@
 		"@wordpress/api-fetch": "^6.3.1",
 		"@wordpress/autop": "^3.6.1",
 		"@wordpress/blob": "^3.6.1",
-		"@wordpress/block-editor": "^8.5.2",
-		"@wordpress/blocks": "^11.5.2",
-		"@wordpress/components": "^19.8.1",
+		"@wordpress/block-editor": "^8.5.3",
+		"@wordpress/blocks": "^11.5.3",
+		"@wordpress/components": "^19.8.2",
 		"@wordpress/compose": "^5.4.1",
-		"@wordpress/core-data": "^4.4.2",
+		"@wordpress/core-data": "^4.4.3",
 		"@wordpress/data": "^6.6.1",
 		"@wordpress/date": "^4.6.1",
 		"@wordpress/deprecated": "^3.6.1",
@@ -50,13 +50,13 @@
 		"@wordpress/hooks": "^3.6.1",
 		"@wordpress/html-entities": "^3.6.1",
 		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.1",
+		"@wordpress/icons": "^8.2.2",
 		"@wordpress/keycodes": "^3.6.1",
 		"@wordpress/notices": "^3.6.1",
 		"@wordpress/primitives": "^3.4.1",
-		"@wordpress/reusable-blocks": "^3.4.2",
+		"@wordpress/reusable-blocks": "^3.4.3",
 		"@wordpress/rich-text": "^5.4.1",
-		"@wordpress/server-side-render": "^3.4.2",
+		"@wordpress/server-side-render": "^3.4.3",
 		"@wordpress/url": "^3.7.1",
 		"@wordpress/viewport": "^4.4.1",
 		"classnames": "^2.3.1",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
+	"gitHead": "37e930b93fbba88fa024a91eb527a90f855c97f3"
 }

package/src/comment-edit-link/index.php

@@ -29,10 +29,7 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
 
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
-	}
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+		$classes .= 'has-text-align-' . $attributes['textAlign'];
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

package/src/comment-reply-link/index.php

@@ -53,10 +53,7 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
-	}
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+		$classes .= 'has-text-align-' . $attributes['textAlign'];
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

package/src/comment-template/hooks.js

@@ -7,6 +7,9 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 import apiFetch from '@wordpress/api-fetch';
 
+// This is limited by WP REST API
+const MAX_COMMENTS_PER_PAGE = 100;
+
 /**
  * Return an object with the query args needed to fetch the default page of
  * comments.
@@ -29,7 +32,8 @@ export const useCommentQueryArgs = ( { postId } ) => {
 
 	// Get the Discussion settings that may be needed to query the comments.
 	const {
-		commentsPerPage: perPage,
+		pageComments,
+		commentsPerPage,
 		defaultCommentsPage: defaultPage,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -37,6 +41,14 @@ export const useCommentQueryArgs = ( { postId } ) => {
 		return __experimentalDiscussionSettings;
 	} );
 
+	// WP REST API doesn't allow fetching more than max items limit set per single page of data.
+	// As for the editor performance is more important than completeness of data and fetching only the
+	// max allowed for single page should be enough for the purpose of design and laying out the page.
+	// Fetching over the limit would return an error here but would work with backend query.
+	const perPage = pageComments
+		? Math.min( commentsPerPage, MAX_COMMENTS_PER_PAGE )
+		: MAX_COMMENTS_PER_PAGE;
+
 	// Get the number of the default page.
 	const page = useDefaultPageIndex( {
 		defaultPage,

package/src/comment-template/index.php

@@ -8,6 +8,8 @@
 /**
  * Function that recursively renders a list of nested comments.
  *
+ * @global int $comment_depth
+ *
  * @param WP_Comment[] $comments        The array of comments.
  * @param WP_Block     $block           Block instance.
  * @return string
@@ -31,6 +33,17 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 
 		$children = $comment->get_children();
 
+		/*
+		 * We need to create the CSS classes BEFORE recursing into the children.
+		 * This is because comment_class() uses globals like `$comment_alt`
+		 * and `$comment_thread_alt` which are order-sensitive.
+		 *
+		 * The `false` parameter at the end means that we do NOT want the function
+		 * to `echo` the output but to return a string.
+		 * See https://developer.wordpress.org/reference/functions/comment_class/#parameters.
+		 */
+		$comment_classes = comment_class( '', $comment->comment_ID, $comment->comment_post_ID, false );
+
 		// If the comment has children, recurse to create the HTML for the nested
 		// comments.
 		if ( ! empty( $children ) ) {
@@ -43,10 +56,6 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 			$comment_depth -= 1;
 		}
 
-		// The `false` parameter at the end means that we do NOT want the function to `echo` the output but to return a string.
-		// See https://developer.wordpress.org/reference/functions/comment_class/#parameters.
-		$comment_classes = comment_class( '', $comment->comment_ID, $comment->comment_post_ID, false );
-
 		$content .= sprintf( '<li id="comment-%1$s" %2$s>%3$s</li>', $comment->comment_ID, $comment_classes, $block_content );
 	}
 

package/src/comments-pagination/edit.js

@@ -7,6 +7,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
@@ -53,6 +54,7 @@ export default function QueryPaginationEdit( {
 			].includes( innerBlock.name );
 		} );
 	}, [] );
+
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -63,6 +65,27 @@ export default function QueryPaginationEdit( {
 		],
 		__experimentalLayout: usedLayout,
 	} );
+
+	// Get the Discussion settings
+	const pageComments = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings?.pageComments;
+	}, [] );
+
+	// If paging comments is not enabled in the Discussion Settings then hide the pagination
+	// controls. We don't want to remove them from the template so that when the user enables
+	// paging comments, the controls will be visible.
+	if ( ! pageComments ) {
+		return (
+			<Warning>
+				{ __(
+					'Comments Pagination block: paging comments is disabled in the Discussion Settings'
+				) }
+			</Warning>
+		);
+	}
+
 	return (
 		<>
 			{ hasNextPreviousBlocks && (

package/src/comments-query-loop/edit.js

@@ -9,6 +9,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import CommentsInspectorControls from './edit/comments-inspector-controls';
 
 const TEMPLATE = [
+	[ 'core/comments-title' ],
 	[
 		'core/comment-template',
 		{},
@@ -64,6 +65,7 @@ const TEMPLATE = [
 		],
 	],
 	[ 'core/comments-pagination' ],
+	[ 'core/post-comments-form' ],
 ];
 
 export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {