My first Gutenberg blocks! They output the published date and last modified date for your posts, with the option to add a label.
You can see them live in action here:
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
getEditedPostAttributeand 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 founddateandmodified
06 March 2022: Feedback from George
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