The standard Lorem Ipsum passage, used since the 1500s

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Section 1.10.32 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”

EN NL

Filter Core/latest-posts block and add read more button [updated]

The WordPress core Gutenberg block are very useful but don’t provide us with all our visual or functional needs. An example is the Core Latest Posts block.

Wordpress Latest Post Block In Post Editor
WordPress Latest Post Block In Post Editor

You can choose the block and define what you want to see in the Block settings in the right sidebar.

Wordpress Latest Post Block Settings
WordPress Latest Post Block Settings

The result on the front-end can look like this if you have chosen list view.

Wordpress Latest Post Block Visible In Post Editor
WordPress Latest Post Block Visible In Post Editor

There are multiple things missing. In this post we deal with the following issues:

  1. A “Read more” link / button is missing
  2. Only the Post Title is clickable.

A “Read more” link / button is missing in Latest Post block

The “Read more” button isn’t actually missing! It will show up depending on the amount of words you have chosen to display in the “Max number of words in excerpt” block setting. If there are more words in your post than in your excerpt setting. A “Read more” link appears beneath the excerpt. OK, this is good behavior. But when you have a post with little text and other content like images, or you use an excerpt with a substantial amount of words: The “Read more” link won’t appear. This doesn’t provide a consistent visual user interface.

Wordpress Latest Post Block Visible In Post Editor With Read More
WordPress Latest Post Block Visible In Post Editor With Read More

After some testing it seems I am on the wrong track! The “Read more” link is only visible in the Admin and not visible in the front-end.
I checked the core/latest-posts code and it is not capable op doing this natively.

How do you consistently display a “Read more” button in the core Latest Posts block?

There is a way to show a “Read more” button at the bottom of the Latest Posts block by adding this function to your theme’s functions.php.

/**
Filter core latest posts block output to add read more button
*/
function edit_latest_posts_block( $block_content, $block ) {
if ( 'core/latest-posts' === $block['blockName'] ) {
$content = str_replace('</div></li>',</div><button type="button">Read more</button></li>, $block_content);
return $content;
}
return $block_content;
}
add_filter( 'render_block', 'edit_latest_posts_block', 10, 2 );

There is a drawback: this function edits the final content of the block but is unable to add the URL to the button. The URL is unavailable in the json $block[attributes]. This renders the button useless unless you also use the following setting in your theme style.css

Make the full Core Latest Post Block clickable

The CSS edits the surface of range of the <a> link from the post title to the full boundaries of a Latest Post Block. This CSS also solves issue number 2. Only the Post Title is clickable and enables click behavior on the “Read more” button.

.wp-block-latest-posts li { 
position: relative;
}
.wp-block-latest-posts li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Suggested solution

Someone suggested adding the “Read more” link to the excerpt. The following code adds the “Read more” link to the excerpt and shows the link in the Lates post block. This solution will also show the read more link everywhere an excerpt is displayed!

/**
Changing excerpt more
*/
function edit_excerpt_more($more) {
global $post;
return '… <a href="'.get_permalink($post->ID).'">'.Read More.'</a>';
}
add_filter('excerpt_more', 'edit_excerpt_more');

Update

If you are a Gutenberg plugin user additional to WordPress 5.5+ than you will see an additional option in the Lates Post block settings: “Add link to featured image”. This setting will probably propagate to a later version of WordPress.

Wordpress Latest Post Block Featured Image Settings
WordPress Latest Post Block Featured Image Settings

Leave a Reply