Add a post categories block

packages/block-library/src/index.js

@@ -80,6 +80,7 @@ import * as postDate from './post-date';
 import * as postExcerpt from './post-excerpt';
 import * as postFeaturedImage from './post-featured-image';
 import * as postTags from './post-tags';
+import * as postCategories from './post-categories';
 
 /**
  * Function to register an individual block.

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

@@ -0,0 +1,20 @@
+{
+	"name": "core/post-categories",
+	"category": "layout",
+	"context": [ "postId" ],
+	"attributes": {
+		"align": {
+			"type": "string",
+			"enum": [
+				"left",
+				"center",
+				"right",
+				"wide",
+				"full"
+			]
+		},
+		"className": {
+			"type": "string"
+		}
+	}
+}

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+function PostCategoriesDisplay() {
+	const [ categories ] = useEntityProp( 'postType', 'post', 'categories' );
+	const categoryLinks = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( 'core' );
+			let loaded = true;
+			const links = categories.map( ( categoryId ) => {
+				const category = getEntityRecord('taxonomy', 'category', categoryId );
+				if ( ! category ) {
+					return ( loaded = false );
+				}
+				return (
+					<a key={categoryId } href={ category.link }>
+						{ category.name }
+					</a>
+				);
+			} );
+			return loaded && links;
+		},
+		[ categories ]
+	);
+	return (
+		categoryLinks &&
+		( categoryLinks.length === 0
+			? __( 'No categories.' )
+			: categoryLinks.reduce( ( prev, curr ) => [ prev, ', ', curr ] ) )
+	);
+}
+
+export default function PostCategoriesEdit() {
+	if ( ! useEntityId( 'postType', 'post' ) ) {
+		return 'Post Categories Placeholder';
+	}
+	return <PostCategoriesDisplay />;
+}

packages/block-library/src/post-categories/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { category as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Post Categories' ),
+	description: __('Display a list of categories for this post.'),
+	icon,
+	supports: {
+		align: true,
+	},
+	edit,
+};

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

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-categories` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-categories` 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 categories for the current post wrapped inside "a" tags.
+ */
+function render_block_core_post_categories( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$class = 'wp-block-post-categories';
+
+	if ( isset( $attributes['align'] ) ) {
+		$class .= " align{$attributes['align']}";
+	}
+
+	if ( isset( $attributes['className'] ) ) {
+		$class .= " {$attributes['className']}";
+	}
+
+	$post_categories = get_the_category( $block->context['postId'] );
+	if ( ! empty( $post_categories ) ) {
+		$output = '';
+		foreach ( $post_categories as $category ) {
+			$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a>' . ', ';
+		}
+		return sprintf(
+			'<div class="%1$s"><span class="screen-reader-text">' . __( 'Categories' ) . '</span> %2$s</div>',
+			esc_attr( $class ),
+			trim( $output, ', ' )
+		);
+
+	}
+}
+
+/**
+ * Registers the `core/post-categories` block on the server.
+ */
+function register_block_core_post_categories() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-categories',
+		array(
+			'render_callback' => 'render_block_core_post_categories',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_categories' );

packages/e2e-tests/fixtures/blocks/core__post-categories.html

@@ -0,0 +1 @@
+<!-- wp:post-categories /-->

packages/e2e-tests/fixtures/blocks/core__post-categories.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/post-categories",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

packages/e2e-tests/fixtures/blocks/core__post-categories.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/post-categories",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__post-categories.serialized.html

@@ -0,0 +1 @@
+<!-- wp:post-categories /-->