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

Add additionalCartCheckoutInnerBlockTypes filter to enable additional blocks in the Cart/Checkout blocks. #8650

Merged
merged 8 commits into from
Mar 28, 2023
Merged

Add additionalCartCheckoutInnerBlockTypes filter to enable additional blocks in the Cart/Checkout blocks. #8650

merged 8 commits into from
Mar 28, 2023

Conversation

opr
Copy link
Contributor

@opr opr commented Mar 7, 2023

This PR adds a new filter, allowedBlockTypes which can be used to enable additional blocks in the Cart and Checkout blocks. It can also be used to disable blocks that are allowed by default.

It also adds relevant documentation for this filter.

Fixes #7661

Testing

Automated Tests

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

User Facing Testing

  1. Add the Cart block to a page in the editor. Click into a few inner blocks and ensure the 'core/paragraph', 'core/image', 'core/separator' blocks are available for each.
  2. Repeat for the Checkout block.
  3. Ensure the Cart and Checkout blocks work correctly on the front end by placing an order.
  • Do not include in the Testing Notes

Internal developer testing

  1. Add this code somewhere it will execute when on the Cart block. If you want a quick plugin to be set up then use @woocommerce/extend-cart-checkout-block
registerCheckoutFilters( 'my-store-extension', {
  additionalCartCheckoutInnerBlockTypes: ( value, extensions, { block } ) => {
	  if ( block === 'woocommerce/checkout-shipping-address-block' ) {
		  value.push( 'core/table' );
	  }
	  value.push( 'core/audio' );
	  return value;
  },
} );
  1. Go to the Checkout Block in the editor, click on the woocommerce/checkout-shipping-address-block and add a new block to it.
  2. Ensure you can add the Table block and the Audio block.
  3. Click onto another inner block, and ensure only the Audio block can be added, not the Table block.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Dev note

In this release we added a new filter, additionalCartCheckoutInnerBlockTypes which allows additional block types to be added to the Cart and Checkout inner blocks areas. We included an example of how to use it in the available filters documentation.

Changelog

Add additionalCartCheckoutInnerBlockTypes checkout filter to allow additional block types to be inserted into the Cart and Checkout blocks in the editor.

@opr opr added status: needs review type: enhancement The issue is a request for an enhancement. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: blocks Specific work involving or impacting how blocks behave. needs: dev note PR that has some text that needs to be included in the release notes. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Mar 7, 2023
@opr opr self-assigned this Mar 7, 2023
@woocommercebot woocommercebot requested review from a team and mikejolley and removed request for a team March 7, 2023 04:25
@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8650.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: 451
  • Total errors: 2214

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023 •
edited
Loading

Size Change: +351 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/active-filters.js 7.49 kB -2 B (0%)
build/all-products.js 37.1 kB +3 B (0%)
build/all-reviews.js 7.65 kB +1 B (0%)
build/attribute-filter.js 13.2 kB +1 B (0%)
build/cart.js 48.2 kB +103 B (0%)
build/checkout.js 45.9 kB +100 B (0%)
build/featured-category.js 14 kB +1 B (0%)
build/featured-product.js 14.4 kB +1 B (0%)
build/legacy-template.js 5.57 kB +1 B (0%)
build/mini-cart-contents.js 17.4 kB +150 B (+1%)
build/product-best-sellers.js 8.26 kB -1 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category.js 9.25 kB -1 B (0%)
build/product-new.js 8.26 kB -1 B (0%)
build/product-query.js 11 kB +2 B (0%)
build/product-top-rated.js 8.5 kB -1 B (0%)
build/products-by-attribute.js 9.58 kB -2 B (0%)
build/rating-filter.js 6.99 kB -2 B (0%)
build/reviews-by-category.js 11.9 kB +1 B (0%)
build/reviews-by-product.js 13 kB +1 B (0%)
build/stock-filter.js 7.7 kB -1 B (0%)
build/wc-blocks-vendors.js 64.2 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/all-products-frontend.js 11.8 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/blocks-checkout.js 44 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.32 kB
build/cart-frontend.js 29.3 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.39 kB
build/checkout-blocks/pickup-options-frontend.js 4.11 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 309 B
build/checkout-frontend.js 30.9 kB
build/customer-account.js 3.16 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/mini-cart-component-frontend.js 28.3 kB
build/mini-cart-contents-block/cart-button-frontend.js 816 B
build/mini-cart-contents-block/checkout-button-frontend.js 818 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 705 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.96 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 178 B
build/product-button-frontend.js 1.91 kB
build/product-image-frontend.js 1.77 kB
build/product-image.js 178 B
build/product-on-sale.js 8.59 kB
build/product-price-frontend.js 2.08 kB
build/product-rating-frontend.js 1.34 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 977 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-summary-frontend.js 1.29 kB
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 178 B
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/reviews-frontend.js 7.11 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 5.82 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.79 kB
build/wc-blocks-editor-style.css 5.79 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 27 kB
build/wc-blocks-style.css 27 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 2.63 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/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@opr opr force-pushed the add/allowed-blocks-filter branch from 65abd2f to d99961f Compare March 10, 2023 18:51
@github-actions
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 Mar 22, 2023
@mikejolley mikejolley removed the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 22, 2023
@mikejolley mikejolley force-pushed the add/allowed-blocks-filter branch from d99961f to 5108255 Compare March 22, 2023 13:21
@opr opr force-pushed the add/allowed-blocks-filter branch from 5108255 to d463f1b Compare March 28, 2023 10:29
@opr opr merged commit c10cd40 into trunk Mar 28, 2023
@opr opr deleted the add/allowed-blocks-filter branch March 28, 2023 12:33
@opr opr added this to the 10.0.0 milestone Apr 10, 2023
@opr opr mentioned this pull request Apr 11, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@mikejolley mikejolley mikejolley approved these changes

Assignees

@opr opr

Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: blocks Specific work involving or impacting how blocks behave. needs: dev note PR that has some text that needs to be included in the release notes. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
10.0.0
Development

Successfully merging this pull request may close these issues.

Third party blocks should be insertable in Cart/Checkout without defining it in the parent field.
2 participants
@opr @mikejolley