Post Tags: Fix bug where no tags are rendered (#24082)

Previously, when the post tags block was added to a view, post tags were not being loaded.
In addition to that, post tags were previously misaligned when rendered in the front-end.
The wrapping div now constrains the tags within the predefined margins of site editor content.

packages/block-library/src/post-tags/block.json

@@ -1,10 +1,9 @@
 {
 	"name": "core/post-tags",
 	"category": "design",
-	"usesContext": [
-		"postId"
-	],
+	"usesContext": [ "postId", "postType" ],
 	"supports": {
-		"html": false
+		"html": false,
+		"lightBlockWrapper": true
 	}
 }

packages/block-library/src/post-tags/edit.js

@@ -1,17 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useEntityProp } from '@wordpress/core-data';
+import { Warning, __experimentalBlock as Block } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
-function PostTagsDisplay() {
-	const [ tags ] = useEntityProp( 'postType', 'post', 'tags' );
+export default function PostTagsEdit( { context } ) {
+	const [ tags ] = useEntityProp(
+		'postType',
+		context.postType,
+		'tags',
+		context.postId
+	);
 	const tagLinks = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( 'core' );
 			let loaded = true;
-			const links = tags.map( ( tagId ) => {
+
+			const links = tags?.map( ( tagId ) => {
 				const tag = getEntityRecord( 'taxonomy', 'post_tag', tagId );
 				if ( ! tag ) {
 					return ( loaded = false );
@@ -22,21 +29,41 @@ function PostTagsDisplay() {
 					</a>
 				);
 			} );
+
 			return loaded && links;
 		},
 		[ tags ]
 	);
-	return (
+
+	let display =
 		tagLinks &&
 		( tagLinks.length === 0
 			? __( 'No tags.' )
-			: tagLinks.reduce( ( prev, curr ) => [ prev, ' | ', curr ] ) )
-	);
-}
+			: tagLinks.reduce( ( prev, curr ) => [ prev, ' | ', curr ] ) );
 
-export default function PostTagsEdit() {
-	if ( ! useEntityId( 'postType', 'post' ) ) {
-		return __( 'Post Tags' );
+	if ( ! context.postType || ! context.postId ) {
+		display = (
+			<Warning>
+				{ __( 'Post tags block: No post found for this block.' ) }
+			</Warning>
+		);
+	} else if ( context.postType !== 'post' ) {
+		/**
+		 * Do not render the block when viewing a page (as opposed to a post)
+		 *
+		 * @todo By default, only posts can be grouped by tags. Therefore, without any configuration,
+		 * the post tags block will have no tags for pages. Plugins, however, can modify this behavior.
+		 * In the future, instead of only evaluating posts, we should check whether the
+		 * post_tag taxonomy is registered for the current post type.
+		 */
+		display = (
+			<Warning>
+				{ __(
+					'Post tags block: Tags are not available for this post type.'
+				) }
+			</Warning>
+		);
 	}
-	return <PostTagsDisplay />;
+
+	return <Block.div>{ display }</Block.div>;
 }

packages/block-library/src/post-tags/index.php

@@ -20,11 +20,17 @@ function render_block_core_post_tags( $attributes, $content, $block ) {
 
 	$post_tags = get_the_tags( $block->context['postId'] );
 	if ( ! empty( $post_tags ) ) {
-		$output = '';
+		$classes = 'wp-block-post-tags';
+		$output  = sprintf( '<div class="%1$s">', esc_attr( $classes ) );
+
 		foreach ( $post_tags as $tag ) {
 			$output .= '<a href="' . get_tag_link( $tag->term_id ) . '">' . $tag->name . '</a>' . ' | ';
 		}
-		return trim( $output, ' | ' );
+
+		$output  = trim( $output, ' | ' );
+		$output .= '</div>';
+
+		return $output;
 	}
 }