Agregar atributo de producto a los bloques de Woocommerce en Gutenberg

EDITAR I: He encontrado el archivo donde el antiguo complemento Woocommerce Blocks establece los bloques: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/master/src/BlockTypes/FeaturedCategory.php Pero, ¿dónde está en la biblioteca de Woocommerce?

EDIT II: Pregunta en resumen:

¿Cómo se personalizan los bloques de Woocommerce para mostrar más datos que la funcionalidad integrada?

————- antecedentes ————

Si busca agregar atributos personalizados para Woocommerce Blocks, encontrará muchos ejemplos de WordPress para esto.

Por ejemplo, estedonde la respuesta señala, que puede agregar atributos usando el blocks.registerBlockType. Pero, ¿cómo hacer esto para Woocommerce Blocks?

Quiero poder agregar un campo de datos a la salida HTML. El campo de datos debe llamar a un atributo de producto y mostrar si existe.

Entonces, cuando usa Woocommerce Blocks en su página principal, por ejemplo, el tamaño se mostrará debajo del botón Agregar al carrito, como en la imagen.

Como sabrá, la funcionalidad de mostrar/ocultar el precio, el botón Agregar al carrito, las revisiones ya están allí, cuando elige un bloque de Woocommerce en el sitio de edición.

Pero no he encontrado el lugar donde se crea esta funcionalidad.

Esto también sería de gran ayuda en realidad, si pudieras mostrarme dónde en la biblioteca Woocommerce Github los bloques se están creando. Tal vez pueda descubrir por mí mismo cómo filtrarlos y agregar la funcionalidad.

Sé, según un curso de Udemy, cómo crear un complemento personalizado y crear un nuevo tipo de blog, guardar y editar.

Pero necesito averiguar qué es el espacio de nombres de Woocommerce, cómo crean sus bloques y cómo se llaman sus datos. El manual para desarrolladores de Woocommerce no dice nada sobre esto, no es lo que he encontrado.

He estado buscando en Internet durante tres días, y simplemente no entiendo que parece que no puedo encontrar NADA sobre esto. Que nadie más quiera personalizar esta funcionalidad en Woocommerce. Sé que es una nueva función (bloques) en el núcleo, pero aún así.

Solo necesito que me apunten en la dirección correcta.

Estaba lidiando exactamente con el mismo problema que usted y encontré la respuesta investigando profundamente en el repositorio de complementos de bloques de WC.

Descubrí que tienes que aplicar un filtro a este gancho: woocommerce_blocks_product_grid_item_html

El HTML original es este:

<li class="wc-block-grid__product">
        <a href="{$data->permalink}" class="wc-block-grid__product-link">
            {$data->image}
            {$data->title}
        </a>
        {$data->badge}
        {$data->price}
        {$data->rating}
        {$data->button}
</li>

De esa manera, puede filtrar el código html y modificarlo agregando este fragmento de código a su functions.php y personalizándolo para que se ajuste a sus necesidades

function wc_add_date_to_gutenberg_block( $html, $data, $product ) {
    $dateStr = get_post_meta($product->get_id(), 'ticket_start_time', true);
    $date = new DateTime($dateStr);
    $data->date = "<p>Date: " . $date->format('d-m-Y H:i') . "</p>";
    $output = "
<li class=\"wc-block-grid__product\">
        <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
            {$data->image}
            {$data->title}
        </a>
        {$data->date} <- I added this one
        {$data->badge}
        {$data->price}
        {$data->rating}
        {$data->button}
</li>
    ";

    return $output;
}

add_filter("woocommerce_blocks_product_grid_item_html", "wc_add_date_to_gutenberg_block", 10, 3);

No tengo muy claro lo que preguntas. Hace referencia a Gutenberg Blocks a menudo, pero se ha vinculado a un repositorio de WooCommerce que no tiene ningún Gutenberg Blocks.

Pero si te entiendo correctamente, estás buscando la plantilla de PHP que controla los productos. Puedes encontrar en content-product.php

Verás muchas llamadas a do_action que es el núcleo de los ganchos de WordPress como se usa en desarrollo de complementos.

<li <?php wc_product_class( '', $product ); ?>>
    <?php
    /**
     * Hook: woocommerce_before_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_open - 10
     */
    do_action( 'woocommerce_before_shop_loop_item' );

    /**
     * Hook: woocommerce_before_shop_loop_item_title.
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
    do_action( 'woocommerce_before_shop_loop_item_title' );

    /**
     * Hook: woocommerce_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    do_action( 'woocommerce_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_rating - 5
     * @hooked woocommerce_template_loop_price - 10
     */
    do_action( 'woocommerce_after_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_close - 5
     * @hooked woocommerce_template_loop_add_to_cart - 10
     */
    do_action( 'woocommerce_after_shop_loop_item' );
    ?>
</li>

Si realiza una búsqueda de los ganchos de acción definidos en content-product.phplos encontrará definidos en wc-template-hooks.php. Los ganchos son acciones con nombre a las que se agregan funciones. Por ejemplo, si miras en el woocommerce_after_shop_loop_item acción, encontrará estas dos funciones adjuntas.

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

los woocommerce_template_loop_product_link_close y woocommerce_template_loop_add_to_cart Las funciones se definen en wc-template-functions.php

Podrías crear una completamente nueva content-product.php archivo en su tema creando un archivo en yourtheme/woocommerce/content-product.phpsin embargo, perderá gran parte de la potencia y la compatibilidad integradas de WooCommerce.

Sería mejor eliminar y luego agregar nuevas acciones al woocommerce_after_shop_loop_item gancho. Por ejemplo, woocommerce_template_loop_product_link_close actualmente se define como:

function woocommerce_template_loop_product_link_close() {
    echo '</a>';
}

Puede sobrescribir esto haciendo esto en su functions.php expediente:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );

function custom_template_loop_product_link_close() {
    echo 'Hello world!</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_template_loop_product_link_close', 5 );

Espero que esto ayude.