More extendability for Post Date block variation

[gvgvgvijayan]

Issue:

I'm developing a block variation of core/post-date for custom post type Event where I achieved to show event date (post meta) instead of created or modified date in front-end but in editor the markup is showing the hard coded label Post Modified Date because the attribute displayType initialized with custom value in variation's JSON.

Suggestion:

Instead of hard coding the label, if dateLabel property is passed using variation's JSON then we can show custom label like Event Date instead of Post Modified Date. Even better is it possible to pass the date dynamically, I think this is not possible for now because of not possible to extend the editor markup. But if possible, please give a provision to pass/hydrate custom inner block as a date template.

---

Gist of what I'm doing:

index.js

/**
 * WordPress dependencies
 */
import { registerBlockVariation } from '@wordpress/blocks';

/**
 * Internal dependencies
 */
import { default as queryMetaData } from './upcoming-event-query-loop';
import { default as eventDateMetaData } from './event-date';

registerBlockVariation( 'core/query', { ...queryMetaData } );
registerBlockVariation( 'core/post-date', { ...eventDateMetaData } );

event-date.js

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { postDate } from '@wordpress/icons';

const blockName = 'event-date';

export default {
	name: blockName,
	title: __( 'Event Date', 'vg-event' ),
	description: __( 'Displays an event date', 'vg-event' ),
	attributes: {
		namespace: blockName,
		displayType: 'customEventDate', // Use this to differentiate behavior.
	},
	icon: postDate,
	isDefault: false,
	isActive: [ 'namespace' ],
	scope: [ 'block', 'inserter' ],
};

event-date.php

<?php

add_filter( 'render_block_core/post-date', 'filter_render_block_event_date', 10, 3 );

/**
 * Filters the content of a single block.
 *
 * @param string    $block_content The block content.
 * @param array     $block         The full block, including name and attributes.
 * @param \WP_Block $instance      The block instance.
 * @return string The block content.
 */
function filter_render_block_event_date( $block_content, $block, \WP_Block $instance ) {
	$attributes = $block['attrs'];

	if (
		isset( $attributes['displayType'] ) &&
		$attributes['displayType'] === 'customEventDate'
	) {
		if ( ! isset( $instance->context['postId'] ) ) {
			return '';
		}

		$post_ID = $instance->context['postId'];

		$meta_date = get_field( 'event_date', $post_ID );
		$meta_date_immutable = date_create_immutable_from_format( 'Ymd', $meta_date, wp_timezone());
		$meta_date_timestamp = $meta_date_immutable->getTimestamp();

		if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {

			if ( $meta_date_timestamp > time() ) {
				// translators: %s: human-readable time difference.
				$formatted_date = sprintf( __( '%s from now' ), human_time_diff( $meta_date_timestamp ) );
			} else {
				// translators: %s: human-readable time difference.
				$formatted_date = sprintf( __( '%s ago' ), human_time_diff( $meta_date_timestamp ) );
			}
		} else {
			$format = ! empty( $attributes['format'] ) ? $attributes['format'] : get_option( 'date_format' );
			$formatted_date = wp_date( $format, $meta_date_timestamp );
		}

		$unformatted_date = esc_attr( wp_date( 'c', $meta_date_timestamp ) );

		$tags          = new WP_HTML_Tag_Processor( $block_content );
		$tags->next_tag();

		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $tags->get_attribute('class') ) );

		if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
			$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
		}

		return sprintf(
			'<div %1$s><time datetime="%2$s">%3$s</time></div>',
			$wrapper_attributes,
			$unformatted_date,
			$formatted_date
		);
	}
	return $block_content;
}

[t-hamano]

Hi, instead of using block variations, how about using the Block Bindings API? For example, you can bind any custom field to a Paragraph block. The bound data will be displayed correctly both in the editor and on the frontend.

[gvgvgvijayan]

@t-hamano thanks for replying.

The problem is I won't get inspector control settings date format choosing capability, which is implicitly available for post date block.

[t-hamano]

The Edit component is a React component. It exposes slots for adding new UI to the inspector control, but it does not allow us to modify the existing UI. If you want to remove or change the existing UI, you will need to filter the entire Edit component.

If you want to go that far, I recommend creating a custom block. The UI for selecting a date is exposed as the DateFormatPicker component.

• README: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/date-format-picker/README.md
• Storybook: https://wordpress.github.io/gutenberg/?path=/docs/blockeditor-dateformatpicker--docs

[gvgvgvijayan]

@t-hamano thank you. Appreciate the way you explained, which is crystal clear and spot on, about the impossibility of manipulate editor component markup.