Add term-description block (#29613)

* WIP for term-description block

* load the block.

* better safe than sorry

* Add more supports

* add fixtures files

* use padding instead of height so border can adapt depending on font-size

* Change the icon

Use icon from #27989 (comment)

* Update packages/icons/src/library/term-description.js

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

* address feedback

* Add description

* reverse condition & logic

* Change placeholder text

* Simplify

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

lib/blocks.php

@@ -91,6 +91,7 @@ function gutenberg_reregister_core_block_types() {
 					'site-title.php'                => 'core/site-title',
 					// 'table-of-contents.php'         => 'core/table-of-contents',
 					'template-part.php'             => 'core/template-part',
+					'term-description.php'          => 'core/term-description',
 				)
 			),
 		),

packages/block-library/src/editor.scss

@@ -53,6 +53,7 @@
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
+@import "./term-description/editor.scss";
 
 :root .editor-styles-wrapper {
 	// Background colors.

packages/block-library/src/index.js

@@ -89,6 +89,7 @@ import * as postExcerpt from './post-excerpt';
 import * as postFeaturedImage from './post-featured-image';
 import * as postHierarchicalTerms from './post-hierarchical-terms';
 import * as postTags from './post-tags';
+import * as termDescription from './term-description';
 
 /**
  * Function to register an individual block.
@@ -240,6 +241,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								postHierarchicalTerms,
 								postTags,
 								postNavigationLink,
+								termDescription,
 						  ]
 						: [] ),
 				].forEach( registerBlock );

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

@@ -0,0 +1,20 @@
+{
+	"apiVersion": 2,
+	"name": "core/term-description",
+	"category": "design",
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false,
+		"fontSize": true,
+		"lineHeight": true,
+		"color": {
+			"link": true
+		}
+	},
+	"editorStyle": "wp-block-term-description-editor"
+}

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

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	BlockControls,
+	AlignmentToolbar,
+} from '@wordpress/block-editor';
+
+export default function TermDescriptionEdit( {
+	attributes,
+	setAttributes,
+	mergedStyle,
+} ) {
+	const { textAlign } = attributes;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+		style: mergedStyle,
+	} );
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				<div className="wp-block-term-description__placeholder">
+					<span>{ __( 'Term description.' ) }</span>
+				</div>
+			</div>
+		</>
+	);
+}

packages/block-library/src/term-description/editor.scss

@@ -0,0 +1,4 @@
+.wp-block-term-description__placeholder {
+	padding: 1em 0;
+	border: 1px dashed;
+}

packages/block-library/src/term-description/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, __ } from '@wordpress/i18n';
+import { termDescription as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: _x( 'Term Description', 'block title' ),
+	description: __(
+		'Display the description of categories, tags and custom taxonomies when viewing an archive.'
+	),
+	icon,
+	edit,
+};

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

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Server-side rendering of the `core/term-description` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/term-description` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string Returns the filtered post content of the current post.
+ */
+function render_block_core_term_description( $attributes, $content, $block ) {
+
+	if ( ! is_category() && ! is_tag() && ! is_tax() ) {
+		return '';
+	}
+
+	$extra_attributes   = ( isset( $attributes['textAlign'] ) )
+		? array( 'class' => 'has-text-align-' . $attributes['textAlign'] )
+		: array();
+	$wrapper_attributes = get_block_wrapper_attributes( $extra_attributes );
+
+	return '<div ' . $wrapper_attributes . '>' . term_description() . '</div>';
+}
+
+/**
+ * Registers the `core/term-description` block on the server.
+ */
+function register_block_core_term_description() {
+	register_block_type_from_metadata(
+		__DIR__ . '/term-description',
+		array(
+			'render_callback' => 'render_block_core_term_description',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_term_description' );

packages/e2e-tests/fixtures/blocks/core__term-description.html

@@ -0,0 +1 @@
+<!-- wp:term-description {"align":"full"} /-->

packages/e2e-tests/fixtures/blocks/core__term-description.json

@@ -0,0 +1,12 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/term-description",
+        "isValid": true,
+        "attributes": {
+            "align": "full"
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

packages/e2e-tests/fixtures/blocks/core__term-description.parsed.json

@@ -0,0 +1,20 @@
+[
+    {
+        "blockName": "core/term-description",
+        "attrs": {
+            "align": "full"
+        },
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__term-description.serialized.html

@@ -0,0 +1 @@
+<!-- wp:term-description {"align":"full"} /-->

packages/icons/src/index.js

@@ -189,6 +189,7 @@ export { default as tableRowBefore } from './library/table-row-before';
 export { default as tableRowDelete } from './library/table-row-delete';
 export { default as table } from './library/table';
 export { default as tag } from './library/tag';
+export { default as termDescription } from './library/term-description';
 export { default as footer } from './library/footer';
 export { default as header } from './library/header';
 export { default as sidebar } from './library/sidebar';

packages/icons/src/library/term-description.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const tag = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			stroke="#1E1E1E"
+			strokeWidth="1.5"
+			d="M9 19.25h6M4 19.25h4M12 15.25h8M4 15.25h7"
+		/>
+		<Path
+			d="M8.994 10.103H6.08L5.417 12H4l2.846-8h1.383l2.845 8H9.657l-.663-1.897zm-.457-1.28l-.994-2.857-1.006 2.857h2z"
+			fill="#1E1E1E"
+		/>
+	</SVG>
+);
+
+export default tag;