[Resolved] Read time for a blog post

Hi there,

What’s the exact code you are using currently?

You are using dynamic content template for the blog page, and block element page hero for the single post, neither of them using the default theme meta.

So the code won’t work on your site.

Give this one a try:

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    return $time . ' minutes';
}

add_filter( 'generate_dynamic_element_text', function( $post_date, $block ){
	if ( 'post-date' === $block['attrs']['gpDynamicTextType'] ) {
		$post_date .= '<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>';
	} 
	return $post_date;
},15,2);

It’s better to add an additional CSS to the published date headline block in both block elements, for example: date-reading.
https://wordpress.com/support/adding-additional-css-classes-to-blocks/

Then we can use this CSS for blog and archive:

@media (min-width: 769px) {
    .blog .dynamic-content-template .gb-headline.date-reading, .archive .dynamic-content-template .gb-headline.date-reading{
         display: flex;
    }
    .blog .read-time, .archive .read-time {
        padding-left: 11px;
    }
}

For single post:

.single-post .gb-container.inline-post-meta-area .gb-headline.date-reading {
    display: flex;
}
.single-post .read-time {
    padding-left: 10px;
}

The additional CSS class has been added to the Container block, not the Headline block, can you confirm?

It’s better to add an additional CSS to the published date headline block in both block elements, for example: date-reading.

I mean add the class to the headlineblock, NOT the containerblock.

To add the•, you can simply modify this line:
<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>

to this:
<div class="read-time"><span class="gp-icon">•</span>Reading time: ' . tu_estimated_reading_time() . '</div>

Then add this CSS to match the spacing:

.read-time span.gp-icon {
    padding: 0 0.5em 0 0;
}

To add after the author name we have to start from the beginning again, try this PHP code instead:

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    return $time . ' minutes';
}

add_filter( 'generate_dynamic_element_text', function( $post_author, $block ){
	if ( 'post-author' === $block['attrs']['gpDynamicTextType'] ) {
		$post_author .= '<div class="read-time"><span class="gp-icon">•</span>Reading time: ' . tu_estimated_reading_time() . '</div>';
	} 
	return $post_author;
},15,2);

And the additional CSS class need to be added to the author name headline block instead.