Product Categories List: Add show child categories only toggle

[tjcafferkey]

Add a "Only show children of current category" toggle for the Product Categories List block. This will only work on product category pages (e.g. when used on the Product Category template).

Fixes #6346

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

User Facing Testing

1. Set up product categories with children and grandchildren, making sure they have products.
2. Add the Product Categories List block to a page, and also to the Products by Category template.
3. Check that the toggle only appears when the block is used in the Site Editor (e.g. on a template)
4. Ensure that when the toggle is enabled and you're visiting a category with children, only the children are shown.
5. Make sure that if when you have the show children only toggle enabled, and you click the last child then it renders the current category instead of rendering nothing at all.
6. Ensure no regressions when using this block on posts/pages
7. Enable Classic theme such as Storefront
8. Usage the block in the widget area and check that the feature is available and works as expected and described above.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Product Categories List: Add "Show child categories only" toggle.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9550.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added	Removed
product-categories.js	wp-data		⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

• Files with errors: 467
• Total errors: 2254

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/product-categories/block.js

_{comments-aggregator}

[github-actions]

Size Change: +11.3 kB (+1%)

Total Size: 1.1 MB

Filename	Size	Change
build/active-filters-frontend.js	8.65 kB	+81 B (+1%)
build/active-filters-wrapper-frontend.js	7.61 kB	-9 B (0%)
build/active-filters.js	7.47 kB	-1 B (0%)
build/all-products-frontend.js	12 kB	+54 B (0%)
build/all-products.js	40 kB	+737 B (+2%)
build/all-reviews.js	7.85 kB	+83 B (+1%)
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	4.04 kB	-9 B (0%)
build/attribute-filter-wrapper-frontend.js	4.29 kB	+4 B (0%)
build/attribute-filter.js	13.2 kB	+53 B (0%)
build/blocks-checkout.js	35.1 kB	+7 B (0%)
build/breadcrumbs.js	2.13 kB	+88 B (+4%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.39 kB	+1 B (0%)
build/cart-blocks/cart-cross-sells-frontend.js	254 B	+1 B (0%)
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.92 kB	-20 B (-1%)
build/cart-blocks/cart-cross-sells-products-frontend.js	3.71 kB	-21 B (-1%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.17 kB	+3 B (0%)
build/cart-blocks/cart-express-payment-frontend.js	720 B	+3 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.51 kB	+1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js	1.27 kB	-2 B (0%)
build/cart-blocks/empty-cart-frontend.js	346 B	+1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB	+1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js	2.13 kB	+3 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js	17.1 kB	+113 B (+1%)
build/cart-blocks/order-summary-subtotal-frontend.js	274 B	+1 B (0%)
build/cart-frontend.js	29.9 kB	+214 B (+1%)
build/cart.js	45.1 kB	+56 B (0%)
build/checkout-blocks/actions-frontend.js	1.85 kB	-1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.7 kB	-4 B (0%)
build/checkout-blocks/billing-address-frontend.js	1.19 kB	+1 B (0%)
build/checkout-blocks/contact-information-frontend.js	2.04 kB	-2 B (0%)
build/checkout-blocks/express-payment-frontend.js	1.14 kB	+6 B (+1%)
build/checkout-blocks/fields-frontend.js	332 B	+2 B (+1%)
build/checkout-blocks/order-note-frontend.js	1.14 kB	+1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js	3.68 kB	-2 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB	+1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB	+4 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js	277 B	+1 B (0%)
build/checkout-blocks/order-summary-frontend.js	1.27 kB	-1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js	17 kB	-4 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js	274 B	+1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js	436 B	+1 B (0%)
build/checkout-blocks/payment-frontend.js	8.28 kB	-5 B (0%)
build/checkout-blocks/pickup-options-frontend.js	4.85 kB	+41 B (+1%)
build/checkout-blocks/shipping-address-frontend.js	1.17 kB	+8 B (+1%)
build/checkout-blocks/shipping-method-frontend.js	2.63 kB	+44 B (+2%)
build/checkout-blocks/shipping-methods-frontend.js	6.4 kB	+46 B (+1%)
build/checkout-blocks/totals-frontend.js	361 B	+49 B (+16%)	⚠️
build/checkout-frontend.js	32 kB	+685 B (+2%)
build/checkout.js	46.4 kB	+74 B (0%)
build/customer-account.js	3.18 kB	-1 B (0%)
build/featured-category.js	15.1 kB	+90 B (+1%)
build/featured-product.js	15.3 kB	+131 B (+1%)
build/filter-wrapper-frontend.js	14.3 kB	+71 B (0%)
build/filter-wrapper.js	2.4 kB	+1 B (0%)
build/handpicked-products.js	8.04 kB	+42 B (+1%)
build/legacy-template.js	6.46 kB	+5 B (0%)
build/mini-cart-component-frontend.js	28.5 kB	+135 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js	1.73 kB	-4 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js	1.73 kB	-5 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js	362 B	+2 B (+1%)
build/mini-cart-contents-block/filled-cart-frontend.js	267 B	+1 B (0%)
build/mini-cart-contents-block/footer-frontend.js	4.09 kB	-5 B (0%)
build/mini-cart-contents-block/products-table-frontend.js	593 B	+2 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js	526 B	-2 B (0%)
build/mini-cart-contents-block/title-frontend.js	1.9 kB	-8 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js	1.59 kB	-11 B (-1%)
build/mini-cart-contents-block/title-label-frontend.js	1.53 kB	-10 B (-1%)
build/mini-cart-contents.js	18 kB	+48 B (0%)
build/mini-cart-frontend.js	2.66 kB	+508 B (+24%)	🚨
build/mini-cart.js	4.43 kB	+80 B (+2%)
build/price-filter-wrapper-frontend.js	6.75 kB	-6 B (0%)
build/price-filter.js	8.55 kB	+75 B (+1%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	250 B	-1 B (0%)
build/product-add-to-cart.js	8.84 kB	-28 B (0%)
build/product-best-sellers.js	8.35 kB	+10 B (0%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	954 B	-9 B (-1%)
build/product-button-frontend.js	2.65 kB	-2 B (0%)
build/product-button.js	3.97 kB	-44 B (-1%)
build/product-categories.js	2.71 kB	+341 B (+14%)	⚠️
build/product-category.js	9.36 kB	+9 B (0%)
build/product-collection.js	9.89 kB	+6.51 kB (+192%)	🆘
build/product-image-frontend.js	2.62 kB	-13 B (0%)
build/product-image.js	4.14 kB	-43 B (-1%)
build/product-new.js	8.65 kB	+310 B (+4%)
build/product-on-sale.js	8.68 kB	+6 B (0%)
build/product-price.js	1.69 kB	+1 B (0%)
build/product-query.js	11.8 kB	+71 B (+1%)
build/product-rating-frontend.js	2.27 kB	-35 B (-2%)
build/product-rating.js	971 B	-28 B (-3%)
build/product-results-count.js	1.66 kB	-2 B (0%)
build/product-sale-badge-frontend.js	1.79 kB	-12 B (-1%)
build/product-sale-badge.js	665 B	-1 B (0%)
build/product-search.js	2.63 kB	-2 B (0%)
build/product-sku-frontend.js	1.84 kB	+3 B (0%)
build/product-sku.js	536 B	+1 B (0%)
build/product-stock-indicator-frontend.js	2.03 kB	+6 B (0%)
build/product-stock-indicator.js	730 B	-1 B (0%)
build/product-summary-frontend.js	2.19 kB	-4 B (0%)
build/product-tag.js	9.01 kB	+43 B (0%)
build/product-template.js	3.35 kB	+80 B (+2%)
build/product-title-frontend.js	2.21 kB	-7 B (0%)
build/product-title.js	3.66 kB	-31 B (-1%)
build/product-top-rated.js	8.91 kB	+330 B (+4%)
build/products-by-attribute.js	9.75 kB	+52 B (+1%)
build/rating-filter-frontend.js	21.4 kB	+95 B (0%)
build/rating-filter-wrapper-frontend.js	6.2 kB	-12 B (0%)
build/rating-filter.js	6.89 kB	+9 B (0%)
build/reviews-by-product.js	13.3 kB	+44 B (0%)
build/reviews-frontend.js	7.18 kB	+68 B (+1%)
build/single-product.js	11.1 kB	+59 B (+1%)
build/stock-filter-wrapper-frontend.js	2.98 kB	+3 B (0%)
build/stock-filter.js	7.61 kB	+5 B (0%)
build/store-notices.js	1.69 kB	-1 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.21 kB	-1 B (0%)
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js	5.11 kB	-1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.4 kB	+1 B (0%)
build/vendors--price-filter-wrapper-frontend.js	2.2 kB	-2 B (0%)
build/vendors--product-add-to-cart-frontend.js	7.26 kB	-1 B (0%)
build/vendors--rating-filter-wrapper-frontend.js	5.11 kB	-1 B (0%)
build/wc-blocks-data.js	22.4 kB	-162 B (-1%)
build/wc-blocks-registry.js	3.15 kB	+1 B (0%)
build/wc-blocks-style-rtl.css	27.9 kB	+38 B (0%)
build/wc-blocks-style.css	27.8 kB	+39 B (0%)
build/wc-blocks-vendors.js	65 kB	-19 B (0%)
build/wc-shipping-method-pickup-location.js	30.4 kB	+62 B (0%)

ℹ️ View Unchanged

Filename	Size
build/cart-blocks/cart-items-frontend.js	301 B
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-totals-frontend.js	308 B
build/cart-blocks/filled-cart-frontend.js	656 B
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	333 B
build/cart-blocks/order-summary-taxes-frontend.js	435 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.38 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.52 kB
build/product-price-frontend.js	203 B
build/product-summary.js	904 B
build/reviews-by-category.js	12.1 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.82 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.57 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js	8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.5 kB
build/wc-blocks-editor-style-rtl.css	5.96 kB
build/wc-blocks-editor-style.css	5.96 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks.js	3.7 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[Aljullu]

This is working as described and code changes look good. I just left some inline questions about how some things work.

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[Aljullu]

Looks good on my end, thanks for the updates!