Block Library: Add a Post Date block. (#19578)

* Block Library: Add a Post Date block.

* Block Library: Use time tags in Post Date block.

* E2E Tests: Generate Post Date block fixtures.

lib/blocks.php

@@ -57,6 +57,7 @@ function gutenberg_reregister_core_block_types() {
 		'post-title.php'      => 'core/post-title',
 		'post-content.php'    => 'core/post-content',
 		'post-author.php'     => 'core/post-author',
+		'post-date.php'       => 'core/post-date',
 		'post-excerpt.php'    => 'core/post-excerpt',
 	);
 

packages/block-library/src/index.js

@@ -69,6 +69,7 @@ import * as templatePart from './template-part';
 import * as postTitle from './post-title';
 import * as postContent from './post-content';
 import * as postAuthor from './post-author';
+import * as postDate from './post-date';
 import * as postExcerpt from './post-excerpt';
 
 /**
@@ -195,6 +196,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 						postTitle,
 						postContent,
 						postAuthor,
+						postDate,
 						postExcerpt,
 					] :
 					[] ),

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

@@ -0,0 +1,4 @@
+{
+	"name": "core/post-date",
+	"category": "layout"
+}

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

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+
+function PostDateDisplay() {
+	const [ date ] = useEntityProp( 'postType', 'post', 'date' );
+	const settings = __experimentalGetSettings();
+
+	return date ? (
+		<time dateTime={ dateI18n( 'c', date ) }>
+			{ dateI18n( settings.formats.date, date ) }
+		</time>
+	) : (
+		__( 'No Date' )
+	);
+}
+
+export default function PostDateEdit() {
+	if ( ! useEntityId( 'postType', 'post' ) ) {
+		return 'Post Date Placeholder';
+	}
+	return <PostDateDisplay />;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+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 Date' ),
+	edit,
+};

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

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-date` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-date` block on the server.
+ *
+ * @return string Returns the filtered post date for the current post wrapped inside "time" tags.
+ */
+function render_block_core_post_date() {
+	$post = gutenberg_get_post_from_context();
+	if ( ! $post ) {
+		return '';
+	}
+	return '<time datetime="' . get_the_date( 'c', $post ) . '">' . get_the_date( '', $post ) . '</time>';
+}
+
+/**
+ * Registers the `core/post-date` block on the server.
+ */
+function register_block_core_post_date() {
+	register_block_type(
+		'core/post-date',
+		array(
+			'render_callback' => 'render_block_core_post_date',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_date' );

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

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

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

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

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

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

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

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