This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Add Inner blocks to order summary #6065
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rubikuserbot
requested review from
a team and
ralucaStan
and removed request for
a team
Consider deprecating OrderMetaSlotFill and DiscountSlotFi...Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/d839b2d76b04119a605b65ebfe1506d4796459be/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx#L7-L18🚀 This comment was generated by the automations bot based on a
|
mikejolley
added
category: extensibility
|
Size Change: +9.5 kB (+1%) Total Size: 872 kB
ℹ️ View Unchanged
|
mikejolley
force-pushed
the
add/inner-blocks-to-order-summary
branch
2 times, most recently
from
c187bd6 to
118172f
Compare
ralucaStan
force-pushed
the
add/inner-blocks-to-order-summary
branch
from
118172f to
f118174
Compare
ralucaStan
reviewed
Mar 29, 2022
| import './cart-order-summary-shipping'; | ||
| import './cart-order-summary-coupon-form'; | ||
| import './cart-order-summary-taxes'; | ||
| import './cart-order-summary-heading'; |
There was a problem hiding this comment.
Minor, but for consistency reasons these should also have -block suffix. ./cart-order-summary-heading-block instead of ./cart-order-summary-heading
| .wc-block-components-totals-coupon, | ||
| .wc-block-components-order-summary, | ||
| .wc-block-components-totals-shipping { | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
Before we had the .wc-block-components-totals-wrapper class for each item of the summary.
Now:
- we use the
.wc-block-components-totals-wrapperclass only for slots - we have
.wc-block-components-totals-itemfor some of the items - summary, coupon and shipping don't have the
.wc-block-components-totals-itemand it needs to be styled separately.
I think it was good to have one class for each of this summary items. I wonder why:
- we didn't keep the
.wc-block-components-totals-wrapper? - we don't add
.wc-block-components-totals-itemto coupon, summary and shipping as well?
assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
Outdated
Show resolved
Hide resolved
assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
Outdated
Show resolved
Hide resolved
assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/attributes.ts
Show resolved
Hide resolved
ralucaStan
suggested changes
Mar 30, 2022
| import './checkout-order-summary-shipping'; | ||
| import './checkout-order-summary-coupon-form'; | ||
| import './checkout-order-summary-taxes'; | ||
| import './checkout-order-summary-cart-items'; |
There was a problem hiding this comment.
these should also end with -block
| .wc-block-components-order-summary, | ||
| .wc-block-components-totals-shipping { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
same comment about adding one common class for all section wrappers from the Order summary column
|
|
||
| return ( | ||
| <TotalsCoupon | ||
| className={ className } |
There was a problem hiding this comment.
The coupon form wrapper does not apply the additional class provided by the user.
|
It was a real effort reviewing this as I imagine was the case for writing this. |
This reverts commit 4b75668.
…or each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency
This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar.
ralucaStan
force-pushed
the
add/inner-blocks-to-order-summary
branch
from
506eda5 to
d654f5b
Compare
|
I've added two commits to address the changes requests 10670393a00ebd18d12b86755b5278cdfa49ace6 and d654f5b: Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summaryBecause, removing them was:
Reuse the TotalsWrapper component for C& C blocks inner blocksThis component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. |
tjcafferkey
pushed a commit
that referenced
this pull request
Apr 5, 2022
* Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <[email protected]> Co-authored-by: Raluca Stan <[email protected]>
ralucaStan
changed the title
tarhi-saad
added
the
type: enhancement
tarhi-saad
added a commit
that referenced
this pull request
Apr 13, 2022
In #6065, for Cart only Order Summary Heading & Coupon form can be removed, and for Checkout only the Coupon form.
tarhi-saad
added a commit
that referenced
this pull request
Apr 14, 2022
* Empty commit for release pull request * Add Changelog to readme.txt * Update WC tested and required versions * Add testing notes * Register missing C&C inner blocks and update fallback template for older C& C versions (#6195) * Register missing C & C inner blocks and update fallback template for older C & C versions This will fix the issues with missing order summary inner blocks: Coupons (both in C & C blocks) and the Cart header. The issue was happening because, for example, for Cart the coupons were registred on the on frontend, but it just wasn't forced in the attributes. Because it also wasn't added to the PHP fallback layout, the render function didn't include it. For the Checkout block the coupons inner block wasn't registered at all. * Revert changes to Checkout.php, we don't need to test for inner blocks * Revert "Revert changes to Checkout.php, we don't need to test for inner blocks" This reverts commit fc39535. * Fix the returned template for older Checkout block iterations * Fix Cart and Checkout templates to accommodate the Summary order inner blocks * Hide coupon form div from inner blocks if coubons are not enabled * Fix checkout coupon tests in checkout They have been written for logged in user * Fix Order Summary Heading inner block's default text * Update comments with better wording * Revert "Hide coupon form div from inner blocks if coubons are not enabled" This reverts commit ab09021. (cherry picked from commit 40180ae) * Update the zip file link * Update testing instructions * Remove experimental build related PR from testing notes * Fix/order summary sidebar css (#6231) * Add box sizing to Totals item * Add some unit tests for Order summary blocks * Fix Proceed to checkout button size (cherry picked from commit 669aee7) * Update the WC required/tested versions * Mini Cart Contents: Use block pattern to make the empty cart message translatable (#6248) * try: use block pattern to make empty cart message translatable * Update src/BlockTypes/MiniCart.php Co-authored-by: Albert Juhé Lluveras <[email protected]> * rename function Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Luigi <[email protected]> (cherry picked from commit cfe73f1) * Update the release's ZIP file * Update testing notes In #6065, for Cart only Order Summary Heading & Coupon form can be removed, and for Checkout only the Coupon form. * Update the testing notes Remove #5870 testing notes because they can't be tested as a user * Update Testing notes Add screenshots to the #5967 testing notes * Remove #6166 testing instructions We reverted this PR * Revert (#6166) (#6253) Revert "Prevent Featured Product block from breaking when product is out of stock + hidden from catalog (#6166)" This reverts commit 3c0e0af (cherry picked from commit 908526e) * Bumping version strings to new version. Co-authored-by: github-actions <[email protected]> Co-authored-by: Saad Tarhi <[email protected]> Co-authored-by: Raluca Stan <[email protected]> Co-authored-by: Luigi Teschio <[email protected]> Co-authored-by: Tung Du <[email protected]>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The WIP prefix is a leftover, the work on this branch was completed.
This PR converts the Cart Block and Checkout Block "order summary" areas into an inner block structure.
Cart Block:
woocommerce/cart-order-summary-headingwoocommerce/cart-order-summary-subtotalwoocommerce/cart-order-summary-feewoocommerce/cart-order-summary-shippingwoocommerce/cart-order-summary-discountwoocommerce/cart-order-summary-coupon-formwoocommerce/cart-order-summary-taxesCheckout Block
woocommerce/checkout-order-summary-cart-itemswoocommerce/checkout-order-summary-subtotalwoocommerce/checkout-order-summary-feewoocommerce/checkout-order-summary-shippingwoocommerce/checkout-order-summary-discountwoocommerce/checkout-order-summary-coupon-formwoocommerce/cart-order-summary-taxesNOTE: Yes there are many similarities between the cart and checkout inner blocks, however, they cannot be shared due to the way we use context providers. If they were shared, both Cart and Checkout Blocks would import the above inner blocks, and those inner blocks would then receive the wrong values from context depending on what was imported first. To work around this we have a unique set of inner blocks per each parent block.
The new inner blocks implement existing slotfills, making this change backwards compatible. Subscriptions extension can be installed to verify this since it extends the order totals area including its own shipping and total row.
Fixes #6059
Screenshots
Cart block before
The Order summary block
Cart block after
The Order summary block
Selection of an Order summary Inner block
Testing
Automated Tests
Existing block tests cover these inner blocks since the functionality has just moved down a level.
Manual Testing
How to test the changes in this Pull Request:
/wp-admin/admin.php?page=wc-settings) by clickingEnable tax rates and calculationsShow rate after tax nameand make sure that is reflected in the websiteUser Facing Testing
These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).
Changelog