Add Custom Labels to gutenberg latest posts block

Question

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

Answer 1

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

Answer 2

a good Alternative is the Query Loop Block (see https://wordpress.org/documentation/article/query-loop-block/). It is called a "a more complex and powerful Latest Posts Block".

With the Query Loop Block you can customize the post template which is used within the query block.

I think in this way you can add code to your latest posts at least with shortcodes.

Good look :)