Date block HTML is different between front and editor

[shimotmk]

What?

Date block HTML was different between front and editor, so I fixed it.

Why?

How?

Testing Instructions

1. Open a post or page.
2. Insert a post-date block.
3. View HTML

Testing Instructions for Keyboard

Screenshots or screencast

Front

Editor

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shimotmk <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: afercia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[shimotmk]

If any additional work is needed I will do it.
Can someone please review?

[Mamaduka]

Thank you, @shimotmk!

While this fixes the mentioned issue, it breaks markup for linked post-date blocks in templates. You can open a "Single Posts" template in the TT4 theme and check the markup there. Notice that the <a> tag is no longer rendered.

Maybe we should render a "dummy" <time> tag with a label when no date is available. This way, we can have the same markup everywhere.

cc @richtabor

Screenshot

[shimotmk]

Thank you for the review! @Mamaduka

It seems that the time tag was not rendered when there was no date.

Should I fix it so that it is enclosed in the time tag even when there is no date?

[Mamaduka]

Should I fix it so that it is enclosed in the time tag even when there is no date?

That seems the right way to fix the inconsistency between the editor and the front end.

@afercia, any suggestions? Asking because you've worked on similar fixes in the past.

[afercia]

Thanks for your ping. I'm probably missing something but seems to me the value of the datetime is different in the editor and on the front end. I'm testing with a timezone +05:45 set in the wp admin settings.

In the editor I get a value of 2024-09-24T15:45:00+05:45.
On the front end, I get a value of 2024-09-24T12:00:00+05:45.

[Mamaduka]

@afercia, thanks for spotting that, but the main question here is about markup matching.

When the post date is missing, the block will render a placeholder that doesn't match the frontend markup. Should we use "dummy" data (it can be a current date) and generate the correct markup?

[afercia]

Thanks @Mamaduka

Maybe we should render a "dummy" tag with a label when no date is available.
When the post date is missing

It's not clear to me what is the scenario when the date i missine. Clearer tesing instructions would have helped, Anyways, when a block is 'empty', it should not render anything on the front end. I think the only exception in Gutenberg is an empty paragraph.

To me, that is even more important for links. The editor should never render empty links on the front end. I'm not sure a dummy value would be appropriate though? To me, a block that is empty should not render any markup on the front end. I'd also like to see a consistent behavior for all empty blocks.
Similar issues:
#59560
#59996
#60467

[Mamaduka]

When the block is used in templates in the Site Editor context, the date data can be missing. Templates like Single Posts/Pages need to render a placeholder markup since no data for the actual post type is available.

So, the question is whether we should try to shim the post date, when it's unavailable for templates and make markup consistent.

The block will always render the data on the front end, so we're discussing inconsistency in the Site Editor.

Testing Instruction

1. Using TT4.
2. Open the Site Editor.
3. Navigate to Templates > Single Posts
4. Noticed that the Date block renders a placeholder text that doesn't resemble markup output on the front end.

Screenshot

[afercia]

@Mamaduka thanks for clarifying. I was misled by the PR description which mentions posts and pages.

the question is whether we should try to shim the post date, when it's unavailable for templates and make markup consistent.

Does attempting to provide an accurate preview of the date and its format is even possible? To my understanding, themes can provide their own default format for the post-date block used in templates/parts/patterns. For example, TT4 uses format":"M j, Y" in the hidden-post-meta pattern.

Is the Site editor able to get that format and correctly preview it?
Note that the format provided by the theme may be entirely different from the date format set in the wp admin.

The default format can be customized in the Inspector so any change to the format should be reflected in the editor preview.

Not ethat the 'example date' shown in the inspector is based on some logic to show a 'proper' example I'm not sure I agree with. Also, it doesn't update when changing the format.

Fianlly, the post-date can be set to show the modified date.

ideally, and only in the context of the Site editor, the block should preview a 'dummy' date that honors the format setting. Not sure that would be easy to achieve. Instead, in the context of the Post editor, I think empty placeholders should render an editing UI and not attempt to render any preview.