From 4ac1e410b02bd707cbb1d74d1d8a084abd32180e Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 08:19:01 -0500 Subject: [PATCH 01/22] term count block based on term name block work by @mikachan Co-authored by: mikachan --- docs/reference-guides/core-blocks.md | 10 ++ .../block-library/src/term-count/block.json | 68 +++++++++++ packages/block-library/src/term-count/edit.js | 115 ++++++++++++++++++ .../block-library/src/term-count/index.js | 21 ++++ .../block-library/src/term-count/index.php | 76 ++++++++++++ packages/block-library/src/term-count/init.js | 6 + packages/block-library/src/term-count/save.js | 0 .../block-library/src/term-count/style.scss | 4 + .../src/term-count/use-term-count.js | 101 +++++++++++++++ 9 files changed, 401 insertions(+) create mode 100644 packages/block-library/src/term-count/block.json create mode 100644 packages/block-library/src/term-count/edit.js create mode 100644 packages/block-library/src/term-count/index.js create mode 100644 packages/block-library/src/term-count/index.php create mode 100644 packages/block-library/src/term-count/init.js create mode 100644 packages/block-library/src/term-count/save.js create mode 100644 packages/block-library/src/term-count/style.scss create mode 100644 packages/block-library/src/term-count/use-term-count.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index a23ed2f9934e27..96076c9d32305b 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -982,6 +982,16 @@ 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 count of a taxonomy term. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-count)) + +- **Name:** core/term-count +- **Experimental:** true +- **Category:** theme +- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (padding), typography (fontSize, lineHeight), ~~html~~ +- **Attributes:** hasParenthesis, tagName, textAlign + ## 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)) diff --git a/packages/block-library/src/term-count/block.json b/packages/block-library/src/term-count/block.json new file mode 100644 index 00000000000000..5301be435d0b08 --- /dev/null +++ b/packages/block-library/src/term-count/block.json @@ -0,0 +1,68 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "__experimental": true, + "name": "core/term-count", + "title": "Term Count", + "category": "theme", + "description": "Displays the count of a taxonomy term.", + "textdomain": "default", + "usesContext": [ "termId", "taxonomy" ], + "attributes": { + "textAlign": { + "type": "string" + }, + "tagName": { + "type": "string", + "default": "p" + }, + "hasParenthesis": { + "type": "boolean", + "default": true + } + }, + "supports": { + "align": [ "wide", "full" ], + "html": false, + "color": { + "gradients": true, + "link": true, + "__experimentalDefaultControls": { + "background": true, + "text": true, + "link": 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" +} diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js new file mode 100644 index 00000000000000..ca766c176416e1 --- /dev/null +++ b/packages/block-library/src/term-count/edit.js @@ -0,0 +1,115 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { + useBlockProps, + BlockControls, + AlignmentControl, + InspectorControls, + HeadingLevelDropdown, +} from '@wordpress/block-editor'; +import { + ToggleControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; +import { useTermCount } from './use-term-count'; + +export default function TermCountEdit( { + attributes, + setAttributes, + context: { termId, taxonomy }, +} ) { + const { textAlign, tagName = 'p', hasParenthesis } = attributes; + const term = useTermCount( termId, taxonomy ); + + const termCount = term?.termCount || 0; + + const blockProps = useBlockProps( { + classCount: clsx( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ), + } ); + + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + + const TagName = tagName; + + let termCountDisplay = termCount; + if ( hasParenthesis ) { + termCountDisplay = sprintf( + /* translators: %d: term count number. */ + __( '(%d)' ), + termCount + ); + } + + return ( + <> + + { + setAttributes( { + tagName: newLevel === 0 ? 'p' : `h${ newLevel }`, + } ); + } } + /> + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + + + { + setAttributes( { + hasParenthesis: false, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > + !! hasParenthesis } + label={ __( 'Make term count a link' ) } + onDeselect={ () => + setAttributes( { hasParenthesis: false } ) + } + isShownByDefault + > + + setAttributes( { + hasParenthesis: ! hasParenthesis, + } ) + } + checked={ hasParenthesis } + /> + + + + { termCountDisplay } + + ); +} diff --git a/packages/block-library/src/term-count/index.js b/packages/block-library/src/term-count/index.js new file mode 100644 index 00000000000000..161f1385475abe --- /dev/null +++ b/packages/block-library/src/term-count/index.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { tag 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 } ); diff --git a/packages/block-library/src/term-count/index.php b/packages/block-library/src/term-count/index.php new file mode 100644 index 00000000000000..7e3121ba3f4340 --- /dev/null +++ b/packages/block-library/src/term-count/index.php @@ -0,0 +1,76 @@ +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; + $tag_name = isset( $attributes['tagName'] ) ? $attributes['tagName'] : 'p'; + + if ( isset( $attributes['hasParenthesis'] ) && $attributes['hasParenthesis'] ) { + $term_count = sprintf( + '(%d)', + $term_count + ); + } + + $classes = array(); + if ( isset( $attributes['textAlign'] ) ) { + $classes[] = 'has-text-align-' . $attributes['textAlign']; + } + if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) { + $classes[] = 'has-link-color'; + } + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) ); + + return sprintf( + '<%1$s %2$s>%3$s', + $tag_name, + $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' ); diff --git a/packages/block-library/src/term-count/init.js b/packages/block-library/src/term-count/init.js new file mode 100644 index 00000000000000..79f0492c2cb2f8 --- /dev/null +++ b/packages/block-library/src/term-count/init.js @@ -0,0 +1,6 @@ +/** + * Internal dependencies + */ +import { init } from './'; + +export default init(); diff --git a/packages/block-library/src/term-count/save.js b/packages/block-library/src/term-count/save.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/block-library/src/term-count/style.scss b/packages/block-library/src/term-count/style.scss new file mode 100644 index 00000000000000..ab992d5e1b94bc --- /dev/null +++ b/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; +} diff --git a/packages/block-library/src/term-count/use-term-count.js b/packages/block-library/src/term-count/use-term-count.js new file mode 100644 index 00000000000000..959d9b51d0b4e2 --- /dev/null +++ b/packages/block-library/src/term-count/use-term-count.js @@ -0,0 +1,101 @@ +/** + * WordPress dependencies + */ +import { store as coreStore, useEntityProp } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; + +/** + * Hook to fetch term count based on context or fallback to template parsing. + * + * This hook prioritizes context-provided termId and taxonomy, but falls back to + * template-based detection when no context is available. + * + * @param {string|number} termId The term ID from context + * @param {string} taxonomy The taxonomy name from context + */ +export function useTermCount( termId, taxonomy ) { + const [ count ] = useEntityProp( 'taxonomy', taxonomy, 'count', termId ); + + // Fallback approach: Parse template slug when no context is available. + const templateBasedData = useTemplateBasedTermData(); + + const hasContext = Boolean( termId && taxonomy ); + + return { + hasContext, + termCount: hasContext ? count || '' : templateBasedData, + }; +} + +/** + * Fallback hook to fetch term data from template context (backward compatibility). + * This maintains the same logic as the original implementation for cases where + * no termId/taxonomy context is provided. + */ +function useTemplateBasedTermData() { + const templateSlug = useSelect( ( select ) => { + // Access core/editor by string to avoid @wordpress/editor dependency. + // eslint-disable-next-line @wordpress/data-no-store-string-literals + const { getCurrentPostId, getCurrentPostType, getCurrentTemplateId } = + select( 'core/editor' ); + const currentPostType = getCurrentPostType(); + const templateId = + getCurrentTemplateId() || + ( currentPostType === 'wp_template' ? getCurrentPostId() : null ); + + return templateId + ? select( coreStore ).getEditedEntityRecord( + 'postType', + 'wp_template', + templateId + )?.slug + : null; + }, [] ); + + const taxonomyMatches = templateSlug?.match( + /^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/ + ); + + let taxonomy; + let termSlug; + + if ( taxonomyMatches ) { + // If it's for all taxonomies of a type (e.g., category, tag). + if ( taxonomyMatches[ 1 ] ) { + taxonomy = taxonomyMatches[ 2 ] + ? taxonomyMatches[ 2 ] + : taxonomyMatches[ 1 ]; + } + // If it's for a specific term (e.g., category-news, tag-featured). + else if ( taxonomyMatches[ 3 ] ) { + taxonomy = taxonomyMatches[ 6 ] + ? taxonomyMatches[ 6 ] + : taxonomyMatches[ 4 ]; + termSlug = taxonomyMatches[ 7 ]; + } + + taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy; + } + + return useSelect( + ( select ) => { + if ( ! taxonomy || ! termSlug ) { + return ''; + } + + const { getEntityRecords } = select( coreStore ); + + const termRecords = getEntityRecords( 'taxonomy', taxonomy, { + slug: termSlug, + per_page: 1, + } ); + + if ( termRecords && termRecords[ 0 ] ) { + return termRecords[ 0 ].count || ''; + } + + return ''; + }, + [ taxonomy, termSlug ] + ); +} From 215d4605c3b0653ae01b3b6d2e668ecbb08caf9d Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 08:20:44 -0500 Subject: [PATCH 02/22] register term count block --- lib/blocks.php | 1 + packages/block-library/src/index.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/lib/blocks.php b/lib/blocks.php index 236011b03abd0c..ca39b2e55bf4a9 100644 --- a/lib/blocks.php +++ b/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', diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index e56c6c6b00d32c..ef0b1b2ffde21c 100644 --- a/packages/block-library/src/index.js +++ b/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, From 11f02ab6a819ee56a692bac71bf7097a97d73b66 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 08:44:27 -0500 Subject: [PATCH 03/22] remove tagName attribute, count alone doesn't make sense as a heading --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/term-count/block.json | 4 ---- packages/block-library/src/term-count/edit.js | 20 ++----------------- 3 files changed, 3 insertions(+), 23 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 96076c9d32305b..a3d7e49241a6ff 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -990,7 +990,7 @@ Displays the count of a taxonomy term. ([Source](https://github.com/WordPress/gu - **Experimental:** true - **Category:** theme - **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** hasParenthesis, tagName, textAlign +- **Attributes:** hasParenthesis, textAlign ## Term Description diff --git a/packages/block-library/src/term-count/block.json b/packages/block-library/src/term-count/block.json index 5301be435d0b08..689644730c8825 100644 --- a/packages/block-library/src/term-count/block.json +++ b/packages/block-library/src/term-count/block.json @@ -12,10 +12,6 @@ "textAlign": { "type": "string" }, - "tagName": { - "type": "string", - "default": "p" - }, "hasParenthesis": { "type": "boolean", "default": true diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index ca766c176416e1..b5f0addf70cb03 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -12,7 +12,6 @@ import { BlockControls, AlignmentControl, InspectorControls, - HeadingLevelDropdown, } from '@wordpress/block-editor'; import { ToggleControl, @@ -31,7 +30,7 @@ export default function TermCountEdit( { setAttributes, context: { termId, taxonomy }, } ) { - const { textAlign, tagName = 'p', hasParenthesis } = attributes; + const { textAlign, hasParenthesis } = attributes; const term = useTermCount( termId, taxonomy ); const termCount = term?.termCount || 0; @@ -44,8 +43,6 @@ export default function TermCountEdit( { const dropdownMenuProps = useToolsPanelDropdownMenuProps(); - const TagName = tagName; - let termCountDisplay = termCount; if ( hasParenthesis ) { termCountDisplay = sprintf( @@ -58,19 +55,6 @@ export default function TermCountEdit( { return ( <> - { - setAttributes( { - tagName: newLevel === 0 ? 'p' : `h${ newLevel }`, - } ); - } } - /> { @@ -109,7 +93,7 @@ export default function TermCountEdit( { - { termCountDisplay } +
{ termCountDisplay }
); } From 991eb687a546a1fcf5242b274c0a2d251e583030 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 09:54:16 -0500 Subject: [PATCH 04/22] remove parens inspector controls in favor of block controls, add icons --- packages/block-library/src/term-count/edit.js | 77 +++++++++---------- .../block-library/src/term-count/icons.js | 30 ++++++++ 2 files changed, 68 insertions(+), 39 deletions(-) create mode 100644 packages/block-library/src/term-count/icons.js diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index b5f0addf70cb03..36629b2b102db0 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -11,19 +11,14 @@ import { useBlockProps, BlockControls, AlignmentControl, - InspectorControls, } from '@wordpress/block-editor'; -import { - ToggleControl, - __experimentalToolsPanel as ToolsPanel, - __experimentalToolsPanelItem as ToolsPanelItem, -} from '@wordpress/components'; +import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components'; /** * Internal dependencies */ -import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; import { useTermCount } from './use-term-count'; +import { bareNumber, numberInParenthesis } from './icons'; export default function TermCountEdit( { attributes, @@ -41,7 +36,35 @@ export default function TermCountEdit( { } ), } ); - const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + const getDisplayTypeIcon = () => { + switch ( hasParenthesis ) { + case true: + return numberInParenthesis; + case false: + return bareNumber; + } + }; + + const displayTypeControls = [ + { + role: 'menuitemradio', + title: __( 'In Parenthesis' ), + isActive: hasParenthesis === true, + icon: numberInParenthesis, + onClick: () => { + setAttributes( { hasParenthesis: true } ); + }, + }, + { + role: 'menuitemradio', + title: __( 'Bare Number' ), + isActive: hasParenthesis === false, + icon: bareNumber, + onClick: () => { + setAttributes( { hasParenthesis: false } ); + }, + }, + ]; let termCountDisplay = termCount; if ( hasParenthesis ) { @@ -55,6 +78,13 @@ export default function TermCountEdit( { return ( <> + + + { @@ -62,37 +92,6 @@ export default function TermCountEdit( { } } /> - - { - setAttributes( { - hasParenthesis: false, - } ); - } } - dropdownMenuProps={ dropdownMenuProps } - > - !! hasParenthesis } - label={ __( 'Make term count a link' ) } - onDeselect={ () => - setAttributes( { hasParenthesis: false } ) - } - isShownByDefault - > - - setAttributes( { - hasParenthesis: ! hasParenthesis, - } ) - } - checked={ hasParenthesis } - /> - - -
{ termCountDisplay }
); diff --git a/packages/block-library/src/term-count/icons.js b/packages/block-library/src/term-count/icons.js new file mode 100644 index 00000000000000..2eadd8a80ffd38 --- /dev/null +++ b/packages/block-library/src/term-count/icons.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/components'; + +export const bareNumber = ( + +); + +export const numberInParenthesis = ( + +); From 754d8d6cfbf48f6a882963e4ca67181f1aca5a96 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 09:58:58 -0500 Subject: [PATCH 05/22] refactor based on query-total --- packages/block-library/src/term-count/edit.js | 61 +++++++++++-------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index 36629b2b102db0..19d26710adebd4 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -17,8 +17,8 @@ import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components'; /** * Internal dependencies */ -import { useTermCount } from './use-term-count'; import { bareNumber, numberInParenthesis } from './icons'; +import { useTermCount } from './use-term-count'; export default function TermCountEdit( { attributes, @@ -66,33 +66,40 @@ export default function TermCountEdit( { }, ]; - let termCountDisplay = termCount; - if ( hasParenthesis ) { - termCountDisplay = sprintf( - /* translators: %d: term count number. */ - __( '(%d)' ), - termCount - ); - } + const controls = ( + + + + + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + + ); + + // Render output based on the selected display type. + const renderDisplay = () => { + if ( hasParenthesis ) { + return sprintf( + /* translators: %d: term count number. */ + __( '(%d)' ), + termCount + ); + } + return termCount; + }; return ( - <> - - - - - { - setAttributes( { textAlign: nextAlign } ); - } } - /> - -
{ termCountDisplay }
- +
+ { controls } + { renderDisplay() } +
); } From d468fad48cd5e367cfd70db4acfac555fb45bc51 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 12:42:07 -0500 Subject: [PATCH 06/22] remove vestigial tag name --- packages/block-library/src/term-count/index.php | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/term-count/index.php b/packages/block-library/src/term-count/index.php index 7e3121ba3f4340..a5513ca2260e2a 100644 --- a/packages/block-library/src/term-count/index.php +++ b/packages/block-library/src/term-count/index.php @@ -34,7 +34,6 @@ function render_block_core_term_count( $attributes, $content, $block ) { } $term_count = $term->count; - $tag_name = isset( $attributes['tagName'] ) ? $attributes['tagName'] : 'p'; if ( isset( $attributes['hasParenthesis'] ) && $attributes['hasParenthesis'] ) { $term_count = sprintf( @@ -53,8 +52,7 @@ function render_block_core_term_count( $attributes, $content, $block ) { $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) ); return sprintf( - '<%1$s %2$s>%3$s', - $tag_name, + '
%3$s
', $wrapper_attributes, $term_count ); From ed2e860c26b16b0d4d8b8a95f80726ea60154d3c Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 12:48:39 -0500 Subject: [PATCH 07/22] remove alignment features and vestigial link styles --- docs/reference-guides/core-blocks.md | 4 +-- .../block-library/src/term-count/block.json | 8 +----- packages/block-library/src/term-count/edit.js | 25 +++---------------- .../block-library/src/term-count/index.php | 11 ++------ 4 files changed, 8 insertions(+), 40 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index a3d7e49241a6ff..04e2d694bb57d8 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -989,8 +989,8 @@ Displays the count of a taxonomy term. ([Source](https://github.com/WordPress/gu - **Name:** core/term-count - **Experimental:** true - **Category:** theme -- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** hasParenthesis, textAlign +- **Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (padding), typography (fontSize, lineHeight), ~~html~~ +- **Attributes:** hasParenthesis ## Term Description diff --git a/packages/block-library/src/term-count/block.json b/packages/block-library/src/term-count/block.json index 689644730c8825..be34667dd06bcf 100644 --- a/packages/block-library/src/term-count/block.json +++ b/packages/block-library/src/term-count/block.json @@ -9,24 +9,18 @@ "textdomain": "default", "usesContext": [ "termId", "taxonomy" ], "attributes": { - "textAlign": { - "type": "string" - }, "hasParenthesis": { "type": "boolean", "default": true } }, "supports": { - "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, - "link": true, "__experimentalDefaultControls": { "background": true, - "text": true, - "link": true + "text": true } }, "spacing": { diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index 19d26710adebd4..269572d494f135 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -1,17 +1,8 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { - useBlockProps, - BlockControls, - AlignmentControl, -} from '@wordpress/block-editor'; +import { useBlockProps, BlockControls } from '@wordpress/block-editor'; import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components'; /** @@ -25,16 +16,12 @@ export default function TermCountEdit( { setAttributes, context: { termId, taxonomy }, } ) { - const { textAlign, hasParenthesis } = attributes; + const { hasParenthesis } = attributes; const term = useTermCount( termId, taxonomy ); const termCount = term?.termCount || 0; - const blockProps = useBlockProps( { - classCount: clsx( { - [ `has-text-align-${ textAlign }` ]: textAlign, - } ), - } ); + const blockProps = useBlockProps(); const getDisplayTypeIcon = () => { switch ( hasParenthesis ) { @@ -75,12 +62,6 @@ export default function TermCountEdit( { controls={ displayTypeControls } /> - { - setAttributes( { textAlign: nextAlign } ); - } } - /> ); diff --git a/packages/block-library/src/term-count/index.php b/packages/block-library/src/term-count/index.php index a5513ca2260e2a..3423bbc4522596 100644 --- a/packages/block-library/src/term-count/index.php +++ b/packages/block-library/src/term-count/index.php @@ -42,17 +42,10 @@ function render_block_core_term_count( $attributes, $content, $block ) { ); } - $classes = array(); - if ( isset( $attributes['textAlign'] ) ) { - $classes[] = 'has-text-align-' . $attributes['textAlign']; - } - if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) { - $classes[] = 'has-link-color'; - } - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) ); + $wrapper_attributes = get_block_wrapper_attributes(); return sprintf( - '
%3$s
', + '
%2$s
', $wrapper_attributes, $term_count ); From 07f23c792b97860dde178d5761d08cfd1ea88e02 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 12:55:47 -0500 Subject: [PATCH 08/22] refactor to simplify Co-authored by: t-hamano --- packages/block-library/src/term-count/edit.js | 63 +++++++------------ .../block-library/src/term-count/icons.js | 4 -- 2 files changed, 24 insertions(+), 43 deletions(-) diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index 269572d494f135..b1d3d58b17dfc1 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -23,20 +23,11 @@ export default function TermCountEdit( { const blockProps = useBlockProps(); - const getDisplayTypeIcon = () => { - switch ( hasParenthesis ) { - case true: - return numberInParenthesis; - case false: - return bareNumber; - } - }; - const displayTypeControls = [ { role: 'menuitemradio', title: __( 'In Parenthesis' ), - isActive: hasParenthesis === true, + isActive: hasParenthesis, icon: numberInParenthesis, onClick: () => { setAttributes( { hasParenthesis: true } ); @@ -45,7 +36,7 @@ export default function TermCountEdit( { { role: 'menuitemradio', title: __( 'Bare Number' ), - isActive: hasParenthesis === false, + isActive: ! hasParenthesis, icon: bareNumber, onClick: () => { setAttributes( { hasParenthesis: false } ); @@ -53,34 +44,28 @@ export default function TermCountEdit( { }, ]; - const controls = ( - - - - - - ); - - // Render output based on the selected display type. - const renderDisplay = () => { - if ( hasParenthesis ) { - return sprintf( - /* translators: %d: term count number. */ - __( '(%d)' ), - termCount - ); - } - return termCount; - }; - return ( -
- { controls } - { renderDisplay() } -
+ <> + + + + + +
+ { hasParenthesis + ? sprintf( + /* translators: %d: term count number. */ + __( '(%d)' ), + termCount + ) + : termCount } +
+ ); } diff --git a/packages/block-library/src/term-count/icons.js b/packages/block-library/src/term-count/icons.js index 2eadd8a80ffd38..83edc2f2b6c2de 100644 --- a/packages/block-library/src/term-count/icons.js +++ b/packages/block-library/src/term-count/icons.js @@ -7,8 +7,6 @@ export const bareNumber = (
- { hasParenthesis - ? sprintf( - /* translators: %d: term count number. */ - __( '(%d)' ), - termCount - ) - : termCount } + { formatTermCount( termCount, bracketType ) }
); diff --git a/packages/block-library/src/term-count/icons.js b/packages/block-library/src/term-count/icons.js index 83edc2f2b6c2de..0294b785d74437 100644 --- a/packages/block-library/src/term-count/icons.js +++ b/packages/block-library/src/term-count/icons.js @@ -24,3 +24,59 @@ export const numberInParenthesis = ( ); + +export const numberInSquareBrackets = ( + +); + +export const numberInCurlyBrackets = ( + +); + +export const numberInAngleBrackets = ( + +); + +/** + * Helper function to get the appropriate icon for a bracket type. + * + * @param {string} bracketType Bracket type. + * @return {JSX.Element} Icon element. + */ +export function getBracketIcon( bracketType ) { + switch ( bracketType ) { + case 'none': + return bareNumber; + case 'round': + return numberInParenthesis; + case 'square': + return numberInSquareBrackets; + case 'curly': + return numberInCurlyBrackets; + case 'angle': + return numberInAngleBrackets; + default: + return bareNumber; + } +} diff --git a/packages/block-library/src/term-count/index.php b/packages/block-library/src/term-count/index.php index 3423bbc4522596..6ab1de44bfe21b 100644 --- a/packages/block-library/src/term-count/index.php +++ b/packages/block-library/src/term-count/index.php @@ -35,11 +35,28 @@ function render_block_core_term_count( $attributes, $content, $block ) { $term_count = $term->count; - if ( isset( $attributes['hasParenthesis'] ) && $attributes['hasParenthesis'] ) { - $term_count = sprintf( - '(%d)', - $term_count - ); + // Format the term count based on bracket type. + $bracket_type = isset( $attributes['bracketType'] ) ? $attributes['bracketType'] : 'round'; + + switch ( $bracket_type ) { + 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(); From 338afdb7306a44cc997623bcd3dbd70e8909d07e Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 21:39:55 -0500 Subject: [PATCH 10/22] sentence case Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- packages/block-library/src/term-count/edit.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index 6a8b3f81504ca4..4771714b402995 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -14,22 +14,22 @@ import { useTermCount } from './use-term-count'; const BRACKET_TYPES = { none: { label: __( 'No Brackets' ) }, round: { - label: __( 'Round Brackets' ), + label: __( 'Round brackets' ), before: '(', after: ')', }, square: { - label: __( 'Square Brackets' ), + label: __( 'Square brackets' ), before: '[', after: ']', }, curly: { - label: __( 'Curly Brackets' ), + label: __( 'Curly brackets' ), before: '{', after: '}', }, angle: { - label: __( 'Angle Brackets' ), + label: __( 'Angle brackets' ), before: '<', after: '>', }, From a6704137f31a6897d0298a6b7ca241c83386e12b Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 9 Oct 2025 21:41:38 -0500 Subject: [PATCH 11/22] sentence case --- packages/block-library/src/term-count/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index 4771714b402995..e2de10e9766580 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -12,7 +12,7 @@ import { getBracketIcon } from './icons'; import { useTermCount } from './use-term-count'; const BRACKET_TYPES = { - none: { label: __( 'No Brackets' ) }, + none: { label: __( 'No brackets' ) }, round: { label: __( 'Round brackets' ), before: '(', From 7b67d5a54fd6ec01bca68eb2211b29b66d8a8bd4 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Fri, 10 Oct 2025 07:45:17 -0500 Subject: [PATCH 12/22] tweak description --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/term-count/block.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index fe7b73366b171c..c2e28f8de57f0a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -984,7 +984,7 @@ Edit the different global regions of your site, like the header, footer, sidebar ## Term Count -Displays the count of a taxonomy term. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/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 - **Experimental:** true diff --git a/packages/block-library/src/term-count/block.json b/packages/block-library/src/term-count/block.json index 96b47c8bc74bf1..d9147dd8ff60dc 100644 --- a/packages/block-library/src/term-count/block.json +++ b/packages/block-library/src/term-count/block.json @@ -5,7 +5,7 @@ "name": "core/term-count", "title": "Term Count", "category": "theme", - "description": "Displays the count of a taxonomy term.", + "description": "Displays the post count of a taxonomy term.", "textdomain": "default", "usesContext": [ "termId", "taxonomy" ], "attributes": { From 2d91285592b28a4f0c6992d921623acfe3a5f729 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Fri, 10 Oct 2025 07:46:57 -0500 Subject: [PATCH 13/22] remove unnecessary component --- packages/block-library/src/term-count/edit.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index e2de10e9766580..92ad766a32fee8 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useBlockProps, BlockControls } from '@wordpress/block-editor'; -import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components'; +import { ToolbarDropdownMenu } from '@wordpress/components'; /** * Internal dependencies @@ -67,13 +67,11 @@ export default function TermCountEdit( { return ( <> - - - +
{ formatTermCount( termCount, bracketType ) } From 1d66187a8b65f4f5dc6a68ecac94e9ed035538c4 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Fri, 10 Oct 2025 07:50:13 -0500 Subject: [PATCH 14/22] cleanup --- packages/block-library/src/term-count/index.php | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/term-count/index.php b/packages/block-library/src/term-count/index.php index 6ab1de44bfe21b..9794896524eb43 100644 --- a/packages/block-library/src/term-count/index.php +++ b/packages/block-library/src/term-count/index.php @@ -17,8 +17,6 @@ * @return string Returns the count of the current taxonomy term wrapped inside a heading tag. */ function render_block_core_term_count( $attributes, $content, $block ) { - $term_count = ''; - // 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'] ); @@ -36,9 +34,7 @@ function render_block_core_term_count( $attributes, $content, $block ) { $term_count = $term->count; // Format the term count based on bracket type. - $bracket_type = isset( $attributes['bracketType'] ) ? $attributes['bracketType'] : 'round'; - - switch ( $bracket_type ) { + switch ( $attributes['bracketType'] ) { case 'none': // No formatting needed. break; From 4e7aa0e3a46703d5d262816103983df4b1357636 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Fri, 10 Oct 2025 07:55:21 -0500 Subject: [PATCH 15/22] add icons to BRACKET_TYPES --- packages/block-library/src/term-count/edit.js | 20 ++++++++++++---- .../block-library/src/term-count/icons.js | 23 ------------------- 2 files changed, 15 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/term-count/edit.js b/packages/block-library/src/term-count/edit.js index 92ad766a32fee8..19d90d630d2165 100644 --- a/packages/block-library/src/term-count/edit.js +++ b/packages/block-library/src/term-count/edit.js @@ -8,28 +8,38 @@ import { ToolbarDropdownMenu } from '@wordpress/components'; /** * Internal dependencies */ -import { getBracketIcon } from './icons'; +import { + bareNumber, + numberInParenthesis, + numberInSquareBrackets, + numberInCurlyBrackets, + numberInAngleBrackets, +} from './icons'; import { useTermCount } from './use-term-count'; const BRACKET_TYPES = { - none: { label: __( 'No brackets' ) }, + 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: '>', }, @@ -48,11 +58,11 @@ export default function TermCountEdit( { const blockProps = useBlockProps(); const bracketTypeControls = Object.entries( BRACKET_TYPES ).map( - ( [ type, { label } ] ) => ( { + ( [ type, { label, icon } ] ) => ( { role: 'menuitemradio', title: label, isActive: bracketType === type, - icon: getBracketIcon( type ), + icon, onClick: () => { setAttributes( { bracketType: type } ); }, @@ -68,7 +78,7 @@ export default function TermCountEdit( { <> diff --git a/packages/block-library/src/term-count/icons.js b/packages/block-library/src/term-count/icons.js index 0294b785d74437..aec9ea2f972099 100644 --- a/packages/block-library/src/term-count/icons.js +++ b/packages/block-library/src/term-count/icons.js @@ -57,26 +57,3 @@ export const numberInAngleBrackets = ( ); - -/** - * Helper function to get the appropriate icon for a bracket type. - * - * @param {string} bracketType Bracket type. - * @return {JSX.Element} Icon element. - */ -export function getBracketIcon( bracketType ) { - switch ( bracketType ) { - case 'none': - return bareNumber; - case 'round': - return numberInParenthesis; - case 'square': - return numberInSquareBrackets; - case 'curly': - return numberInCurlyBrackets; - case 'angle': - return numberInAngleBrackets; - default: - return bareNumber; - } -} From 32e8c9ccb352856815db02d9fc97fcbf76553730 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Fri, 10 Oct 2025 08:13:59 -0500 Subject: [PATCH 16/22] import term count block styles --- packages/block-library/src/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index feb673ae47a477..3e40e89b8e0083 100644 --- a/packages/block-library/src/style.scss +++ b/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"; From 64ce3ed63c6717632de33ebf4025ac97186dfcbd Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Fri, 10 Oct 2025 08:15:10 -0500 Subject: [PATCH 17/22] remove experimental flag --- docs/reference-guides/core-blocks.md | 1 - packages/block-library/src/term-count/block.json | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index c2e28f8de57f0a..d722604edda4cf 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -987,7 +987,6 @@ Edit the different global regions of your site, like the header, footer, sidebar 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 -- **Experimental:** true - **Category:** theme - **Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** bracketType diff --git a/packages/block-library/src/term-count/block.json b/packages/block-library/src/term-count/block.json index d9147dd8ff60dc..c4de1e61f8d1f5 100644 --- a/packages/block-library/src/term-count/block.json +++ b/packages/block-library/src/term-count/block.json @@ -1,7 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, - "__experimental": true, "name": "core/term-count", "title": "Term Count", "category": "theme", From d63dc3c6f3d7d765b457b66ba3580bfa03996373 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Fri, 10 Oct 2025 08:56:01 -0500 Subject: [PATCH 18/22] remove redundant svg attributes --- .../block-library/src/term-count/icons.js | 35 +++---------------- 1 file changed, 5 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/term-count/icons.js b/packages/block-library/src/term-count/icons.js index aec9ea2f972099..877acfe90e11b0 100644 --- a/packages/block-library/src/term-count/icons.js +++ b/packages/block-library/src/term-count/icons.js @@ -4,56 +4,31 @@ import { SVG, Path } from '@wordpress/components'; export const bareNumber = ( -