I have a page that displays latest posts from specific category via gutenberg's block. Now I would like to add "New" label at the top left corner on the posts' images. I found inside
wp-includes/blocks/latest-posts.php
the code for this block and add a custom hook inside of it
add_action( 'da_custom_labels', 'render_block_core_latest_posts' );
After that, I wrote inside my functions.php the function for the hook:
add_filter('da_custom_labels','da_custom_labels_sales_posts');
function da_custom_labels_sales_posts() {
echo get_post_meta( get_the_ID(), 'new_real_estate', true ); //custom field
}
I tried many different things, but all the labels appear at one row.. Sothing like this:
NewNewNewNewNewNew
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
Thus, I would like to have the "New" label inside every li and not like that, so I could apply CSS and anything else necessary.
Any ideas how I could accomplise that? Or any other work arround - solution?
thanks in advance
After some research, I could not find any proper hook or filter in order to add my own custom functions. Thus, best way to do this is by overwritting the block itself. Inside functions.php of child theme I have add the below code:
add_filter( 'register_block_type_args', 'core_latest_posts_block_type_args', 10, 3 );
function core_latest_posts_block_type_args( $args, $name ) {
if ( $name == 'core/latest-posts' ) {
$args['render_callback'] = 'modify_core_latest_posts'; //call custom gutenberg block
}
return $args;
}
function modify_core_latest_posts($attributes) { //copy and paste the block as is, but adding custom code too
global $post, $block_core_latest_posts_excerpt_length;
$args = array(
'posts_per_page' => $attributes['postsToShow'],
'post_status' => 'publish',
'order' => $attributes['order'],
'orderby' => $attributes['orderBy'],
'ignore_sticky_posts' => true,
'no_found_rows' => true,
);
$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
if ( isset( $attributes['categories'] ) ) {
$args['category__in'] = array_column( $attributes['categories'], 'id' );
}
if ( isset( $attributes['selectedAuthor'] ) ) {
$args['author'] = $attributes['selectedAuthor'];
}
$query = new WP_Query;
$recent_posts = $query->query( $args );
if ( isset( $attributes['displayFeaturedImage'] ) && $attributes['displayFeaturedImage'] ) {
update_post_thumbnail_cache( $query );
}
$list_items_markup = '';
foreach ( $recent_posts as $post ) {
$post_link = esc_url( get_permalink( $post ) );
$title = get_the_title( $post );
if ( ! $title ) {
$title = __( '(no title)' );
}
$list_items_markup .= '<li>';
$real_new = get_post_meta(get_the_ID(), 'real_new'); //get custom field - custom code adding label on images
if($real_new) {
if ($real_new[0]) {
$list_items_markup .= "<span style='position:relative;top:0;left:0;z-index:99;'>" . $real_new[0] . "</span>";
}
}
if ( $attributes['displayFeaturedImage'] && has_post_thumbnail( $post ) ) {
$image_style = '';
if ( isset( $attributes['featuredImageSizeWidth'] ) ) {
$image_style .= sprintf( 'max-width:%spx;', $attributes['featuredImageSizeWidth'] );
}
if ( isset( $attributes['featuredImageSizeHeight'] ) ) {
$image_style .= sprintf( 'max-height:%spx;', $attributes['featuredImageSizeHeight'] );
}
$image_classes = 'wp-block-latest-posts__featured-image';
if ( isset( $attributes['featuredImageAlign'] ) ) {
$image_classes .= ' align' . $attributes['featuredImageAlign'];
}
$featured_image = get_the_post_thumbnail(
$post,
$attributes['featuredImageSizeSlug'],
array(
'style' => esc_attr( $image_style ),
)
);
if ( $attributes['addLinkToFeaturedImage'] ) {
$featured_image = sprintf(
'<a href="%1$s" aria-label="%2$s">%3$s</a>',
esc_url( $post_link ),
esc_attr( $title ),
$featured_image
);
}
$list_items_markup .= sprintf(
'<div class="%1$s">%2$s</div>',
esc_attr( $image_classes ),
$featured_image
);
}
$list_items_markup .= sprintf(
'<a class="wp-block-latest-posts__post-title" href="%1$s">%2$s</a>',
esc_url( $post_link ),
$title
);
if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
$author_display_name = get_the_author_meta( 'display_name', $post->post_author );
/* translators: byline. %s: current author. */
$byline = sprintf( __( 'by %s' ), $author_display_name );
if ( ! empty( $author_display_name ) ) {
$list_items_markup .= sprintf(
'<div class="wp-block-latest-posts__post-author">%1$s</div>',
$byline
);
}
}
if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
$list_items_markup .= sprintf(
'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
esc_attr( get_the_date( 'c', $post ) ),
get_the_date( '', $post )
);
}
if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
&& isset( $attributes['displayPostContentRadio'] ) && 'excerpt' === $attributes['displayPostContentRadio'] ) {
$trimmed_excerpt = get_the_excerpt( $post );
if ( post_password_required( $post ) ) {
$trimmed_excerpt = __( 'This content is password protected.' );
}
$list_items_markup .= sprintf(
'<div class="wp-block-latest-posts__post-excerpt">%1$s</div>',
$trimmed_excerpt
);
}
if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
&& isset( $attributes['displayPostContentRadio'] ) && 'full_post' === $attributes['displayPostContentRadio'] ) {
$post_content = html_entity_decode( $post->post_content, ENT_QUOTES, get_option( 'blog_charset' ) );
if ( post_password_required( $post ) ) {
$post_content = __( 'This content is password protected.' );
}
$list_items_markup .= sprintf(
'<div class="wp-block-latest-posts__post-full-content">%1$s</div>',
wp_kses_post( $post_content )
);
}
$list_items_markup .= "</li>\n";
}
remove_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
$class = 'wp-block-latest-posts__list';
if ( isset( $attributes['postLayout'] ) && 'grid' === $attributes['postLayout'] ) {
$class .= ' is-grid';
}
if ( isset( $attributes['columns'] ) && 'grid' === $attributes['postLayout'] ) {
$class .= ' columns-' . $attributes['columns'];
}
if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
$class .= ' has-dates';
}
if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
$class .= ' has-author';
}
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
return sprintf(
'<ul %1$s>%2$s</ul>',
$wrapper_attributes,
$list_items_markup
);
}
of course, it could be done via a custom plugin for better managing and organizing your files. Hope that helps