How to override new Gutenberg product loop block markup

Question

Recently updated WP and plugins. The "Products by Category" block I had in the Gutenberg editor are now rendered very differently.

After quite some digging, it appears that the WGPB_Block_Grid_Base render and render-product functions are now defining the appearance of the content. This is ignoring much of my custom action and markup work present before now for this block.

This is a completely different animal, looking at it I'm not even sure where to begin. There's a filter applying directly to markup inline inside filter apply:

    return apply_filters(
        'woocommerce_blocks_product_grid_item_html',
        "<li class=\"wc-block-grid__product\">
            <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
                {$data->image}
                {$data->title}
            </a>
            {$data->price}
            {$data->badge}
            {$data->rating}
            {$data->button}
        </li>",
        $data,
        $product
    );

Is there an easy way to override the templates they're using? Or am I basically stuck writing my own entire Gutenberg block plugin to get this back to where it was?

Answer 1

We wanted to change the position of the add-to-cart button and product name and add a wrapper for the thumbnail so we modified the output with some custom markup in a function like so...

function my_product_block( $html, $data, $product ) {
    $html = '<li class="wc-block-grid__product">
        <div class="image-wrap">
            <a href="' . $data->permalink . '" class="wc-block-grid__product-link">' . $data->image . '</a>
            ' . $data->button . '
        </div>
        <h3><a href="' . $data->permalink . '">' . $data->title . '</a></h3>
        ' . $data->badge . '
        ' . $data->price . '
        ' . $data->rating . '
    </li>';
    return $html;
}
add_filter( 'woocommerce_blocks_product_grid_item_html', 'my_product_block', 10, 3);

Answer 2

function my_product_block( $html, $data, $product ) {
    global $product;
    $newness_days = 30;
    $html = '<li class="wc-block-grid__product">';
    if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created) {
    $html .= '<div class="image-wrap"><span class="itsnew">' . esc_html__( 'New!', 'woocommerce' ) . '</span>
            </div>
        <h3><a href="' . $data->permalink . '">' . $data->title . '</a></h3>
        ' . $data->badge . '
        ' . $data->price . '
        ' . $data->rating . '
    ';
    }
    else
    {
        $html .= '<div class="image-wrap">
        <h3><a href="' . $data->permalink . '">' . $data->title . '</a></h3>
        ' . $data->badge . '
        ' . $data->price . '
        ' . $data->rating . '
    ';
    }
    $html .= '</li>';
    return $html;
}
add_filter( 'woocommerce_blocks_product_grid_item_html', 'my_product_block', 10, 3);