Add Term Count block

docs/reference-guides/core-blocks.md

@@ -982,6 +982,15 @@ Edit the different global regions of your site, like the header, footer, sidebar
 -	**Supports:** align, interactivity (clientNavigation), ~~html~~, ~~renaming~~, ~~reusable~~
 -	**Attributes:** area, slug, tagName, theme
 
+## Term Count
+
+Displays the post count of a taxonomy term. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-count))
+
+-	**Name:** core/term-count
+-	**Category:** theme
+-	**Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** bracketType
+
 ## Term Description
 
 Display the description of categories, tags and custom taxonomies when viewing an archive. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-description))

lib/blocks.php

@@ -124,6 +124,7 @@ function gutenberg_reregister_core_block_types() {
 				'table-of-contents.php'            => 'core/table-of-contents',
 				'tag-cloud.php'                    => 'core/tag-cloud',
 				'template-part.php'                => 'core/template-part',
+				'term-count.php'                   => 'core/term-count',
 				'term-description.php'             => 'core/term-description',
 				'term-name.php'                    => 'core/term-name',
 				'terms-query.php'                  => 'core/terms-query',

packages/block-library/src/index.js

@@ -128,6 +128,7 @@ import * as table from './table';
 import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
+import * as termCount from './term-count';
 import * as termDescription from './term-description';
 import * as termName from './term-name';
 import * as termsQuery from './terms-query';
@@ -250,6 +251,7 @@ const getAllBlocks = () => {
 		tableOfContents,
 		homeLink,
 		logInOut,
+		termCount,
 		termDescription,
 		termName,
 		queryTitle,

packages/block-library/src/style.scss

@@ -70,6 +70,7 @@
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
 @import "./table-of-contents/style.scss";
+@import "./term-count/style.scss";
 @import "./term-description/style.scss";
 @import "./term-name/style.scss";
 @import "./term-template/style.scss";

packages/block-library/src/term-count/block.json

@@ -0,0 +1,58 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/term-count",
+	"title": "Term Count",
+	"category": "theme",
+	"description": "Displays the post count of a taxonomy term.",
+	"textdomain": "default",
+	"usesContext": [ "termId", "taxonomy" ],
+	"attributes": {
+		"bracketType": {
+			"type": "string",
+			"enum": [ "none", "round", "square", "curly", "angle" ],
+			"default": "round"
+		}
+	},
+	"supports": {
+		"html": false,
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		}
+	},
+	"style": "wp-block-term-count"
+}

packages/block-library/src/term-count/edit.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, BlockControls } from '@wordpress/block-editor';
+import { ToolbarDropdownMenu } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	bareNumber,
+	numberInParenthesis,
+	numberInSquareBrackets,
+	numberInCurlyBrackets,
+	numberInAngleBrackets,
+} from './icons';
+import { useTermCount } from './use-term-count';
+
+const BRACKET_TYPES = {
+	none: { label: __( 'No brackets' ), icon: bareNumber },
+	round: {
+		label: __( 'Round brackets' ),
+		icon: numberInParenthesis,
+		before: '(',
+		after: ')',
+	},
+	square: {
+		label: __( 'Square brackets' ),
+		icon: numberInSquareBrackets,
+		before: '[',
+		after: ']',
+	},
+	curly: {
+		label: __( 'Curly brackets' ),
+		icon: numberInCurlyBrackets,
+		before: '{',
+		after: '}',
+	},
+	angle: {
+		label: __( 'Angle brackets' ),
+		icon: numberInAngleBrackets,
+		before: '<',
+		after: '>',
+	},
+};
+
+export default function TermCountEdit( {
+	attributes,
+	setAttributes,
+	context: { termId, taxonomy },
+} ) {
+	const { bracketType } = attributes;
+	const term = useTermCount( termId, taxonomy );
+
+	const termCount = term?.termCount || 0;
+
+	const blockProps = useBlockProps();
+
+	const bracketTypeControls = Object.entries( BRACKET_TYPES ).map(
+		( [ type, { label, icon } ] ) => ( {
+			role: 'menuitemradio',
+			title: label,
+			isActive: bracketType === type,
+			icon,
+			onClick: () => {
+				setAttributes( { bracketType: type } );
+			},
+		} )
+	);
+
+	const formatTermCount = ( count, type ) => {
+		const { before = '', after = '' } = BRACKET_TYPES[ type ] || {};
+		return `${ before }${ count }${ after }`;
+	};
+
+	return (
+		<>
+			<BlockControls group="block">
+				<ToolbarDropdownMenu
+					icon={ BRACKET_TYPES[ bracketType ]?.icon ?? bareNumber }
+					label={ __( 'Change bracket type' ) }
+					controls={ bracketTypeControls }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				{ formatTermCount( termCount, bracketType ) }
+			</div>
+		</>
+	);
+}

packages/block-library/src/term-count/icons.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export const bareNumber = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M 10 6 L 9.609375 9 L 7 9 L 7 10.5 L 9.4121094 10.5 L 9.0878906 13 L 7 13 L 7 14.5 L 8.890625 14.5 L 8.5 17.5 L 10 17.5 L 10.390625 14.5 L 12.890625 14.5 L 12.5 17.5 L 14 17.5 L 14.390625 14.5 L 17 14.5 L 17 13 L 14.587891 13 L 14.912109 10.5 L 17 10.5 L 17 9 L 15.109375 9 L 15.5 6 L 14 6 L 13.609375 9 L 11.109375 9 L 11.5 6 L 10 6 z M 10.912109 10.5 L 13.412109 10.5 L 13.087891 13 L 10.587891 13 L 10.912109 10.5 z" />
+	</SVG>
+);
+
+export const numberInParenthesis = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M 10,6 9.609375,9 H 7 v 1.5 H 9.4121094 L 9.0878906,13 H 7 v 1.5 H 8.890625 L 8.5,17.5 H 10 l 0.390625,-3 h 2.5 L 12.5,17.5 H 14 l 0.390625,-3 H 17 V 13 h -2.412109 l 0.324218,-2.5 H 17 V 9 H 15.109375 L 15.5,6 H 14 l -0.390625,3 h -2.5 L 11.5,6 Z m 0.912109,4.5 h 2.5 L 13.087891,13 h -2.5 z M 18.5,3 c 0,0 1.5,4.004036 1.5,9 0,4.995964 -1.5,9 -1.5,9 H 20 c 0,0 1.5,-4.004036 1.5,-9 C 21.5,7.004036 20,3 20,3 Z M 5.5,21 C 5.5,21 4,16.995964 4,12 4,7.0040356 5.5,3 5.5,3 H 4 c 0,0 -1.5,4.004036 -1.5,9 0,4.995964 1.5,9 1.5,9 z" />
+	</SVG>
+);
+
+export const numberInSquareBrackets = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M 21.5,21 V 3 H 18 v 1.5 h 2 v 15 H 18 V 21 Z M 2.5,3 V 21 H 6 V 19.5 H 4 V 4.5 H 6 V 3 Z M 10,6 9.609375,9 H 7 v 1.5 H 9.4121094 L 9.0878906,13 H 7 v 1.5 H 8.890625 L 8.5,17.5 H 10 l 0.390625,-3 h 2.5 L 12.5,17.5 H 14 l 0.390625,-3 H 17 V 13 h -2.412109 l 0.324218,-2.5 H 17 V 9 H 15.109375 L 15.5,6 H 14 l -0.390625,3 h -2.5 L 11.5,6 Z m 0.912109,4.5 h 2.5 L 13.087891,13 h -2.5 z" />
+	</SVG>
+);
+
+export const numberInCurlyBrackets = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M 10,6 9.609375,9 H 7 v 1.5 H 9.4121094 L 9.0878906,13 H 7 v 1.5 H 8.890625 L 8.5,17.5 H 10 l 0.390625,-3 h 2.5 L 12.5,17.5 H 14 l 0.390625,-3 H 17 V 13 h -2.412109 l 0.324218,-2.5 H 17 V 9 H 15.109375 L 15.5,6 H 14 l -0.390625,3 h -2.5 L 11.5,6 Z m 0.912109,4.5 h 2.5 L 13.087891,13 h -2.5 z M 18.5,21 c 1.104567,0 2,-0.895433 2,-2 v -4 c 0,-1.104567 0.895433,-2 2,-2 v -2 c -1.104567,0 -2,-0.895433 -2,-2 V 5 c 0,-1.104567 -0.895433,-2 -2,-2 H 17 v 1.5 h 1.5 A 0.5,0.5 0 0 1 19,5 v 5 c 0,1.104567 0.895433,2 2,2 -1.104567,0 -2,0.895433 -2,2 v 5 c 0,0.276142 -0.223858,0.5 -0.5,0.5 H 17 V 21 Z M 5.5,3 c -1.1045668,0 -2,0.8954327 -2,2 v 4 c 0,1.104567 -0.8954332,2 -2,2 v 2 c 1.1045668,0 2,0.895433 2,2 v 4 c 0,1.104567 0.8954332,2 2,2 H 7 V 19.5 H 5.5 A 0.5,0.5 0 0 1 5,19 V 14 C 5,12.895433 4.1045668,12 3,12 4.1045668,12 5,11.104567 5,10 V 5 C 5,4.7238579 5.2238579,4.5 5.5,4.5 H 7 V 3 Z" />
+	</SVG>
+);
+
+export const numberInAngleBrackets = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M 18.970703,16.53125 23.5,12 18.970703,7.46875 17.910156,8.53125 21.378906,12 17.910156,15.46875 Z M 5.0292969,7.46875 0.5,12 5.0292969,16.53125 6.0898438,15.46875 2.6210938,12 6.0898438,8.53125 Z M 10,6 9.609375,9 H 7 v 1.5 H 9.4121094 L 9.0878906,13 H 7 v 1.5 H 8.890625 L 8.5,17.5 H 10 l 0.390625,-3 h 2.5 L 12.5,17.5 H 14 l 0.390625,-3 H 17 V 13 h -2.412109 l 0.324218,-2.5 H 17 V 9 H 15.109375 L 15.5,6 H 14 l -0.390625,3 h -2.5 L 11.5,6 Z m 0.912109,4.5 h 2.5 L 13.087891,13 h -2.5 z" />
+	</SVG>
+);

packages/block-library/src/term-count/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { termCount as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/term-count/index.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Server-side rendering of the `core/term-count` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/term-count` block on the server.
+ *
+ * @since 6.9.0
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the count of the current taxonomy term wrapped inside a heading tag.
+ */
+function render_block_core_term_count( $attributes, $content, $block ) {
+	// Get term from context or from the current query.
+	if ( isset( $block->context['termId'] ) && isset( $block->context['taxonomy'] ) ) {
+		$term = get_term( $block->context['termId'], $block->context['taxonomy'] );
+	} else {
+		$term = get_queried_object();
+		if ( ! $term instanceof WP_Term ) {
+			$term = null;
+		}
+	}
+
+	if ( ! $term || is_wp_error( $term ) ) {
+		return '';
+	}
+
+	$term_count = $term->count;
+
+	// Format the term count based on bracket type.
+	switch ( $attributes['bracketType'] ) {
+		case 'none':
+			// No formatting needed.
+			break;
+		case 'round':
+			$term_count = "({$term_count})";
+			break;
+		case 'square':
+			$term_count = "[{$term_count}]";
+			break;
+		case 'curly':
+			$term_count = "{{$term_count}}";
+			break;
+		case 'angle':
+			$term_count = "<{$term_count}>";
+			break;
+		default:
+			// Default to no formatting for unknown types.
+			break;
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$term_count
+	);
+}
+
+/**
+ * Registers the `core/term-count` block on the server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_term_count() {
+	register_block_type_from_metadata(
+		__DIR__ . '/term-count',
+		array(
+			'render_callback' => 'render_block_core_term_count',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_term_count' );

packages/block-library/src/term-count/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

packages/block-library/src/term-count/style.scss

@@ -0,0 +1,4 @@
+.wp-block-term-count {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}