Post Date Style Customization

[iamtakashi]

It feels less common to see this nowadays, but it could be nice to allow post date to be styled a little more interesting.

Examples:

[aristath]

This should probably be handled by themes using block-styles.
We could however add span elements with the appropriate classes around the year, month, day etc to make styling these easier in themes...

It is possible... Replacing the render_block_core_post_date function with the one below does the trick. It's not pretty code but it works. A better solution with regex will probably be possible, but I've got no regex mojo 😅

function render_block_core_post_date( $attributes, $content, $block ) {
	if ( ! isset( $block->context['postId'] ) ) {
		return '';
	}

	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";

	$format     = isset( $attributes['format'] ) ? $attributes['format'] : get_option( 'date_format' );
	$format_arr = str_split( $format, 1 );
	$final_date = '';

	// Array extrapolated from https://www.php.net/manual/en/datetime.format.php
	$valid_date_vals = array( 'd', 'D', 'j', 'l', 'N', 'S', 'w', 'z', 'W', 'F', 'm', 'M', 'n', 't', 'L', 'o', 'Y', 'y', 'a', 'A', 'B', 'g', 'G', 'h', 'H', 'i', 's', 'u', 'v', 'e', 'I', 'O', 'P', 'T', 'Z', 'c', 'r', 'U' );

	foreach ( $format_arr as $part ) {
		if ( ! in_array( $part, $valid_date_vals, true ) ) {
			$final_date .= $part;
			continue;
		}
		$final_date .= '<span class="date-val-' . $part . '">' . get_the_date( $part, $block->context['postId'] ) . '</span>';
	}

	return sprintf(
		'<div class="%1$s"><time datetime="%2$s">%3$s</time></div>',
		esc_attr( $align_class_name ),
		get_the_date( 'c', $block->context['postId'] ),
		$final_date
	);
}

[annezazu]

This came up in feedback as part of the fifth call for testing for the FSE Outreach Program:

can we provide an advanced option for “Format settings” which allows specifying a custom format perhaps using PHP’s date format https://www.php.net/manual/en/datetime.format.php#refsect1-datetime.format-parameters

&

Can I make the date italics? I didn’t see many text styling options for the post date.

I wanted to include it here since it seems very related :)

[andrewserong]

For formatting the date, I wonder if we can do something similar to Google Sheets to enable constructing a custom date format:

Selecting a part of the date	Customising the format of that part

Then it'd be a matter of allowing each of those to be styled separately, perhaps? They could almost be child blocks, but maybe that'd result in a little too much going on in the editor canvas.

[kjellr]

Here's another example of the sort of hyper-stylized query layout I'd like to see made possible (eventually) through post date format/style options:

(Also relevant to #34192)

[ramonjd]

#24957 is a similar issue, though it adds ideas for other Post Date block enhancements.

This could be a bit free-wheeling, with great-power comes-great-responsibility-type of stuff, but I was playing around with a free-text formatter:

Jan-21-2022.13-37-55.mp4

With the right validation and better UX, e.g., proper labels for the shortcode characters maybe...? :)

I like the idea of adding relative times, e.g., "Today or 3 days ago", as well mentioned in #24957 (comment)

[andrewserong]

but I was playing around with a free-text formatter:

Awesome idea, @ramonjd! I might be getting ahead of myself, but I think if we can use something like that as the underlying data for it (and possibly allow a toggle for folks to edit it manually for advanced users) but then build an interactive WYSIWYG behaviour on top of it, it'd be pretty cool to have a reusable component that we could use anywhere where a date is presented? Maybe a DateTimeFormatter component in the components package?

+1 adding relative times would be very cool, too 😀

[mtias]

I believe this is completed in a general sense, but feel free to reopen if there's any specific that are missing.