Date block: Allow connecting to Block Bindings

backport-changelog/6.9/9299.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9299
+
+* https://github.com/WordPress/gutenberg/pull/70585

docs/reference-guides/core-blocks.md

@@ -624,7 +624,7 @@ Display the publish date for an entry such as a post or page. ([Source](https://
 -	**Name:** core/post-date
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayType, format, isLink, textAlign
+-	**Attributes:** datetime, format, isLink, textAlign
 
 ## Excerpt
 

lib/compat/wordpress-6.9/post-data-block-bindings.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Post Data source for the block bindings.
+ *
+ * @since 6.9.0
+ * @package gutenberg
+ * @subpackage Block Bindings
+ */
+
+/**
+ * Gets value for Post Data source.
+ *
+ * @since 6.9.0
+ * @access private
+ *
+ * @param array    $source_args    Array containing source arguments used to look up the override value.
+ *                                 Example: array( "key" => "foo" ).
+ * @param WP_Block $block_instance The block instance.
+ * @return mixed The value computed for the source.
+ */
+function gutenberg_block_bindings_post_data_get_value( array $source_args, $block_instance ) {
+	if ( empty( $source_args['key'] ) ) {
+		return null;
+	}
+
+	if ( empty( $block_instance->context['postId'] ) ) {
+		return null;
+	}
+	$post_id = $block_instance->context['postId'];
+
+	// If a post isn't public, we need to prevent unauthorized users from accessing the post data.
+	$post = get_post( $post_id );
+	if ( ( ! is_post_publicly_viewable( $post ) && ! current_user_can( 'read_post', $post_id ) ) || post_password_required( $post ) ) {
+		return null;
+	}
+
+	if ( 'date' === $source_args['key'] ) {
+		return esc_attr( get_the_date( 'c', $post_id ) );
+	}
+
+	if ( 'modified' === $source_args['key'] ) {
+		// Only return the modified date if it is later than the publishing date.
+		if ( get_the_modified_date( 'Ymdhi', $post_id ) > get_the_date( 'Ymdhi', $post_id ) ) {
+			return esc_attr( get_the_modified_date( 'c', $post_id ) );
+		} else {
+			return '';
+		}
+	}
+}
+
+/**
+ * Registers Post Data source in the block bindings registry.
+ *
+ * @since 6.9.0
+ * @access private
+ */
+function gutenberg_register_block_bindings_post_data_source() {
+	if ( get_block_bindings_source( 'core/post-data' ) ) {
+		// The source is already registered.
+		return;
+	}
+
+	register_block_bindings_source(
+		'core/post-data',
+		array(
+			'label'              => _x( 'Post Data', 'block bindings source' ),
+			'get_value_callback' => 'gutenberg_block_bindings_post_data_get_value',
+			'uses_context'       => array( 'postId' ),
+		)
+	);
+}
+
+add_action( 'init', 'gutenberg_register_block_bindings_post_data_source' );

lib/load.php

@@ -39,6 +39,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/compat/wordpress-6.8/rest-api.php';
 
 	// WordPress 6.9 compat.
+	require __DIR__ . '/compat/wordpress-6.9/post-data-block-bindings.php';
 	require __DIR__ . '/compat/wordpress-6.9/rest-api.php';
 	require __DIR__ . '/compat/wordpress-6.9/class-gutenberg-hierarchical-sort.php';
 

packages/block-editor/src/components/publish-date-time-picker/README.md

@@ -32,6 +32,7 @@ const MyDateTimePicker = () => {
 					currentDate={ date }
 					onChange={ ( newDate ) => setDate( newDate ) }
 					onClose={ onClose }
+					title={ __( 'Select post date' ) }
 				/>
 			) }
 		/>
@@ -44,6 +45,14 @@ const MyDateTimePicker = () => {
 `PublishDateTimePicker` supports all of the props that
 [`DateTimePicker`](/packages/components/src/date-time#Props) supports, plus:
 
+### title
+
+The title displayed in the header of the popover that contains the `DateTimePicker`.
+
+- Type: `String`
+- Required: No
+- Default: `Publish`
+
 ### onClose
 
 Called when the user presses the close button.

packages/block-editor/src/components/publish-date-time-picker/index.js

@@ -18,6 +18,7 @@ export function PublishDateTimePicker(
 		showPopoverHeaderActions,
 		isCompact,
 		currentDate,
+		title,
 		...additionalProps
 	},
 	ref
@@ -33,7 +34,7 @@ export function PublishDateTimePicker(
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
 			<InspectorPopoverHeader
-				title={ __( 'Publish' ) }
+				title={ title || __( 'Publish' ) }
 				actions={
 					showPopoverHeaderActions
 						? [

packages/block-editor/src/utils/block-bindings.js

@@ -16,6 +16,7 @@ const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/heading': [ 'content' ],
 	'core/image': [ 'id', 'url', 'title', 'alt' ],
 	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
+	'core/post-date': [ 'datetime' ],
 };
 
 /**

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

@@ -7,6 +7,10 @@
 	"description": "Display the publish date for an entry such as a post or page.",
 	"textdomain": "default",
 	"attributes": {
+		"datetime": {
+			"type": "string",
+			"role": "content"
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -17,10 +21,6 @@
 			"type": "boolean",
 			"default": false,
 			"role": "content"
-		},
-		"displayType": {
-			"type": "string",
-			"default": "date"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

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

@@ -1,8 +1,111 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
 
+const v2 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		format: {
+			type: 'string',
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+			role: 'content',
+		},
+		displayType: {
+			type: 'string',
+			default: 'date',
+		},
+	},
+	supports: {
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate( { className, displayType, metadata, ...otherAttributes } ) {
+		if ( displayType === 'date' || displayType === 'modified' ) {
+			if ( displayType === 'modified' ) {
+				className = clsx(
+					className,
+					'wp-block-post-date__modified-date'
+				);
+			}
+
+			return {
+				...otherAttributes,
+				className,
+				metadata: {
+					...metadata,
+					bindings: {
+						datetime: {
+							source: 'core/post-data',
+							args: { key: displayType },
+						},
+					},
+				},
+			};
+		}
+	},
+	isEligible( attributes ) {
+		// If there's neither an explicit `datetime` attribute nor a block binding for that attribute,
+		// then we're dealing with an old version of the block.
+		return (
+			! attributes.datetime && ! attributes?.metadata?.bindings?.datetime
+		);
+	},
+};
+
 const v1 = {
 	attributes: {
 		textAlign: {
@@ -49,4 +152,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];