What?

This is a first attempt at storing data in rich text with dynamic replacement both in rich text and server side. For this, we will use the <data> HTML tag since it fits semantically and doesn't have any default styling. The full syntax will be:

<data value="namespace/name" data-attribute1="value1" ...>Fallback, HTML data, or placeholder</data>

We will use the dataset as attributes and the HTML content can be used as the implementor sees fit.

Use case: current year

In templates, it's useful to display the current year in the footer for example. This can now be done with the core/current-year format type. On insertion, a data tag will be injected into rich text:

<data value="core/current-year"></data>

The format type's render function will be called to render the contents. When serialising the HTML, the format type's saveFallback function will be called. In this case it's both the same:

const year = dateI18n( 'Y', new Date() );
return <time dateTime={ year }>{ year }</time>;

So the content that will be stored in the post is:

<data value="core/current-year"><time datetime="2023">2023</time></data>

If for some reason the PHP display filters don't run, the year will render fine, though of course not the current year. In this case a fallback is perhaps not needed because this dynamic content will most likely only be used in templates, but it might be useful for other types of content.

Now on the PHP side, there's a helper function replaceDataByType.

add_filter(
	'render_block',
	function( $block_content ) {
		return replaceDataByType(
			$block_content,
			'core/current-year',
			function() {
				return '<time datetime=' . date( 'Y' ) . '>' . date( 'Y' ) . '</time>';
			}
		);
	}
);

Use case: post meta, e.g. date

We can handle the post date similarly, but the case is a bit more interesting because it allows attributes.

<data value="core/current-year" data-display-type="modified" data-format="F j, Y g:i a"></data>

On top of that, we need post meta data. This will be the render function:

function Render( { attributes: { format, displayType } } )
	const { postId, postType: postTypeSlug } = useContext();
	const [ date ] = useEntityProp(
		'postType',
		postTypeSlug,
		displayType,
		postId
	);
	const [ siteFormat ] = useEntityProp(
		'root',
		'site',
		'date_format'
	);
	return (
		<time dateTime={ dateI18n( 'c', date ) }>
			{ dateI18n( format || siteFormat, date ) }
		</time>
	);
}

In this case, if we don't provide a fallback function, only the data tag will be saved without any content (<data value="core/current-year" data-display-type="modified" data-format="F j, Y g:i a"></data>).

And now again in PHP:

add_filter(
	'render_block',
	function( $block_content, $block ) {
		return replaceDataByType(
			$block_content,
			'core/post-date',
			function( $attributes ) use ( $block ) {
				$post_ID = $block->context['postId'];
				return '<time datetime=' . esc_attr( get_the_modified_date( 'c', $post_ID ) ) . '>' . get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID ); . '</time>';
			}
		);
	}
);

But here is the interesting thing: if I create a pattern, I can use the content of the data tag as a placeholder. This means that if my pattern is viewed somewhere outside of context, you'll be able to see the placeholder. When you copy the pattern over to your site, that placeholder will disappear and be replaced.

Use case: footnotes

We can use this API for footnotes too. More on that here: https://github.com/WordPress/gutenberg/pull/47682/files

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast