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 (padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** isLink, level, 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';
@@ -250,6 +251,7 @@ const getAllBlocks = () => {
 		homeLink,
 		logInOut,
 		termDescription,
+		termName,
 		queryTitle,
 		postAuthorBiography,
 	];

packages/block-library/src/style.scss

@@ -71,6 +71,7 @@
 @import "./table/style.scss";
 @import "./table-of-contents/style.scss";
 @import "./term-description/style.scss";
+@import "./term-name/style.scss";
 @import "./term-template/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";

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.",
+	"keywords": [ "term title" ],
+	"textdomain": "default",
+	"usesContext": [ "termId", "taxonomy" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		},
+		"level": {
+			"type": "number",
+			"default": 0
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"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-name"
+}

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

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } 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 { useTermName } from './use-term-name';
+
+export default function TermNameEdit( {
+	attributes,
+	setAttributes,
+	context: { termId, taxonomy },
+} ) {
+	const { textAlign, level = 0, isLink } = attributes;
+	const { term } = useTermName( termId, taxonomy );
+
+	const termName = term?.name || __( 'Term Name' );
+
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const TagName = level === 0 ? 'p' : `h${ level }`;
+
+	let termNameDisplay = termName;
+	if ( isLink ) {
+		termNameDisplay = (
+			<a
+				href="#term-name-pseudo-link"
+				onClick={ ( e ) => e.preventDefault() }
+			>
+				{ termName }
+			</a>
+		);
+	}
+
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					value={ level }
+					options={ [ 0, 1, 2, 3, 4, 5, 6 ] }
+					onChange={ ( newLevel ) => {
+						setAttributes( { level: newLevel } );
+					} }
+				/>
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							isLink: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<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 { termName 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,81 @@
+<?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 = '';
+
+	// 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_name = $term->name;
+	$level     = isset( $attributes['level'] ) ? $attributes['level'] : 0;
+	$tag_name  = 0 === $level ? 'p' : 'h' . (int) $level;
+
+	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+		$term_link = get_term_link( $term );
+		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' );

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

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