Skip to content

Commit d415904

Browse files
mikachant-hamanocr0ybotntsekourasjasmussen
authored
Add Term Name block (#72129)
* Add initial block * Add tagName attribute * Fix phpcs * Update packages/block-library/src/term-name/block.json Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Add border-box * Remove term from isLink render logic * Update HTML element selector * Switch to HeadingLevelDropdown * Remove border radius and margin controls * Use pseudo link * Allow block to be used outside of terms query * Remove apply_filters * Rename tagName to level * Add apply_filters back * Add new icon * Remove fill from svg * Add term title keyword * Remove experimental flag * Fix spacing * Remove apply_filters * Add test fixture * Add style import * Update svg --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: cr0ybot <cr0ybot@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: kmanijak <karolmanijak@git.wordpress.org>
1 parent 834da76 commit d415904

File tree

15 files changed

+427
-0
lines changed

15 files changed

+427
-0
lines changed

‎docs/reference-guides/core-blocks.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -991,6 +991,15 @@ Display the description of categories, tags and custom taxonomies when viewing a
991991
- **Supports:** align (full, wide), color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
992992
- **Attributes:** textAlign
993993

994+
## Term Name
995+
996+
Displays the name of a taxonomy term. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-name))
997+
998+
- **Name:** core/term-name
999+
- **Category:** theme
1000+
- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (padding), typography (fontSize, lineHeight), ~~html~~
1001+
- **Attributes:** isLink, level, textAlign
1002+
9941003
## Term Template
9951004

9961005
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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ function gutenberg_reregister_core_block_types() {
125125
'tag-cloud.php' => 'core/tag-cloud',
126126
'template-part.php' => 'core/template-part',
127127
'term-description.php' => 'core/term-description',
128+
'term-name.php' => 'core/term-name',
128129
'terms-query.php' => 'core/terms-query',
129130
'term-template.php' => 'core/term-template',
130131
'video.php' => 'core/video',

‎packages/block-library/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ import * as tableOfContents from './table-of-contents';
129129
import * as tagCloud from './tag-cloud';
130130
import * as templatePart from './template-part';
131131
import * as termDescription from './term-description';
132+
import * as termName from './term-name';
132133
import * as termsQuery from './terms-query';
133134
import * as termTemplate from './term-template';
134135
import * as textColumns from './text-columns';
@@ -250,6 +251,7 @@ const getAllBlocks = () => {
250251
homeLink,
251252
logInOut,
252253
termDescription,
254+
termName,
253255
queryTitle,
254256
postAuthorBiography,
255257
];

‎packages/block-library/src/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
@import "./table/style.scss";
7272
@import "./table-of-contents/style.scss";
7373
@import "./term-description/style.scss";
74+
@import "./term-name/style.scss";
7475
@import "./term-template/style.scss";
7576
@import "./text-columns/style.scss";
7677
@import "./verse/style.scss";

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 3,
4+
"name": "core/term-name",
5+
"title": "Term Name",
6+
"category": "theme",
7+
"description": "Displays the name of a taxonomy term.",
8+
"keywords": [ "term title" ],
9+
"textdomain": "default",
10+
"usesContext": [ "termId", "taxonomy" ],
11+
"attributes": {
12+
"textAlign": {
13+
"type": "string"
14+
},
15+
"level": {
16+
"type": "number",
17+
"default": 0
18+
},
19+
"isLink": {
20+
"type": "boolean",
21+
"default": false
22+
}
23+
},
24+
"supports": {
25+
"align": [ "wide", "full" ],
26+
"html": false,
27+
"color": {
28+
"gradients": true,
29+
"link": true,
30+
"__experimentalDefaultControls": {
31+
"background": true,
32+
"text": true,
33+
"link": true
34+
}
35+
},
36+
"spacing": {
37+
"padding": true
38+
},
39+
"typography": {
40+
"fontSize": true,
41+
"lineHeight": true,
42+
"__experimentalFontFamily": true,
43+
"__experimentalFontWeight": true,
44+
"__experimentalFontStyle": true,
45+
"__experimentalTextTransform": true,
46+
"__experimentalTextDecoration": true,
47+
"__experimentalLetterSpacing": true,
48+
"__experimentalDefaultControls": {
49+
"fontSize": true
50+
}
51+
},
52+
"interactivity": {
53+
"clientNavigation": true
54+
},
55+
"__experimentalBorder": {
56+
"radius": true,
57+
"color": true,
58+
"width": true,
59+
"style": true,
60+
"__experimentalDefaultControls": {
61+
"color": true,
62+
"width": true,
63+
"style": true
64+
}
65+
}
66+
},
67+
"style": "wp-block-term-name"
68+
}

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import clsx from 'clsx';
5+
6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { __ } from '@wordpress/i18n';
10+
import {
11+
useBlockProps,
12+
BlockControls,
13+
AlignmentControl,
14+
InspectorControls,
15+
HeadingLevelDropdown,
16+
} from '@wordpress/block-editor';
17+
import {
18+
ToggleControl,
19+
__experimentalToolsPanel as ToolsPanel,
20+
__experimentalToolsPanelItem as ToolsPanelItem,
21+
} from '@wordpress/components';
22+
23+
/**
24+
* Internal dependencies
25+
*/
26+
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
27+
import { useTermName } from './use-term-name';
28+
29+
export default function TermNameEdit( {
30+
attributes,
31+
setAttributes,
32+
context: { termId, taxonomy },
33+
} ) {
34+
const { textAlign, level = 0, isLink } = attributes;
35+
const { term } = useTermName( termId, taxonomy );
36+
37+
const termName = term?.name || __( 'Term Name' );
38+
39+
const blockProps = useBlockProps( {
40+
className: clsx( {
41+
[ `has-text-align-${ textAlign }` ]: textAlign,
42+
} ),
43+
} );
44+
45+
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
46+
47+
const TagName = level === 0 ? 'p' : `h${ level }`;
48+
49+
let termNameDisplay = termName;
50+
if ( isLink ) {
51+
termNameDisplay = (
52+
<a
53+
href="#term-name-pseudo-link"
54+
onClick={ ( e ) => e.preventDefault() }
55+
>
56+
{ termName }
57+
</a>
58+
);
59+
}
60+
61+
return (
62+
<>
63+
<BlockControls group="block">
64+
<HeadingLevelDropdown
65+
value={ level }
66+
options={ [ 0, 1, 2, 3, 4, 5, 6 ] }
67+
onChange={ ( newLevel ) => {
68+
setAttributes( { level: newLevel } );
69+
} }
70+
/>
71+
<AlignmentControl
72+
value={ textAlign }
73+
onChange={ ( nextAlign ) => {
74+
setAttributes( { textAlign: nextAlign } );
75+
} }
76+
/>
77+
</BlockControls>
78+
<InspectorControls>
79+
<ToolsPanel
80+
label={ __( 'Settings' ) }
81+
resetAll={ () => {
82+
setAttributes( {
83+
isLink: false,
84+
} );
85+
} }
86+
dropdownMenuProps={ dropdownMenuProps }
87+
>
88+
<ToolsPanelItem
89+
hasValue={ () => !! isLink }
90+
label={ __( 'Make term name a link' ) }
91+
onDeselect={ () => setAttributes( { isLink: false } ) }
92+
isShownByDefault
93+
>
94+
<ToggleControl
95+
__nextHasNoMarginBottom
96+
label={ __( 'Make term name a link' ) }
97+
onChange={ () =>
98+
setAttributes( { isLink: ! isLink } )
99+
}
100+
checked={ isLink }
101+
/>
102+
</ToolsPanelItem>
103+
</ToolsPanel>
104+
</InspectorControls>
105+
<TagName { ...blockProps }>{ termNameDisplay }</TagName>
106+
</>
107+
);
108+
}

‎packages/block-library/src/term-name/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { termName as icon } from '@wordpress/icons';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import initBlock from '../utils/init-block';
10+
import metadata from './block.json';
11+
import edit from './edit';
12+
13+
const { name } = metadata;
14+
export { metadata, name };
15+
16+
export const settings = {
17+
icon,
18+
edit,
19+
};
20+
21+
export const init = () => initBlock( { name, metadata, settings } );

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<?php
2+
/**
3+
* Server-side rendering of the `core/term-name` block.
4+
*
5+
* @package WordPress
6+
*/
7+
8+
/**
9+
* Renders the `core/term-name` block on the server.
10+
*
11+
* @since 6.9.0
12+
*
13+
* @param array $attributes Block attributes.
14+
* @param string $content Block default content.
15+
* @param WP_Block $block Block instance.
16+
*
17+
* @return string Returns the name of the current taxonomy term wrapped inside a heading tag.
18+
*/
19+
function render_block_core_term_name( $attributes, $content, $block ) {
20+
$term_name = '';
21+
22+
// Get term from context or from the current query.
23+
if ( isset( $block->context['termId'] ) && isset( $block->context['taxonomy'] ) ) {
24+
$term = get_term( $block->context['termId'], $block->context['taxonomy'] );
25+
} else {
26+
$term = get_queried_object();
27+
if ( ! $term instanceof WP_Term ) {
28+
$term = null;
29+
}
30+
}
31+
32+
if ( ! $term || is_wp_error( $term ) ) {
33+
return '';
34+
}
35+
36+
$term_name = $term->name;
37+
$level = isset( $attributes['level'] ) ? $attributes['level'] : 0;
38+
$tag_name = 0 === $level ? 'p' : 'h' . (int) $level;
39+
40+
if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
41+
$term_link = get_term_link( $term );
42+
if ( ! is_wp_error( $term_link ) ) {
43+
$term_name = sprintf(
44+
'<a href="%1$s">%2$s</a>',
45+
esc_url( $term_link ),
46+
$term_name
47+
);
48+
}
49+
}
50+
51+
$classes = array();
52+
if ( isset( $attributes['textAlign'] ) ) {
53+
$classes[] = 'has-text-align-' . $attributes['textAlign'];
54+
}
55+
if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
56+
$classes[] = 'has-link-color';
57+
}
58+
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
59+
60+
return sprintf(
61+
'<%1$s %2$s>%3$s</%1$s>',
62+
$tag_name,
63+
$wrapper_attributes,
64+
$term_name
65+
);
66+
}
67+
68+
/**
69+
* Registers the `core/term-name` block on the server.
70+
*
71+
* @since 6.9.0
72+
*/
73+
function register_block_core_term_name() {
74+
register_block_type_from_metadata(
75+
__DIR__ . '/term-name',
76+
array(
77+
'render_callback' => 'render_block_core_term_name',
78+
)
79+
);
80+
}
81+
add_action( 'init', 'register_block_core_term_name' );

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.wp-block-term-name {
2+
// This block has customizable padding, border-box makes that more predictable.
3+
box-sizing: border-box;
4+
}

0 commit comments

Comments
 (0)