WIP: Add query description block

lib/blocks.php

@@ -82,6 +82,7 @@ function gutenberg_reregister_core_block_types() {
 					'post-tags.php'                 => 'core/post-tags',
 					'post-title.php'                => 'core/post-title',
 					'query.php'                     => 'core/query',
+					'query-description.php'         => 'core/query-description',
 					'query-loop.php'                => 'core/query-loop',
 					'query-pagination.php'          => 'core/query-pagination',
 					'query-pagination-next.php'     => 'core/query-pagination-next',

packages/block-library/src/index.js

@@ -69,6 +69,7 @@ import * as siteTagline from './site-tagline';
 import * as siteTitle from './site-title';
 import * as templatePart from './template-part';
 import * as query from './query';
+import * as queryDescription from './query-description';
 import * as queryLoop from './query-loop';
 import * as queryPagination from './query-pagination';
 import * as queryPaginationNext from './query-pagination-next';
@@ -221,6 +222,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								siteTitle,
 								templatePart,
 								query,
+								queryDescription,
 								queryLoop,
 								queryPagination,
 								queryPaginationNext,

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

@@ -0,0 +1,25 @@
+{
+	"apiVersion": 2,
+	"name": "core/query-description",
+	"category": "design",
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"usesContext": [
+		"queryId",
+		"query",
+		"queryContext",
+		"templateSlug",
+		"postType"
+	],
+	"supports": {
+		"html": false,
+		"fontSize": true,
+		"lineHeight": true,
+		"color": {
+			"link": true
+		}
+	}
+}

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

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/*
+ * To do: Add the term to the query and use the context in the description block.
+ * Only display the description on true term archive pages.
+ * On other pages, display a message saying that there is no description.
+ * In block.json, remove the context that is not used.
+ * Eventually, make the term description editable.
+ */
+
+export default function QueryDescriptionEdit( { attributes, setAttributes } ) {
+	const { textAlign } = attributes;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
+				{ __( 'Query description placeholder' ) }
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: _x( 'Query Description', 'block title' ),
+	description: __(
+		'Displays a description for the term.'
+	),
+	edit,
+	parent: [ 'core/query' ],
+};

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

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-description` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/query-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 query description based on the queried object.
+ */
+function render_block_core_query_description( $attributes, $content, $block ) {
+
+	// @see https://developer.wordpress.org/reference/functions/term_description/
+	if ( is_tax() || is_tag() || is_category() ) {
+		$term = get_queried_object();
+		if ( $term ) {
+			$term = $term->term_id;
+		}
+	}
+
+	if ( ! isset( $term ) ) {
+		return;
+	}
+
+	$description = get_term_field( 'description', $term );
+	$tag_name           = 'div';
+	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	return sprintf(
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		$description
+	);
+}
+
+/**
+ * Registers the `core/query-description` block on the server.
+ */
+function register_block_core_query_description() {
+	register_block_type_from_metadata(
+		__DIR__ . '/query-description',
+		array(
+			'render_callback' => 'render_block_core_query_description',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_query_description' );