@wordpress/block-library 7.3.2 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.3.2",
+	"version": "7.4.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.1",
-		"@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/compose": "^5.4.1",
-		"@wordpress/core-data": "^4.4.2",
-		"@wordpress/data": "^6.6.1",
-		"@wordpress/date": "^4.6.1",
-		"@wordpress/deprecated": "^3.6.1",
-		"@wordpress/dom": "^3.6.1",
-		"@wordpress/element": "^4.4.1",
-		"@wordpress/hooks": "^3.6.1",
-		"@wordpress/html-entities": "^3.6.1",
-		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.1",
-		"@wordpress/keycodes": "^3.6.1",
-		"@wordpress/notices": "^3.6.1",
-		"@wordpress/primitives": "^3.4.1",
-		"@wordpress/reusable-blocks": "^3.4.2",
-		"@wordpress/rich-text": "^5.4.1",
-		"@wordpress/server-side-render": "^3.4.2",
-		"@wordpress/url": "^3.7.1",
-		"@wordpress/viewport": "^4.4.1",
+		"@wordpress/a11y": "^3.7.0",
+		"@wordpress/api-fetch": "^6.4.0",
+		"@wordpress/autop": "^3.7.0",
+		"@wordpress/blob": "^3.7.0",
+		"@wordpress/block-editor": "^8.6.0",
+		"@wordpress/blocks": "^11.6.0",
+		"@wordpress/components": "^19.9.0",
+		"@wordpress/compose": "^5.5.0",
+		"@wordpress/core-data": "^4.5.0",
+		"@wordpress/data": "^6.7.0",
+		"@wordpress/date": "^4.7.0",
+		"@wordpress/deprecated": "^3.7.0",
+		"@wordpress/dom": "^3.7.0",
+		"@wordpress/element": "^4.5.0",
+		"@wordpress/hooks": "^3.7.0",
+		"@wordpress/html-entities": "^3.7.0",
+		"@wordpress/i18n": "^4.7.0",
+		"@wordpress/icons": "^8.3.0",
+		"@wordpress/keycodes": "^3.7.0",
+		"@wordpress/notices": "^3.7.0",
+		"@wordpress/primitives": "^3.5.0",
+		"@wordpress/reusable-blocks": "^3.5.0",
+		"@wordpress/rich-text": "^5.5.0",
+		"@wordpress/server-side-render": "^3.5.0",
+		"@wordpress/url": "^3.8.0",
+		"@wordpress/viewport": "^4.5.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
+	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
 }

package/src/archives/edit.js

@@ -17,7 +17,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Archives settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }

package/src/audio/edit.js

@@ -159,7 +159,7 @@ function AudioEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Audio settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Autoplay' ) }
 						onChange={ toggleAttribute( 'autoplay' ) }

package/src/audio/edit.native.js

@@ -177,7 +177,7 @@ function AudioEdit( {
 		>
 			<View>
 				<InspectorControls>
-					<PanelBody title={ __( 'Audio settings' ) }>
+					<PanelBody title={ __( 'Settings' ) }>
 						<ToggleControl
 							label={ __( 'Autoplay' ) }
 							onChange={ toggleAttribute( 'autoplay' ) }

package/src/categories/block.json

@@ -22,6 +22,10 @@
 		"showOnlyTopLevel": {
 			"type": "boolean",
 			"default": false
+		},
+		"showEmpty": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

package/src/categories/edit.js

@@ -25,11 +25,12 @@ export default function CategoriesEdit( {
 		showHierarchy,
 		showPostCounts,
 		showOnlyTopLevel,
+		showEmpty,
 	},
 	setAttributes,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
-	const query = { per_page: -1, hide_empty: true, context: 'view' };
+	const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
 	if ( showOnlyTopLevel ) {
 		query.parent = 0;
 	}
@@ -128,7 +129,7 @@ export default function CategoriesEdit( {
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Categories settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
@@ -144,6 +145,11 @@ export default function CategoriesEdit( {
 						checked={ showOnlyTopLevel }
 						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
 					/>
+					<ToggleControl
+						label={ __( 'Show empty categories' ) }
+						checked={ showEmpty }
+						onChange={ toggleAttribute( 'showEmpty' ) }
+					/>
 					{ ! showOnlyTopLevel && (
 						<ToggleControl
 							label={ __( 'Show hierarchy' ) }

package/src/categories/index.php

@@ -22,6 +22,7 @@ function render_block_core_categories( $attributes ) {
 		'orderby'      => 'name',
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
 		'title_li'     => '',
+		'hide_empty'   => empty( $attributes['showEmpty'] ),
 	);
 	if ( ! empty( $attributes['showOnlyTopLevel'] ) && $attributes['showOnlyTopLevel'] ) {
 		$args['parent'] = 0;

package/src/column/block.json

@@ -41,6 +41,16 @@
 				"padding": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"__experimentalLayout": true
 	}
 }

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',
 		{},

package/src/comments-title/block.json

@@ -0,0 +1,70 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-title",
+	"title": "Comments Title",
+	"category": "theme",
+	"ancestor": [ "core/comments-query-loop" ],
+	"description": "Displays a title with the number of comments",
+	"textdomain": "default",
+	"usesContext": [ "postId", "postType" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		},
+		"singleCommentLabel": {
+			"type": "string"
+		},
+		"multipleCommentsLabel": {
+			"type": "string"
+		},
+		"showPostTitle": {
+			"type": "boolean",
+			"default": true
+		},
+		"showCommentsCount": {
+			"type": "boolean",
+			"default": true
+		},
+		"level": {
+			"type": "number",
+			"default": 2
+		}
+	},
+	"supports": {
+		"anchor": false,
+		"align": true,
+		"html": false,
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"__experimentalFontFamily": true,
+				"__experimentalFontStyle": true,
+				"__experimentalFontWeight": true
+			}
+		}
+	}
+}

package/src/comments-title/edit.js

@@ -0,0 +1,197 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+	PlainText,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useEntityProp } from '@wordpress/core-data';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+
+export default function Edit( {
+	attributes: {
+		textAlign,
+		singleCommentLabel,
+		multipleCommentsLabel,
+		showPostTitle,
+		showCommentsCount,
+		level,
+	},
+	setAttributes,
+	context: { postType, postId },
+} ) {
+	const TagName = 'h' + level;
+	const [ commentsCount, setCommentsCount ] = useState();
+	const [ editingMode, setEditingMode ] = useState( 'plural' );
+	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	const isSiteEditor = typeof postId === 'undefined';
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	useEffect( () => {
+		if ( isSiteEditor ) {
+			setCommentsCount( 3 );
+			return;
+		}
+		const currentPostId = postId;
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/comments', {
+				post: postId,
+				_fields: 'id',
+			} ),
+			method: 'HEAD',
+			parse: false,
+		} )
+			.then( ( res ) => {
+				// Stale requests will have the `currentPostId` of an older closure.
+				if ( currentPostId === postId ) {
+					setCommentsCount(
+						parseInt( res.headers.get( 'X-WP-Total' ) )
+					);
+				}
+			} )
+			.catch( () => {
+				setCommentsCount( 0 );
+			} );
+	}, [ postId ] );
+
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+			<HeadingLevelDropdown
+				selectedLevel={ level }
+				onChange={ ( newLevel ) =>
+					setAttributes( { level: newLevel } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				{ isSiteEditor && (
+					<ToggleGroupControl
+						label={ __( 'Editing mode' ) }
+						onChange={ setEditingMode }
+						value={ editingMode }
+					>
+						<ToggleGroupControlOption
+							label={ __( 'Singular' ) }
+							value="singular"
+						/>
+						<ToggleGroupControlOption
+							label={ __( 'Plural' ) }
+							value="plural"
+						/>
+					</ToggleGroupControl>
+				) }
+				<ToggleControl
+					label={ __( 'Show post title' ) }
+					checked={ showPostTitle }
+					onChange={ ( value ) =>
+						setAttributes( { showPostTitle: value } )
+					}
+				/>
+				<ToggleControl
+					label={ __( 'Show comments count' ) }
+					checked={ showCommentsCount }
+					onChange={ ( value ) =>
+						setAttributes( { showCommentsCount: value } )
+					}
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	const postTitle = isSiteEditor ? __( '"Post Title"' ) : `"${ rawTitle }"`;
+
+	const singlePlaceholder = showPostTitle
+		? __( 'One response to ' )
+		: __( 'One response' );
+
+	const multiplePlaceholder = showPostTitle
+		? __( 'Responses to ' )
+		: __( 'Responses' );
+
+	return (
+		<>
+			{ blockControls }
+			{ inspectorControls }
+			<TagName { ...blockProps }>
+				{ editingMode === 'singular' || commentsCount === 1 ? (
+					<>
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={ singlePlaceholder }
+							placeholder={ singlePlaceholder }
+							value={ singleCommentLabel }
+							onChange={ ( newLabel ) =>
+								setAttributes( {
+									singleCommentLabel: newLabel,
+								} )
+							}
+						/>
+						{ showPostTitle ? postTitle : null }
+					</>
+				) : (
+					<>
+						{ showCommentsCount ? commentsCount : null }
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholder
+							}
+							placeholder={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholder
+							}
+							value={ multipleCommentsLabel }
+							onChange={ ( newLabel ) =>
+								setAttributes( {
+									multipleCommentsLabel: newLabel,
+								} )
+							}
+						/>
+						{ showPostTitle ? postTitle : null }
+					</>
+				) }
+			</TagName>
+		</>
+	);
+}

package/src/comments-title/editor.scss

@@ -0,0 +1,4 @@
+
+.wp-block-comments-title.has-background {
+	padding: inherit;
+}

package/src/comments-title/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { commentTitle as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};

package/src/comments-title/index.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-title` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-title` block on the server.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string Return the post comments title.
+ */
+function render_block_core_comments_title( $attributes ) {
+
+	$align_class_name    = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	$show_post_title     = ! empty( $attributes['showPostTitle'] ) && $attributes['showPostTitle'];
+	$show_comments_count = ! empty( $attributes['showCommentsCount'] ) && $attributes['showCommentsCount'];
+	$wrapper_attributes  = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$post_title          = $show_post_title ? sprintf( '"%1$s"', get_the_title() ) : null;
+	$comments_count      = number_format_i18n( get_comments_number() );
+	$tag_name            = 'h2';
+	if ( isset( $attributes['level'] ) ) {
+		$tag_name = 'h' . $attributes['level'];
+	}
+
+	if ( '0' === $comments_count ) {
+		return;
+	}
+
+	$single_default_comment_label = $show_post_title ? __( 'One response to' ) : __( 'One response' );
+	$single_comment_label         = ! empty( $attributes['singleCommentLabel'] ) ? $attributes['singleCommentLabel'] : $single_default_comment_label;
+
+	$multiple_default_comment_label = $show_post_title ? __( 'Responses to' ) : __( 'Responses' );
+	$multiple_comment_label         = ! empty( $attributes['multipleCommentsLabel'] ) ? $attributes['multipleCommentsLabel'] : $multiple_default_comment_label;
+
+	$comments_title = '%1$s %2$s %3$s';
+
+	$comments_title = sprintf(
+		$comments_title,
+		// If there is only one comment, only display the label.
+		'1' !== $comments_count && $show_comments_count ? $comments_count : null,
+		'1' === $comments_count ? $single_comment_label : $multiple_comment_label,
+		$post_title
+	);
+
+	return sprintf(
+		'<%1$s id="comments" %2$s>%3$s</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		$comments_title
+	);
+}
+
+	/**
+	 * Registers the `core/comments-title` block on the server.
+	 */
+function register_block_core_comments_title() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-title',
+		array(
+			'render_callback' => 'render_block_core_comments_title',
+		)
+	);
+}
+
+	add_action( 'init', 'register_block_core_comments_title' );