@wordpress/block-library 9.32.0 → 9.33.1-next.b8c8708f3.0

package/src/term-name/use-term-name.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Hook to fetch term name 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 useTermName( termId, taxonomy ) {
+	// Get term from context if available.
+	const contextBasedTerm = useSelect(
+		( select ) => {
+			if ( ! termId || ! taxonomy ) {
+				return null;
+			}
+			return select( coreStore ).getEntityRecord(
+				'taxonomy',
+				taxonomy,
+				termId
+			);
+		},
+		[ termId, taxonomy ]
+	);
+
+	// Fallback approach: Parse template slug when no context is available.
+	const templateBasedTerm = useTemplateBasedTermData();
+	const hasContext = Boolean( termId && taxonomy );
+
+	return {
+		hasContext,
+		term: hasContext ? contextBasedTerm : templateBasedTerm,
+	};
+}
+
+/**
+ * Fallback hook to fetch term data from template context.
+ * Parses the template slug to determine if we're on a specific term archive.
+ */
+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 a specific term (e.g., category-news, tag-featured).
+		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 null;
+			}
+
+			const { getEntityRecords } = select( coreStore );
+
+			const termRecords = getEntityRecords( 'taxonomy', taxonomy, {
+				slug: termSlug,
+				per_page: 1,
+			} );
+
+			if ( termRecords && termRecords[ 0 ] ) {
+				return termRecords[ 0 ];
+			}
+
+			return null;
+		},
+		[ taxonomy, termSlug ]
+	);
+}

package/src/term-template/block.json

@@ -1,30 +1,18 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": true,
 	"name": "core/term-template",
 	"title": "Term Template",
 	"category": "theme",
 	"ancestor": [ "core/terms-query" ],
 	"description": "Contains the block elements used to render a taxonomy term, like the name, description, and more.",
 	"textdomain": "default",
-	"usesContext": [ "termQuery", "termsToShow" ],
-	"attributes": {
-		"namespace": {
-			"type": "string"
-		}
-	},
+	"usesContext": [ "termQuery" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
 		"align": [ "wide", "full" ],
-		"layout": {
-			"allowSwitching": true,
-			"allowEditing": true,
-			"default": {
-				"type": "flex"
-			}
-		},
+		"layout": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -69,5 +57,5 @@
 		}
 	},
 	"style": "wp-block-term-template",
-	"variations": "file:./variations.js"
+	"editorStyle": "wp-block-term-template-editor"
 }

package/src/term-template/edit.js

@@ -6,78 +6,22 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { ToolbarGroup } from '@wordpress/components';
+import { list, grid } from '@wordpress/icons';
 import { memo, useMemo, useState } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { layout } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
 import {
+	BlockControls,
 	BlockContextProvider,
 	__experimentalUseBlockPreview as useBlockPreview,
-	__experimentalBlockVariationPicker as BlockVariationPicker,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEntityRecords } from '@wordpress/core-data';
-import {
-	createBlocksFromInnerBlocksTemplate,
-	store as blocksStore,
-} from '@wordpress/blocks';
 
-const TEMPLATE = [
-	[
-		'core/group',
-		{
-			layout: {
-				type: 'flex',
-				orientation: 'horizontal',
-			},
-			style: {
-				spacing: {
-					blockGap: '0.5rem',
-				},
-			},
-			metadata: {
-				name: __( 'Term Name with Count' ),
-			},
-		},
-		[
-			[
-				'core/paragraph',
-				{
-					metadata: {
-						name: __( 'Term Name' ),
-						bindings: {
-							content: {
-								source: 'core/term-data',
-								args: {
-									key: 'name',
-								},
-							},
-						},
-					},
-				},
-			],
-			[
-				'core/paragraph',
-				{
-					placeholder: __( '(count)' ),
-					metadata: {
-						name: __( 'Term Count' ),
-						bindings: {
-							content: {
-								source: 'core/term-data',
-								args: {
-									key: 'count',
-								},
-							},
-						},
-					},
-				},
-			],
-		],
-	],
-];
+const TEMPLATE = [ [ 'core/term-name' ] ];
 
 function TermTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
@@ -125,271 +69,148 @@ function TermTemplateBlockPreview( {
 // Prevent re-rendering of the block preview when the terms data changes.
 const MemoizedTermTemplateBlockPreview = memo( TermTemplateBlockPreview );
 
-/**
- * Builds a hierarchical tree structure from flat terms array.
- *
- * @param {Array} terms Array of term objects.
- * @return {Array} Tree structure with parent/child relationships.
- */
-function buildTermsTree( terms ) {
-	const termsById = {};
-	const rootTerms = [];
-
-	terms.forEach( ( term ) => {
-		termsById[ term.id ] = {
-			term,
-			children: [],
-		};
-	} );
-
-	terms.forEach( ( term ) => {
-		if ( term.parent && termsById[ term.parent ] ) {
-			termsById[ term.parent ].children.push( termsById[ term.id ] );
-		} else {
-			rootTerms.push( termsById[ term.id ] );
-		}
-	} );
-
-	return rootTerms;
-}
-
-/**
- * Renders a single term node and its children recursively.
- *
- * @param {Object}   termNode   Term node with term object and children.
- * @param {Function} renderTerm Function to render individual terms.
- * @return {JSX.Element} Rendered term node with children.
- */
-function renderTermNode( termNode, renderTerm ) {
-	return (
-		<li className="wp-block-term">
-			{ renderTerm( termNode.term ) }
-			{ termNode.children.length > 0 && (
-				<ul>
-					{ termNode.children.map( ( child ) =>
-						renderTermNode( child, renderTerm )
-					) }
-				</ul>
-			) }
-		</li>
-	);
-}
-
-/**
- * Checks if a term is the currently active term.
- *
- * @param {number} termId               The term ID to check.
- * @param {number} activeBlockContextId The currently active block context ID.
- * @param {Array}  blockContexts        Array of block contexts.
- * @return {boolean} True if the term is active, false otherwise.
- */
-function isActiveTerm( termId, activeBlockContextId, blockContexts ) {
-	return termId === ( activeBlockContextId || blockContexts[ 0 ]?.termId );
-}
-
 export default function TermTemplateEdit( {
 	clientId,
+	attributes: { layout },
 	setAttributes,
 	context: {
-		termsToShow,
 		termQuery: {
 			taxonomy,
 			order,
 			orderBy,
 			hideEmpty,
-			hierarchical,
-			perPage = 10,
+			showNested = false,
+			perPage,
+			include,
 		} = {},
 	},
 	__unstableLayoutClassNames,
 } ) {
+	const { type: layoutType, columnCount = 3 } = layout || {};
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 
 	const queryArgs = {
+		hide_empty: hideEmpty,
 		order,
 		orderby: orderBy,
-		hide_empty: hideEmpty,
-		// To preview the data the closest to the frontend, we fetch the largest number of terms
-		// and limit them during rendering. This is because WP_Term_Query fetches data in hierarchical manner,
-		// while in editor we build the hierarchy manually. It also allows us to avoid re-fetching data when max terms changes.
-		per_page: 100,
+		per_page: perPage,
 	};
 
-	const { records: terms, isResolving } = useEntityRecords(
+	// Nested terms are returned by default from REST API as long as parent is not set.
+	// If we want to show nested terms, we must not set parent at all.
+	if ( ! showNested && ! include?.length ) {
+		queryArgs.parent = 0;
+	}
+
+	if ( include?.length ) {
+		queryArgs.include = include;
+		// If we are using `include` update the `order` and `orderby` arguments to preserve the order.
+		queryArgs.orderby = 'include';
+		queryArgs.order = 'asc';
+	}
+
+	const { records: terms } = useEntityRecords(
 		'taxonomy',
 		taxonomy,
 		queryArgs
 	);
 
-	const filteredTerms = useMemo( () => {
-		if ( ! terms ) {
-			return [];
-		}
-		if ( termsToShow === 'top-level' ) {
-			return terms.filter( ( term ) => ! term.parent );
-		}
-		if ( termsToShow === 'subterms' ) {
-			return terms.filter( ( term ) => term.parent );
-		}
-		return terms;
-	}, [ terms, termsToShow ] );
-
-	const { blocks, variations, defaultVariation } = useSelect(
-		( select ) => {
-			const { getBlocks } = select( blockEditorStore );
-			const { getBlockVariations, getDefaultBlockVariation } =
-				select( blocksStore );
-
-			return {
-				blocks: getBlocks( clientId ),
-				variations: getBlockVariations( 'core/term-template', 'block' ),
-				defaultVariation: getDefaultBlockVariation(
-					'core/term-template',
-					'block'
-				),
-			};
-		},
+	const blocks = useSelect(
+		( select ) => select( blockEditorStore ).getBlocks( clientId ),
 		[ clientId ]
 	);
-
 	const blockProps = useBlockProps( {
 		className: __unstableLayoutClassNames,
 	} );
-
 	const blockContexts = useMemo(
 		() =>
-			filteredTerms?.map( ( term ) => ( {
+			terms?.map( ( term ) => ( {
 				taxonomy,
 				termId: term.id,
 				classList: `term-${ term.id }`,
 				termData: term,
 			} ) ),
-		[ filteredTerms, taxonomy ]
+		[ terms, taxonomy ]
 	);
 
-	// Show variation picker if no blocks exist.
-	if ( ! blocks?.length ) {
-		return (
-			<div { ...blockProps }>
-				<BlockVariationPicker
-					icon={ layout }
-					label={ __( 'Term Template' ) }
-					variations={ variations }
-					instructions={ __(
-						'Choose a layout for displaying terms:'
-					) }
-					onSelect={ ( nextVariation = defaultVariation ) => {
-						if ( nextVariation.attributes ) {
-							setAttributes( nextVariation.attributes );
-						}
-						if ( nextVariation.innerBlocks ) {
-							replaceInnerBlocks(
-								clientId,
-								createBlocksFromInnerBlocksTemplate(
-									nextVariation.innerBlocks
-								),
-								true
-							);
-						}
-					} }
-					allowSkip
-				/>
-			</div>
-		);
-	}
-
-	if ( isResolving ) {
+	if ( ! terms ) {
 		return (
 			<ul { ...blockProps }>
 				<li className="wp-block-term term-loading">
 					<div className="term-loading-placeholder" />
 				</li>
-				<li className="wp-block-term term-loading">
-					<div className="term-loading-placeholder" />
-				</li>
-				<li className="wp-block-term term-loading">
-					<div className="term-loading-placeholder" />
-				</li>
 			</ul>
 		);
 	}
 
-	if ( ! filteredTerms?.length ) {
+	if ( ! terms.length ) {
 		return <p { ...blockProps }> { __( 'No terms found.' ) }</p>;
 	}
 
-	const renderTerm = ( term ) => {
-		const blockContext = {
-			taxonomy,
-			termId: term.id,
-			classList: `term-${ term.id }`,
-			termData: term,
-		};
-
-		return (
-			<BlockContextProvider key={ term.id } value={ blockContext }>
-				{ isActiveTerm(
-					term.id,
-					activeBlockContextId,
-					blockContexts
-				) ? (
-					<TermTemplateInnerBlocks
-						classList={ blockContext.classList }
-					/>
-				) : null }
-				<MemoizedTermTemplateBlockPreview
-					blocks={ blocks }
-					blockContextId={ term.id }
-					classList={ blockContext.classList }
-					setActiveBlockContextId={ setActiveBlockContextId }
-					isHidden={ isActiveTerm(
-						term.id,
-						activeBlockContextId,
-						blockContexts
-					) }
-				/>
-			</BlockContextProvider>
-		);
-	};
+	const setDisplayLayout = ( newDisplayLayout ) =>
+		setAttributes( ( prevAttributes ) => ( {
+			layout: { ...prevAttributes.layout, ...newDisplayLayout },
+		} ) );
 
 	return (
 		<>
+			<BlockControls>
+				<ToolbarGroup
+					controls={ [
+						{
+							icon: list,
+							title: _x(
+								'List view',
+								'Term template block display setting'
+							),
+							onClick: () =>
+								setDisplayLayout( { type: 'default' } ),
+							isActive:
+								layoutType === 'default' ||
+								layoutType === 'constrained',
+						},
+						{
+							icon: grid,
+							title: _x(
+								'Grid view',
+								'Term template block display setting'
+							),
+							onClick: () =>
+								setDisplayLayout( {
+									type: 'grid',
+									columnCount,
+								} ),
+							isActive: layoutType === 'grid',
+						},
+					] }
+				/>
+			</BlockControls>
 			<ul { ...blockProps }>
-				{ hierarchical
-					? buildTermsTree( filteredTerms ).map( ( termNode ) =>
-							renderTermNode( termNode, renderTerm )
-					  )
-					: blockContexts &&
-					  blockContexts
-							.slice( 0, perPage )
-							.map( ( blockContext ) => (
-								<BlockContextProvider
-									key={ blockContext.termId }
-									value={ blockContext }
-								>
-									{ blockContext.termId ===
-									( activeBlockContextId ||
-										blockContexts[ 0 ]?.termId ) ? (
-										<TermTemplateInnerBlocks
-											classList={ blockContext.classList }
-										/>
-									) : null }
-									<MemoizedTermTemplateBlockPreview
-										blocks={ blocks }
-										blockContextId={ blockContext.termId }
-										classList={ blockContext.classList }
-										setActiveBlockContextId={
-											setActiveBlockContextId
-										}
-										isHidden={
-											blockContext.termId ===
-											( activeBlockContextId ||
-												blockContexts[ 0 ]?.termId )
-										}
-									/>
-								</BlockContextProvider>
-							) ) }
+				{ blockContexts?.map( ( blockContext ) => (
+					<BlockContextProvider
+						key={ blockContext.termId }
+						value={ blockContext }
+					>
+						{ blockContext.termId ===
+						( activeBlockContextId ||
+							blockContexts[ 0 ]?.termId ) ? (
+							<TermTemplateInnerBlocks
+								classList={ blockContext.classList }
+							/>
+						) : null }
+						<MemoizedTermTemplateBlockPreview
+							blocks={ blocks }
+							blockContextId={ blockContext.termId }
+							classList={ blockContext.classList }
+							setActiveBlockContextId={ setActiveBlockContextId }
+							isHidden={
+								blockContext.termId ===
+								( activeBlockContextId ||
+									blockContexts[ 0 ]?.termId )
+							}
+						/>
+					</BlockContextProvider>
+				) ) }
 			</ul>
 		</>
 	);

package/src/term-template/editor.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/colors" as *;
+
 .wp-block-term-template {
 	.term-loading {
 		.term-loading-placeholder {

package/src/term-template/index.js

@@ -10,14 +10,12 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
-import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	icon,
-	variations,
 	edit,
 	save,
 	example: {},