Meta Dates Blocks

My first Gutenberg blocks! They output the published date and last modified date for your posts, with the option to add a label.

GitHub – cagrimmett/meta-dates-blocks: WordPress blocks to output published and last updated dates

WordPress blocks to output published and last updated dates – GitHub – cagrimmett/meta-dates-blocks: WordPress blocks to output published and last updated dates

github.com

You can see them live in action here:

Created: 5 March 2022

Last updated: 5 March 2022

I used George Stephanis’s Your First Block gist as a guide instead of some of the more complex starters out there since it is stripped down and helped me get the hang of how it works. The two blocks I made output a post’s published date and last modified date with an optional editable label in the sidebar. I know the Gutenberg plugin already has a Post Date block with more options, but this simple use case was a good way for me to wrap my head around how to create blocks, query the WordPress database using JavaScript rather than PHP, and manipulate/output data with blocks.

Good news: The blocks work in regular pages and posts.

Bad news: They way I’m pulling the date attributes doesn’t seem to work with FSE templates, returning NaN undefined NaN, and I haven’t figured it out yet. As soon as I figure that out, I plan to use these blocks in my digital garden so that it is easy to tell if a particular note is being tended to or not.

Other resources that I used to figure this out:

https://github.com/WordPress/gutenberg-examples

https://developer.wordpress.org/block-editor/reference-guides/data/

https://developer.wordpress.org/block-editor/reference-guides/components/text-control/

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/

https://wholesomecode.ltd/getpostmeta-wordpress-block-editor-gutenberg-equivalent-is-geteditedpostattributemeta

This helped me figure out getEditedPostAttribute and that I could dig around in the console in the post editor to see all of the attributes I could access, which is how I found date and modified

06 March 2022: Feedback from George

So looking at it, it writes the "last modified date of the current post" into the post content, and then you save the post. If you later edit the post without modifying the block, that string wouldn't change. You'd be better off if you could insert a token for a dynamic block.
— george ﬆephanis toots on mastodon (@daljo628) March 6, 2022

The relevant Handbook page: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/

On the FSE problem, might be worth seeing how the Gutenberg plugin’s post date handles fetching the data: https://github.com/WordPress/gutenberg/blob/8001881edc6236959bd83e3e8b1b47fd0bb967c7/packages/block-library/src/post-date/edit.js