In the Twenty Seventeen theme the Search results can display multiple post types. It was only when I was creating the Search results template for the wp-pompey-blocks theme that I realised that the post date wasn’t being displayed for hierarchical post types.
How can this same solution be implemented in block based themes?
Post date and modified date examples
Here’s an example of the “post date” block for this post.
Were this post to appear in search results then it would make sense to display either this date, or the post modified date
or both
Written on:
Last modified:
Post date for hierarchical post types
For hierarchical post types such as Page, most people wouldn’t necessarily display the post or modified date unless the page content is something that might be expected to change over time.
Examples where I display both the Published and Last Updated dates include my documentation for: plugins, plugins versions, blocks, block examples, shortcodes, shortcode examples, etc..
An example where a different date to that of the post date is displayed is for Events.
WordPress’s default behaviour is that it doesn’t display content that is scheduled for the future.
In order to display an Event that occurs in the future it must have been published on the date before the event, and have information about the Event start and end recorded separately. eg in post meta data.
The core query block doesn’t support meta queries. The Advanced Query Block plugin helps overcome some of the limitations.
How to NOT display the post date in a generic template
So, assuming we’ve decided we don’t want to display the post date for hierarchical post types but do for chronological post types how can this be achieved?
I’ve watched a couple of videos and read some posts on the subject.
There are 3 flexible solutions that allow the post date to be displayed for some post types and not for others.
- Custom CSS
- Custom PHP code
- Use the Block Visibility plugin
Custom CSS
Here’s some custom CSS that adjusts the size of the date field using a classname of hoverme
.hoverme { font-size:1px; line-height: 20px; }
.hoverme:hover { font-size: 20px; transition: all 2s ease-out;}Here’s some CSS that hides the date for pages by making it white on white.
Recent pages
li.page div.wp-block-post-date { color: white; }
li.page div.wp-block-post-date:hover { color: inherit; transition: all 2s ease-out;}
Custom PHP code
The Twenty Seventeen theme uses custom PHP code inside content template part ( template-parts/post/content.php )
When the post type of the current post is post then it displays the post date, with a link to the post.
For a block based theme we’d have to write some custom PHP to alter the behaviour of the core/post-date block.
One option is implement the render_block filter for the post-date block
add_filter( 'render_block_core/post-date', 'mytheme_render_block_core_postdate', 10, 3, );
We’ll leave that as an exercise for the reader; there’s an easier solution…
Using the Block Visibility plugin
The Block Visibility plugin is a rather powerful single block plugin to Conditionally Control Visibility for the Block Editor.
It works in the Site editor as well.
For the selected block
- Use Settings Visibility to display the Controls selection list
- Choose Location
- In the Rule Set section select the required values from the drop downs.
- Post Type
- is any of the selected
- Post
In the editor, when the block is not selected it is highlighted with a blue dotted border and a marker icon.
