Add Term Name block

docs/reference-guides/core-blocks.md

@@ -991,6 +991,15 @@ Display the description of categories, tags and custom taxonomies when viewing a
 -	**Supports:** align (full, wide), color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
+## Term Name
+
+Displays the name of a taxonomy term. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-name))
+
+-	**Name:** core/term-name
+-	**Category:** theme
+-	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** isLink, tagName, textAlign
+
 ## Term Template
 
 Contains the block elements used to render a taxonomy term, like the name, description, and more. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-template))

lib/blocks.php

@@ -125,6 +125,7 @@ function gutenberg_reregister_core_block_types() {
 				'tag-cloud.php'                    => 'core/tag-cloud',
 				'template-part.php'                => 'core/template-part',
 				'term-description.php'             => 'core/term-description',
+				'term-name.php'                    => 'core/term-name',
 				'terms-query.php'                  => 'core/terms-query',
 				'term-template.php'                => 'core/term-template',
 				'video.php'                        => 'core/video',

packages/block-library/src/index.js

@@ -129,6 +129,7 @@ import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
+import * as termName from './term-name';
 import * as termsQuery from './terms-query';
 import * as termTemplate from './term-template';
 import * as textColumns from './text-columns';
@@ -257,6 +258,7 @@ const getAllBlocks = () => {
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( termsQuery );
 		blocks.push( termTemplate );
+		blocks.push( termName );
 	}
 
 	if ( window?.__experimentalEnableFormBlocks ) {

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

@@ -0,0 +1,68 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/term-name",
+	"title": "Term Name",
+	"category": "theme",
+	"description": "Displays the name of a taxonomy term.",
+	"textdomain": "default",
+	"usesContext": [ "termId", "taxonomy" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"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": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		}
+	}
+}

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

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	BlockControls,
+	AlignmentControl,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import {
+	ToggleControl,
+	SelectControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
+export default function TermNameEdit( {
+	attributes,
+	setAttributes,
+	context: { termId, taxonomy },
+} ) {
+	const { textAlign, tagName = 'div', isLink } = attributes;
+
+	const term = useSelect(
+		( select ) => {
+			if ( ! termId || ! taxonomy ) {
+				return null;
+			}
+			return select( coreStore ).getEntityRecord(
+				'taxonomy',
+				taxonomy,
+				termId
+			);
+		},
+		[ termId, taxonomy ]
+	);
+
+	const termName = term?.name || __( 'Term Name' );
+
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const TagName = tagName;
+
+	let termNameDisplay = termName;
+	if ( isLink && term ) {
+		const termLink = term.link || '#';
+		termNameDisplay = (
+			<a href={ termLink } onClick={ ( e ) => e.preventDefault() }>
+				{ termName }
+			</a>
+		);
+	}
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							tagName: 'div',
+							isLink: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => tagName !== 'div' }
+						label={ __( 'HTML element' ) }
+						onDeselect={ () => setAttributes( { tagName: 'div' } ) }
+						isShownByDefault
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'HTML element' ) }
+							value={ tagName }
+							options={ [
+								{ label: __( 'Default (div)' ), value: 'div' },
+								{ label: __( 'Paragraph (p)' ), value: 'p' },
+								{ label: __( 'Heading 1 (h1)' ), value: 'h1' },
+								{ label: __( 'Heading 2 (h2)' ), value: 'h2' },
+								{ label: __( 'Heading 3 (h3)' ), value: 'h3' },
+								{ label: __( 'Heading 4 (h4)' ), value: 'h4' },
+								{ label: __( 'Heading 5 (h5)' ), value: 'h5' },
+								{ label: __( 'Heading 6 (h6)' ), value: 'h6' },
+							] }
+							onChange={ ( value ) =>
+								setAttributes( { tagName: value } )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => !! isLink }
+						label={ __( 'Make term name a link' ) }
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Make term name a link' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
+			<TagName { ...blockProps }>{ termNameDisplay }</TagName>
+		</>
+	);
+}

packages/block-library/src/term-name/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 } );

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

@@ -0,0 +1,87 @@
+<?php
+/**
+ * Server-side rendering of the `core/term-name` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/term-name` 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 name of the current taxonomy term wrapped inside a heading tag.
+ */
+function render_block_core_term_name( $attributes, $content, $block ) {
+	$term_name = '';
+
+	/**
+	 * Filters the block context to get the current term ID and taxonomy.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @param array $context The block context.
+	 * @param array $parsed_block The parsed block.
+	 * @param WP_Block|null $parent_block The parent block.
+	 */
+	$context = apply_filters( 'render_block_context', $block->context, $block->parsed_block, null );
+
+	if ( isset( $context['termId'] ) && isset( $context['taxonomy'] ) ) {
+		$term = get_term( $context['termId'], $context['taxonomy'] );
+		if ( $term && ! is_wp_error( $term ) ) {
+			$term_name = $term->name;
+		}
+	}
+
+	if ( empty( $term_name ) ) {
+		return '';
+	}
+
+	$tag_name = isset( $attributes['tagName'] ) ? $attributes['tagName'] : 'div';
+
+	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+		$term_link = get_term_link( $context['termId'], $context['taxonomy'] );
+		if ( ! is_wp_error( $term_link ) ) {
+			$term_name = sprintf(
+				'<a href="%1$s">%2$s</a>',
+				esc_url( $term_link ),
+				$term_name
+			);
+		}
+	}
+
+	$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</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		$term_name
+	);
+}
+
+/**
+ * Registers the `core/term-name` block on the server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_term_name() {
+	register_block_type_from_metadata(
+		__DIR__ . '/term-name',
+		array(
+			'render_callback' => 'render_block_core_term_name',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_term_name' );