Add product attribute to Woocommerce's blocks in Gutenberg

Question

Edit:

Where are the Woocommerce blocks located in Woocommerce code on Github? Answer:

As the answer underneath mentions the Woocommerce Block is a package so it is not shown on Github for the Woocommerce library but is called from: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/master/assets/js/blocks

---

If you search for adding custom attributes for Woocommerce Blocks you find a lot of WordPress examples for this.

For example this, where the answer points out, that you can add attributes by using the blocks.registerBlockType. But how to do this for Woocommerce Blocks?

I want to be able to add a data field to the HTML output. The data field should then call a product attribute and show, if it exists.

So when you use the Woocommerce Blocks on your front page - for example the size will be shown underneath the add to cart button - as in the image.

As you might know the functionality of showing/hiding the price, add-to-cart-button, reviews are already there, when you choose a Woocommerce Block on the editing site.

But i havent't found the place where this functionality is created.

This would also be a great help actually - if you could show me where in the Woocommerce Github library the blocks are beying created. Maybe i can figure out my self how to filter through them and add the funcionality

I know - based on a Udemy course - how to create a custom plugin and create a new blog-type, save and edit.

But i need to figure out what Woocommerce namespace is, how they create their blocks, and what their data is called. The Woocommerce developer handbook is not saying anything about this - not what i've found.

I've been searching the internet for three days now, and I just don't understand that i can't seem to find ANYTHING on this. That nobody else wants to customize this functionality in Woocommerce. I know it is a new function (blocks) in the core, but still.

I just need to be pointed in the right direction.

Answer 1

As the blocks more more and more to front-end rendering... there's only one filter that I've been able to find for modifying the output of the blocks via PHP. woocommerce_blocks_product_grid_item_html and I'm not even sure if that will work on the All Products block which may/may not use the same code as the other products list blocks.

Here's an example that 1. removes the link and 2. adds the product's short description:

/**
 * Add short descriptions
 *
 * @param string $html
 * @param object $data
 * @param WC_Product $product
 * @return string
 */
function kia_blocks_product_grid_item_html( $html, $data, $product ) {
    $short_description = $product->get_short_description() ? '<div class="wp-block-grid__short-description">' . wc_format_content( $product->get_short_description() ) . ' </div>' : '';

    return 
        "<li class=\"wc-block-grid__product\">
            {$data->image}
            {$data->title}
            {$data->badge}
            {$data->price}
            {$data->rating}" .

            $short_description

            . "{$data->button}
        </li>";
}
add_filter( 'woocommerce_blocks_product_grid_item_html', 'kia_blocks_product_grid_item_html', 10, 3 );

Answer 2

Woocommerce blocks are located at woocommerce/packages/woocommerce-blocks/assets/js/blocks.

An example of how woocommerce registers the best-selling products block:

registerBlockType( 'woocommerce/product-best-sellers', {
    ...
} );

As you can see, the namespace is just woocommerce.

I didn't understand what you want to achieve with the custom data field. Could you explain it better?