From 7f9c3402f8bbfd0895c688371f53bd66797c1a90 Mon Sep 17 00:00:00 2001 From: Bernie Reiter <96308+ockham@users.noreply.github.com> Date: Tue, 17 Sep 2024 22:38:09 +0200 Subject: [PATCH] Categories List block: Add dropdown for taxonomies (#65272) Add a new `taxonomy` attribute to the Categories List block, and a dropdown to the block inspector to set that attribute. For backwards compatibility, the attribute defaults to `category`. Furthermore, rename the block to "Terms List". Unlinked contributors: MikeB8s, sophiegyo. Co-authored-by: ockham Co-authored-by: fabiankaegy Co-authored-by: gziolo Co-authored-by: Julianoe Co-authored-by: celloexpressions Co-authored-by: skorasaurus Co-authored-by: ms-studio Co-authored-by: ndiego Co-authored-by: justintadlock Co-authored-by: swissspidy Co-authored-by: joedolson Co-authored-by: coreyworrell Co-authored-by: jasmussen --- docs/reference-guides/core-blocks.md | 6 +- .../block-library/src/categories/block.json | 9 +- packages/block-library/src/categories/edit.js | 97 +++++++++++++------ .../block-library/src/categories/index.php | 30 ++++-- .../fixtures/blocks/core__categories.json | 1 + 5 files changed, 99 insertions(+), 44 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 0e0de9d4f8a50..66f713b3aa40f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -72,14 +72,14 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb - **Supports:** align, color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight) - **Attributes:** month, year -## Categories List +## Terms List -Display a list of all categories. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories)) +Display a list of all terms of a given taxonomy. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories)) - **Name:** core/categories - **Category:** widgets - **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts +- **Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts, taxonomy ## Code diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json index 460fbef92fdab..bfd8461f8eda4 100644 --- a/packages/block-library/src/categories/block.json +++ b/packages/block-library/src/categories/block.json @@ -2,11 +2,16 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "core/categories", - "title": "Categories List", + "title": "Terms List", "category": "widgets", - "description": "Display a list of all categories.", + "description": "Display a list of all terms of a given taxonomy.", + "keywords": [ "categories" ], "textdomain": "default", "attributes": { + "taxonomy": { + "type": "string", + "default": "category" + }, "displayAsDropdown": { "type": "boolean", "default": false diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js index 48d505eeb75ae..ccbf919433940 100644 --- a/packages/block-library/src/categories/edit.js +++ b/packages/block-library/src/categories/edit.js @@ -9,6 +9,7 @@ import clsx from 'clsx'; import { PanelBody, Placeholder, + SelectControl, Spinner, ToggleControl, VisuallyHidden, @@ -20,7 +21,7 @@ import { RichText, } from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { pin } from '@wordpress/icons'; import { useEntityRecords } from '@wordpress/core-data'; @@ -33,19 +34,33 @@ export default function CategoriesEdit( { showEmpty, label, showLabel, + taxonomy: taxonomySlug, }, setAttributes, className, } ) { const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' ); + + const { records: allTaxonomies, isResolvingTaxonomies } = useEntityRecords( + 'root', + 'taxonomy' + ); + + const taxonomies = allTaxonomies?.filter( ( t ) => t.visibility.public ); + + const taxonomy = taxonomies?.find( ( t ) => t.slug === taxonomySlug ); + + const isHierarchicalTaxonomy = + ! isResolvingTaxonomies && taxonomy?.hierarchical; + const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' }; - if ( showOnlyTopLevel ) { + if ( isHierarchicalTaxonomy && showOnlyTopLevel ) { query.parent = 0; } const { records: categories, isResolving } = useEntityRecords( 'taxonomy', - 'category', + taxonomySlug, query ); @@ -66,7 +81,7 @@ export default function CategoriesEdit( { ! name ? __( '(Untitled)' ) : decodeEntities( name ).trim(); const renderCategoryList = () => { - const parentId = showHierarchy ? 0 : null; + const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null; const categoriesList = getCategoriesList( parentId ); return categoriesList.map( ( category ) => renderCategoryListItem( category ) @@ -82,19 +97,21 @@ export default function CategoriesEdit( { { renderCategoryName( name ) } { showPostCounts && ` (${ count })` } - { showHierarchy && !! childCategories.length && ( -
    - { childCategories.map( ( childCategory ) => - renderCategoryListItem( childCategory ) - ) } -
- ) } + { isHierarchicalTaxonomy && + showHierarchy && + !! childCategories.length && ( +
    + { childCategories.map( ( childCategory ) => + renderCategoryListItem( childCategory ) + ) } +
+ ) } ); }; const renderCategoryDropdown = () => { - const parentId = showHierarchy ? 0 : null; + const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null; const categoriesList = getCategoriesList( parentId ); return ( <> @@ -102,7 +119,7 @@ export default function CategoriesEdit( { @@ -111,11 +128,17 @@ export default function CategoriesEdit( { /> ) : ( - { label ? label : __( 'Categories' ) } + { label ? label : taxonomy.name } ) }