Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Implement the Block Hooks API to automatically inject the Mini-Cart block #11745

Merged
merged 12 commits into from
Dec 4, 2023

Conversation

nerrad
Copy link
Contributor

@nerrad nerrad commented Nov 10, 2023

What

WordPress 6.4 included a new Block Hooks API that makes it possible for us to automatically inject Woo Blocks into content. This is very useful for blocks like the Mini-Cart block where we want it to be automatically available in header template parts and patterns when WooCommerce is activated.

While for the most part the API works as advertised. However, there are a couple caveats that need to be addressed before we can roll this out more widely (and remove our included patterns/template parts for the header):

WP_Block_Template context limitations

When an instance of WP_Block_Template is provided (for template part and template context), the $content property is null. Without the serialized template content, doing finer-grained restrictions based on that content is not possible.

An example of where this is problematic is when an active block theme includes custom template parts or templates with the mini-cart block already present, there is no way to prevent auto-injection and the content would end up with two instances of the block.

An example where this surfaces:

CleanShot 2023-11-10 at 15 33 37@2x

I've submitted a fix for this here.

As a workaround until the above fix is in place, I've implemented opt-in handling for themes via a filter and the only theme this functionality will support out of the box is Twenty Twenty-Four which appears to work okay with auto-injection.

Lack of control over layouts where the block is injected.

In some cases, a pattern or a template part might not have the anchor block (in this case core/navigation) wrapped in a container which is responsive. This means that when the mini-cart block is injected, it's default behaviour is not great. A couple examples (from patterns included with a block theme):

CleanShot 2023-11-10 at 15 34 06@2x

As a workaround, this is being restricted via the filter added for opt-in theme application as well as another filter for excluding patterns by slug. Block themes (or hosts) that want to work great with Woo can use these two filters to fine-tune the auto-injection, at least until improvements are made to the Block Hooks API that allows for more programmatic fine-tuning in Woo.

Using a better default for Mini-Cart block

This PR changes the default of the Mini-Cart block to be just the icon instead of the icon plus the total value of items in the cart. The reason for this is two-fold:

  • Currently, the Block Hook API does not allow for customizing the attributes of the injected block.
  • Having the total value of items in the cart displayed as a default increases the risk of layout issues when the block is injected.

Auto-injection does not work for customized template parts, templates or custom patterns.

This is by design with the initial iteration of the Block Hooks API. However, this could change in the future so we'll have to watch for this and adjust.

Testing Instructions

Currently, the application of this auto-injection only applies when Twenty Twenty-Four is active. In future iterations, we can expand the list of themes this supports as we test this out and/or eventually remove the restrictions once the Block Hooks API has more support.

General expectations for testing:

  • The mini-cart block should only appear after the navigation block in header patterns or template parts.
  • It should not appear in custom patterns or template parts.
  • It should only be auto-injected when the Twenty Twenty-Four theme is active.
  • You should never see two mini-cart blocks in a header pattern or template part (for example WooCommerce header patterns should be untouched).
  • If the mini-cart block is moved or removed and the template part/pattern/template is saved, that should persist and not change on reload.
  • The auto-injection should be reflected on the frontend.

With TT4 active

  • First test without these changes and take note of header template parts and patterns that don't have the mini-cart block (via the site editor).
  • With this work enabled, verify that header template parts and patterns have the mini-cart block injected (see GIFs below for expectations).

This is how things look before this PR's changes:

CleanShot.2023-11-10.at.16.00.38.mp4

And how things look after:

CleanShot.2023-11-10.at.16.03.19.mp4
  • Validate the general expectations and verify they are true.

Developer Testing

Verify that:

  • woocommerce_blocks_mini_cart_auto_insert_pattern_exclude_list filter works as expected for excluding auto-injection on a specific pattern slug (it'd have to be a pattern that would normally match the conditions).
  • woocommerce_blocks_mini_cart_auto_insert_theme_include_list filter works as expected for specific themes that are active as named in the array.

  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a UI change and has been cross-browser tested at different viewport sizes on both the frontend and in the editor.
  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Next Steps

Some potential next steps after this PR is merged:

  • Test with other WP default block themes (TT3, TT2) and see how this works with those themes, if it's good, then we can update the inclusion array for the theme.
  • Validate this for other themes available on Woo Express. The filters can probably be used to fine-tune things there.
  • This should aid with population of header patterns in the assembler so we can remove inclusion of Woo specific patterns.
  • Look at implementing this for the Customer Block as well, when that happens, it will be useful to abstract some of this code (maybe at theAbstractBlock level?) to make it easier to roll out auto-injection for various Woo Blocks.
  • Participate in improvements to the Block Hooks API in WP so we can eventually remove these escape hatches!

Changelog

The Block Hooks API is implemented to auto-inject the Mini-Cart block in header patterns and template parts when the "Twenty Twenty-Four" theme is active. The Mini-Cart block also now defaults to not show the total for the items in the cart when inserted into content.

@nerrad nerrad added type: enhancement The issue is a request for an enhancement. block: mini-cart Issues related to the Mini-Cart block. labels Nov 10, 2023
@nerrad nerrad self-assigned this Nov 10, 2023
Copy link
Contributor

github-actions bot commented Nov 10, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 562
  • Total errors: 2350

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

Copy link
Contributor

github-actions bot commented Nov 10, 2023

Size Change: +3 B (0%)

Total Size: 1.53 MB

Filename Size Change
build/mini-cart-component-frontend.js 30.8 kB +1 B (0%)
build/mini-cart.js 6.1 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/1639-frontend.js 28.1 kB
build/3810-frontend.js 18.3 kB
build/active-filters-frontend.js 6.71 kB
build/active-filters-rtl.css 1.68 kB
build/active-filters-wrapper-frontend.js 6.91 kB
build/active-filters-wrapper-rtl.css 1.53 kB
build/active-filters-wrapper.css 1.53 kB
build/active-filters.css 1.68 kB
build/active-filters.js 6.06 kB
build/add-to-cart-form-rtl.css 444 B
build/add-to-cart-form.css 444 B
build/all-products-frontend.js 9.41 kB
build/all-products-rtl.css 3.83 kB
build/all-products.css 3.83 kB
build/all-products.js 34 kB
build/all-reviews-rtl.css 1.75 kB
build/all-reviews.css 1.75 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 19.9 kB
build/attribute-filter-rtl.css 4.03 kB
build/attribute-filter-wrapper-frontend.js 21.1 kB
build/attribute-filter-wrapper-rtl.css 3.89 kB
build/attribute-filter-wrapper.css 3.88 kB
build/attribute-filter.css 4.01 kB
build/attribute-filter.js 11.3 kB
build/blocks-checkout.js 33.7 kB
build/blocks-components.js 32.6 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 267 B
build/cart-blocks/cart-cross-sells-products-frontend.js 5.56 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.38 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 281 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 9.24 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-order-summary-frontend.js 16.3 kB
build/cart-blocks/cart-order-summary-style.js 339 B
build/cart-blocks/cart-totals-frontend.js 296 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 376 B
build/cart-blocks/empty-cart-style.js 375 B
build/cart-blocks/filled-cart-frontend.js 614 B
build/cart-blocks/filled-cart-style.js 332 B
build/cart-blocks/order-summary-coupon-form-frontend.js 16.7 kB
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-frontend.js 16.7 kB
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 347 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-frontend.js 16.3 kB
build/cart-blocks/order-summary-shipping-style.js 154 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 454 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.64 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29 kB
build/cart-rtl.css 9.2 kB
build/cart.css 9.18 kB
build/cart.js 39.8 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 8.14 kB
build/checkout-blocks/actions-style.js 1.02 kB
build/checkout-blocks/billing-address-frontend.js 5.3 kB
build/checkout-blocks/billing-address-style.js 574 B
build/checkout-blocks/contact-information-frontend.js 1.66 kB
build/checkout-blocks/contact-information-style.js 653 B
build/checkout-blocks/express-payment-frontend.js 5.81 kB
build/checkout-blocks/fields-frontend.js 375 B
build/checkout-blocks/fields-style.js 342 B
build/checkout-blocks/order-note-frontend.js 673 B
build/checkout-blocks/order-summary-cart-items-frontend.js 6.49 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 16.7 kB
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-frontend.js 16.8 kB
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-frontend.js 16.3 kB
build/checkout-blocks/order-summary-shipping-frontend.js 16.3 kB
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-style.js 341 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 455 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 14.5 kB
build/checkout-blocks/payment-style.js 500 B
build/checkout-blocks/pickup-options-frontend.js 11.2 kB
build/checkout-blocks/pickup-options-style.js 481 B
build/checkout-blocks/shipping-address-frontend.js 5.23 kB
build/checkout-blocks/shipping-address-style.js 517 B
build/checkout-blocks/shipping-method-frontend.js 1.97 kB
build/checkout-blocks/shipping-method-style.js 1.44 kB
build/checkout-blocks/shipping-methods-frontend.js 19 kB
build/checkout-blocks/shipping-methods-style.js 456 B
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/terms-style.js 1.03 kB
build/checkout-blocks/totals-frontend.js 338 B
build/checkout-blocks/totals-style.js 301 B
build/checkout-frontend.js 30.6 kB
build/checkout-rtl.css 8.39 kB
build/checkout.css 8.37 kB
build/checkout.js 42.6 kB
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.66 kB
build/collection-attribute-filter-frontend.js 494 B
build/collection-attribute-filter-rtl.css 3.49 kB
build/collection-attribute-filter.css 3.48 kB
build/collection-attribute-filter.js 7.75 kB
build/collection-filters.js 1.98 kB
build/collection-price-filter-frontend.js 615 B
build/collection-price-filter-rtl.css 1.07 kB
build/collection-price-filter.css 1.07 kB
build/collection-price-filter.js 3.27 kB
build/collection-stock-filter-frontend.js 396 B
build/collection-stock-filter-rtl.css 4.03 kB
build/collection-stock-filter.css 4.03 kB
build/collection-stock-filter.js 4.17 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.19 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-category.js 13.6 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 13.9 kB
build/filter-wrapper-frontend.js 14.6 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.38 kB
build/handpicked-products.js 7.34 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/legacy-template.js 7.85 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.44 kB
build/mini-cart-contents-block/empty-cart-frontend.js 383 B
build/mini-cart-contents-block/empty-cart-style.js 387 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 287 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.96 kB
build/mini-cart-contents-block/items-frontend.js 246 B
build/mini-cart-contents-block/items-style.js 250 B
build/mini-cart-contents-block/products-table-frontend.js 8.59 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.23 kB
build/mini-cart-contents.css 3.22 kB
build/mini-cart-contents.js 16 kB
build/mini-cart-frontend.js 2.35 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.44 kB
build/order-confirmation-additional-information-rtl.css 367 B
build/order-confirmation-additional-information.css 367 B
build/order-confirmation-additional-information.js 1.58 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.56 kB
build/order-confirmation-billing-wrapper.js 1.51 kB
build/order-confirmation-downloads-rtl.css 477 B
build/order-confirmation-downloads-wrapper.js 1.58 kB
build/order-confirmation-downloads.css 478 B
build/order-confirmation-downloads.js 1.91 kB
build/order-confirmation-shipping-address-rtl.css 453 B
build/order-confirmation-shipping-address.css 453 B
build/order-confirmation-shipping-address.js 1.56 kB
build/order-confirmation-shipping-wrapper.js 1.52 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.55 kB
build/order-confirmation-summary-rtl.css 460 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.76 kB
build/order-confirmation-totals-rtl.css 587 B
build/order-confirmation-totals-wrapper.js 1.8 kB
build/order-confirmation-totals.css 587 B
build/order-confirmation-totals.js 2.18 kB
build/packages-style-rtl.css 5.19 kB
build/packages-style.css 5.19 kB
build/page-content-wrapper.js 1.97 kB
build/price-filter-frontend.js 7.94 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 8.11 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-filter.js 7.53 kB
build/price-format.js 913 B
build/product-average-rating-frontend.js 1.87 kB
build/product-average-rating.js 1.38 kB
build/product-best-sellers.js 7.08 kB
build/product-button-frontend.js 4.9 kB
build/product-button-interactivity-frontend.js 8.29 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.6 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.6 kB
build/product-category.js 8.01 kB
build/product-collection-no-results.js 1.66 kB
build/product-collection.js 13.9 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 778 B
build/product-gallery-large-image-frontend.js 604 B
build/product-gallery-large-image-next-previous.js 4.27 kB
build/product-gallery-large-image.js 2.47 kB
build/product-gallery-pager.js 3.48 kB
build/product-gallery-rtl.css 1.55 kB
build/product-gallery-thumbnails.js 3.98 kB
build/product-gallery.css 1.55 kB
build/product-gallery.js 9.67 kB
build/product-image-frontend.js 2.88 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 996 B
build/product-image.css 994 B
build/product-image.js 2.55 kB
build/product-new.js 7.95 kB
build/product-on-sale.js 7.33 kB
build/product-price-frontend.js 2.81 kB
build/product-price-rtl.css 644 B
build/product-price.css 643 B
build/product-price.js 2.32 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-query.js 11.6 kB
build/product-rating-counter-frontend.js 2.18 kB
build/product-rating-counter.js 1.68 kB
build/product-rating-frontend.js 2.52 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.42 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.93 kB
build/product-rating.css 246 B
build/product-rating.js 2.02 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2 kB
build/product-sale-badge-rtl.css 437 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.5 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 2.01 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.51 kB
build/product-stock-indicator-frontend.js 2.19 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.69 kB
build/product-summary-frontend.js 2.34 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.86 kB
build/product-tag.js 7.53 kB
build/product-template-rtl.css 536 B
build/product-template.css 535 B
build/product-template.js 2.81 kB
build/product-title-frontend.js 2.3 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.03 kB
build/product-top-rated.js 7.61 kB
build/products-by-attribute.js 8.05 kB
build/rating-filter-frontend.js 18.8 kB
build/rating-filter-rtl.css 4.09 kB
build/rating-filter-wrapper-frontend.js 19.7 kB
build/rating-filter-wrapper-rtl.css 3.95 kB
build/rating-filter-wrapper.css 3.95 kB
build/rating-filter.css 4.08 kB
build/rating-filter.js 5.8 kB
build/reviews-by-category-rtl.css 1.75 kB
build/reviews-by-category.css 1.75 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product-rtl.css 1.75 kB
build/reviews-by-product.css 1.75 kB
build/reviews-by-product.js 12.7 kB
build/reviews-frontend.js 6.44 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/single-product.js 11 kB
build/stock-filter-frontend.js 19 kB
build/stock-filter-rtl.css 3.88 kB
build/stock-filter-wrapper-frontend.js 20 kB
build/stock-filter-wrapper-rtl.css 3.75 kB
build/stock-filter-wrapper.css 3.74 kB
build/stock-filter.css 3.87 kB
build/stock-filter.js 6.44 kB
build/store-notices-rtl.css 1.31 kB
build/store-notices.css 1.3 kB
build/store-notices.js 2.34 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.19 kB
build/wc-blocks-data.js 19.7 kB
build/wc-blocks-editor-style-rtl.css 7.23 kB
build/wc-blocks-editor-style.css 7.22 kB
build/wc-blocks-google-analytics.js 1.13 kB
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.75 kB
build/wc-blocks-rtl.css 2.48 kB
build/wc-blocks-shared-context.js 860 B
build/wc-blocks-shared-hocs.js 1.41 kB
build/wc-blocks-vendors.js 54.7 kB
build/wc-blocks.css 2.48 kB
build/wc-blocks.js 9.19 kB
build/wc-interactivity-dropdown.js 493 B
build/wc-interactivity.js 12.7 kB
build/wc-payment-method-bacs.js 405 B
build/wc-payment-method-cheque.js 402 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 439 B
build/wc-settings.js 2.42 kB
build/wc-shipping-method-pickup-location.js 29.4 kB

compressed-size-action

@nerrad
Copy link
Contributor Author

nerrad commented Nov 10, 2023

Looks like a test needs updated because the default changed. Noting I've seen this and will address.

Copy link
Contributor

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.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 18, 2023
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 22, 2023
Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! Confirmed the Mini-Cart block is being correctly injected in all expected scenarios.

While for the most part the API works as advertised. However, there are a couple caveats that need to be addressed before we can roll this out more widely (and remove our included patterns/template parts for the header)

👍

Test Results

The mini-cart block should only appear after the navigation block in header patterns or template parts.

✅ Added the navigation block across different areas of the site: header, footer, posts, and pages, and confirmed that the mini-cart is only displayed in the header.

It should not appear in custom patterns or template parts.

✅ Confirmed that when the template is edited, and the auto-injected mini-cart block is removed, it is not displayed again: the user decision is respected. When clicking on "Clear Customizations" for the header template part, confirmed the mini-cart block is auto-inserted again.

It should only be auto-injected when the Twenty Twenty-Four theme is active.

✅ Confirmed that the mini-cart is injected exclusively on TT4: while having other themes such as TT3 or TT2, the block is not injected.

You should never see two mini-cart blocks in a header pattern or template part (for example WooCommerce header patterns should be untouched).

✅ Inserted all WooCommerce header patterns and confirmed the mini-cart is not injected and not displayed twice for them.

If the mini-cart block is moved or removed and the template part/pattern/template is saved, that should persist and not change on reload.

✅ Confirmed that the mini-cart block remains excluded if the user deliberately removes it. The change is persistent and does not change on page reload.

The auto-injection should be reflected on the frontend.

✅ Confirmed the auto-injected mini-cart block is visible on the front end.

Verify that:
woocommerce_blocks_mini_cart_auto_insert_pattern_exclude_list filter works as expected for excluding auto-injection on a specific pattern slug (it'd have to be a pattern that would normally match the conditions).

✅ Confirmed that auto-injection doesn't happen for patterns marked for exclusion while using this filter.

woocommerce_blocks_mini_cart_auto_insert_theme_include_list filter works as expected for specific themes that are active as named in the array.

✅ Tested with 'Twenty Twenty-Three' and confirmed that whenever used, the filter enables auto-insertion for the selected theme(s)

@github-actions github-actions bot added this to the 11.7.0 milestone Nov 29, 2023
@Aljullu Aljullu removed this from the 11.7.0 milestone Dec 4, 2023
The Block Hooks API currently doesn’t allow for setting the default state of the block injected into content so this ensures the mini-cart block has a better default state for injection. The current default (displaying total value in cart) takes up more width increasing the risk of poor layout.
On thinking about this, I don’t think these need to be experimental. They are intentionally provided as escape hatches for hosts/themes that want to opt-in/out so we’ll have to support them when this is shipped (at least until its no longer needed!)
@gigitux
Copy link
Contributor

gigitux commented Dec 4, 2023

I'm merging this PR! E2E tests / JavaScript E2E Tests job fails due the flakiness.

@gigitux gigitux enabled auto-merge (squash) December 4, 2023 16:27
@gigitux gigitux disabled auto-merge December 4, 2023 16:27
@gigitux gigitux merged commit c67f223 into trunk Dec 4, 2023
31 of 32 checks passed
@gigitux gigitux deleted the add/block-hooks-mini-cart branch December 4, 2023 16:27
Aljullu pushed a commit that referenced this pull request Dec 4, 2023
…lock (#11745)

* Change the default for Mini Cart block

The Block Hooks API currently doesn’t allow for setting the default state of the block injected into content so this ensures the mini-cart block has a better default state for injection. The current default (displaying total value in cart) takes up more width increasing the risk of poor layout.

* Utilize Block Hooks to automatically inject mini-cart block.

* include experimental prefix on filters

* Fix filter name.

* remove experimental prefix.

On thinking about this, I don’t think these need to be experimental. They are intentionally provided as escape hatches for hosts/themes that want to opt-in/out so we’ll have to support them when this is shipped (at least until its no longer needed!)

* fix variable name!

* fix unit tests because of new default

* remove another incorrect text expectation

Defaults for the block affect this expectation.

* fix E2E tests

* Mini Cart Block: improve E2E test

* fix: improve check for the Product Collection block

---------

Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Aljullu added a commit that referenced this pull request Dec 4, 2023
@kmanijak kmanijak mentioned this pull request Dec 5, 2023
5 tasks
Aljullu added a commit that referenced this pull request Dec 5, 2023
@@ -72,6 +72,7 @@ public function __construct( AssetApi $asset_api, AssetDataRegistry $asset_data_
protected function initialize() {
parent::initialize();
add_action( 'wp_loaded', array( $this, 'register_empty_cart_message_block_pattern' ) );
add_action( 'hooked_block_types', array( $this, 'register_auto_insert' ), 10, 4 );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how/why this worked but the hook is a filter according to the docs and I've only just realised this was added as an action.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a little known fact that add_action is actually a wrapper around add_filter. To make the intent clear, it would be better to use the appropriate function though.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. team: Kirigami & Origami type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants