如何覆盖新的古腾堡产品循环块标记

Question

最近更新了 WP 和插件。我在古腾堡编辑器中的“按类别划分的产品”块现在呈现非常不同。

经过一番挖掘，现在看来WGPB_Block_Grid_Base render和render-product函数正在定义内容的外观。这忽略了我之前针对此块存在的大部分自定义操作和标记工作。

这是一种完全不同的动物，看着它我什至不知道从哪里开始。有一个过滤器直接应用于过滤器应用内的标记内联：

    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
    );

有没有一种简单的方法来覆盖他们正在使用的模板？或者我基本上坚持编写我自己的整个古腾堡块插件来让它回到原来的位置？

Answer 1

我们想更改添加到购物车按钮的位置和产品名称，并为缩略图添加一个包装器，因此我们在函数中使用一些自定义标记修改了输出...

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);