Adding Product Categories to Query Block

Hey Gutenbergs

I am adding product taxonomy to Gutenberg Query Block: Product Categories, Product Tags and Product Attributes. Not as filters under taxonomy but as post types, so that Query can throw out a grid of product categories with a nice icon and overlay txt etc.

I have succesfully added the 3 taxonomies to the custom > post type selector like so:

// Register WooCommerce Taxonomies (Product Categories, Product Tags & Product Attributes) as Post Types for the Query Block
function draupnir_add_product_taxonomies_to_query_block() {
    // Register Product Categories as a custom post type
    register_post_type( 'product_cat', array(
        'label'             => __( 'Product Categories', 'draupnir-9' ),
        'public'            => true,
        'show_in_rest'      => true,
        'rest_base'         => 'product_cat',  // REST API endpoint
        'supports'          => array( 'title' ), // Only show the title for categories
        'show_in_graphql'   => true,
        'has_archive'       => false,
        'show_ui'           => true,
    ));

    // Register Product Tags as a custom post type
    register_post_type( 'product_tag', array(
        'label'             => __( 'Product Tags', 'draupnir-9' ),
        'public'            => true,
        'show_in_rest'      => true,
        'rest_base'         => 'product_tag',  // REST API endpoint
        'supports'          => array( 'title' ), // Only show the title for tags
        'show_in_graphql'   => true,
        'has_archive'       => false,
        'show_ui'           => true,
    ));

    // Register Product Attributes as custom post types (for all attribute terms)
    register_post_type( 'pa_*', array(
        'label'             => __( 'Product Attributes', 'draupnir-9' ),
        'public'            => true,
        'show_in_rest'      => true,
        'rest_base'         => 'pa_*',  // REST API endpoint
        'supports'          => array( 'title' ),
        'show_in_graphql'   => true,
        'has_archive'       => false,
        'show_ui'           => true,
    ));
}
add_action( 'init', 'draupnir_add_product_taxonomies_to_query_block' );

Now I need to loop toplevel if no filters are set and then filter/select fx a category as top level to filter children cats. Here I try to add taxonomy filter, which does not happen. Why?

// Add taxonomy filters to the Query Block in the Full Site Editor
function draupnir_add_taxonomy_filters_to_query_block( $settings ) {
    // Check if we are in the block editor (FSE)
    if ( isset( $settings['core/query'] ) ) {
        // Add support for taxonomy filters for product categories, product tags, and attributes
        $settings['core/query']['supports']['filters'] = array(
            'taxonomy' => array(
                'product_cat'  => __( 'Product Categories', 'draupnir-9' ),
                'product_tag'  => __( 'Product Tags', 'draupnir-9' ),
                'pa_*'         => __( 'Product Attributes', 'draupnir-9' ),
            ),
        );
    }
    return $settings;
}
add_filter( 'block_editor_settings_all', 'draupnir_add_taxonomy_filters_to_query_block' );

Finally I try to get top level categories if no filters are set….

// Filter the query for top-level product categories when no filters are applied
function draupnir_set_default_category_query( $query_args, $block_instance ) {
    // Only apply this filter to the Query Block for Product Categories
    if ( isset( $block_instance['post_type'] ) && 'product_cat' === $block_instance['post_type'] ) {
        // If no filters are set, return top-level categories
        if ( empty( $block_instance['filters'] ) ) {
            // Set the parent parameter to 0 to get top-level categories
            $query_args['tax_query'] = array(
                array(
                    'taxonomy' => 'product_cat',
                    'field'    => 'id',
                    'terms'    => 0, // Parent 0 for top-level categories
                    'operator' => 'IN',
                ),
            );
        } elseif ( isset( $block_instance['filters']['product_cat'] ) ) {
            // If a specific category filter is selected, make sure the parent category is included
            $query_args['tax_query'][] = array(
                'taxonomy' => 'product_cat',
                'field'    => 'id',
                'terms'    => $block_instance['filters']['product_cat'],
                'operator' => 'IN',
            );
        }
    }

    return $query_args;
}
add_filter( 'block_query_args', 'draupnir_set_default_category_query', 10, 2 );

• draupnir is the name of my child theme

Can anyone give me advice on how to get this further?

• Tax is available in selector
• Under filters taxonomy does not show
• Nothing is actually queried, result is empty
• I should be able to select category by name, once category is selected, this I cannot

Wishlist:

How can I make image size/res selectible in the settings panel of editor. I would prefer if this was default wordpress, rather than the woo formats (Original, 4:3, 3:4, 3:2, 2:3 etc). I hope that makes sense 🙂

How can we push this to core? Should it go in woo or go in Gutenberg?