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

Include Cart and Checkout Blocks when included in WC Core #6805

Merged
merged 12 commits into from Aug 15, 2022

Conversation

opr
Copy link
Contributor

@opr opr commented Aug 1, 2022

This PR will graduate the Cart and Checkout Blocks so they are available even when WooCommerce Blocks is not running as a feature plugin (i.e. it is included in WooCommerce Core).

To achieve this, I ensured both blocks, and their inner blocks were registered using registerBlockType rather than registerFeaturePluginBlockType - registerFeaturePluginBlockType has been commented out, but left in the feature-flags.ts file so it can easily be reinstated in future if we ever add a feature-plugin-only block.

I then found all instances in PHP where classes were only registered if WooCommerce Blocks was running as a feature plugin (Payments Api was the only place).

There was also an inbox notification added in #4518 to surface these blocks to a certain subset of users, however this message is defunct. I removed the code to add this notification, but left the code to delete it. This should ensure any sites that still have this message have it removed.

Fixes #6699

Other Checks

  • 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.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Testing

Automated Tests

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

User Facing Testing

  1. Run npm run build.
  2. Replace the content ofblocks.ini with the following config:
woocommerce_blocks_phase = 1
woocommerce_blocks_env = production
  1. See the Cart and Checkout Blocks and ensure they work as expected. Testing for each block is below:

Cart

  1. In the Cart Block in the editor, ensure the shipping calculator is enabled.
  2. Enable coupons on your site (WooCommerce -> Settings -> General -> Enable the use of coupon codes) and add one.
  3. Add two shipping methods for different locations, e.g. two for USA and two for UK.
  4. Do not add items to your cart.
  5. Go to the Cart Block and ensure the empty cart is displayed.
  6. Add items to your cart and revisit the Cart Block.
  7. Enter your address in the shipping calculator, ensure the correct shipping prices are displayed based on your location.
  8. Enter a coupon and ensure it works, and the price is modified accordingly.
  9. Modify the quantities of items in your cart, ensure it works and the prices update properly.
  10. If you have express payments enabled and working, try checking out from the Cart Block using GPay or Apple pay.
  11. If you don't, hit proceed to checkout and ensure it works correctly.

Checkout

  1. Go to WooCommerce -> Settings -> Accounts & Privacy and enable Allow customers to create an account during checkout and Allow customers to log into an existing account during checkout.
  2. Enable the Stripe payment method, COD, and cheque.
  3. Log out of the site then add items to your cart and go to the Checkout Block.
  4. Check the create account box when entering your details.
  5. Remove the coupon added in the Cart testing steps, and try re-adding it.
  6. Change shipping methods and ensure the prices update.
  7. Change address, ensure shipping prices update when the country changes.
  8. Leave some fields empty on the address form, ensure you get an error.
  9. Re-fill them and enter an invalid ZIP code. (Set country to UK and enter 234345 as the Postcode). Ensure you see an error at the top of the block.
  10. Correct the error (A valid one is SW19 1AA if in UK).
  11. Check out and ensure it works and the order is logged correctly.
  12. Ensure you received emails relating to your order (if using Local WP you can go to your site -> tools -> mailhog to check this).

Manual testing for Rubik only

After trying all the steps above, please:

  1. From your plugins directory, run: npx @wordpress/create-block -t @woocommerce/extend-cart-checkout-block checkout-integration.
  2. Activate the Checkout Integration plugin in your dashboard.
  3. Go to the Cart Block.
  4. Ensure the names of the items in your cart contain + extra data! (this is from the checkout integration plugin).
  5. Go to the Checkout Block.
  6. Change your city to Denver. Ensure the COD option disappears from available payment methods.
  7. Check to make sure there is a block at the bottom of the Checkout Order Summary it should say Data passed to this component: This is some example data from the server - this signifies Slot/Fill is working.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Enable the Cart and Checkout blocks when WooCommerce Blocks is bundled in WooCommerce Core.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2022

The release ZIP for this PR is accessible via:

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

Comment on lines 26 to 39
// This code is being kept in case we add a feature-plugin-only block in future. It will be easy to reinstate.
// /**
// * Registers a new feature plugin block provided a unique name and an object
// * defining its behavior. Once registered, the block is made available as an
// * option to any editor interface where blocks are implemented.
// */
// export const registerFeaturePluginBlockType = (
// blockNameOrMetadata: string | BlockConfiguration,
// settings: Record< string, unknown >
// ): Block | undefined => {
// if ( WC_BLOCKS_PHASE > 1 ) {
// return registerBlockType( blockNameOrMetadata, settings );
// }
// };
Copy link
Member

Choose a reason for hiding this comment

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

Are you commenting this out because it's not used anymore?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, I chose to do this instead of deletion because it will be easier to reinstate this if required in future. Easier than finding the PR that removed it I mean.

Copy link
Member

Choose a reason for hiding this comment

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

I’m on the camp of leaving it intact. It will get treeshaken id not used so it’s not hurting anyone, better than someone using it out of memory just so it doesn’t work for them because it’s commented out. X is undefined are hard to track sometimes.

Comment on lines +137 to +145
// phpcs:disable Squiz.PHP.CommentedOutCode
// phpcs:disable Squiz.Commenting.InlineComment.InvalidEndChar
// phpcs:disable Squiz.Commenting.InlineComment.SpacingBefore
// public function is_feature_plugin_build() {
// return $this->feature()->is_feature_plugin_build();
// }
// phpcs:enable Squiz.PHP.CommentedOutCode
// phpcs:enable Squiz.Commenting.InlineComment.InvalidEndChar
// phpcs:enable Squiz.Commenting.InlineComment.SpacingBefore
Copy link
Member

Choose a reason for hiding this comment

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

Any reason we're commenting out those functions?

Copy link
Contributor Author

@opr opr Aug 1, 2022

Choose a reason for hiding this comment

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

They aren't used and it seems reasonable to keep it around in case we add new blocks in future that should be behind this feature flag. It would be easier to reinstate by uncommenting this than looking for the PR that removed it and re-adding it that way (I think).

Though I do see a bunch in FeatureGating.php that aren't used and also not commented out. Should we keep it around uncommented?

@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2022

Size Change: -246 B (0%)

Total Size: 871 kB

Filename Size Change
build/active-filters.js 7.99 kB +1 B (0%)
build/all-products.js 33.7 kB -14 B (0%)
build/all-reviews.js 7.79 kB +3 B (0%)
build/attribute-filter.js 12.9 kB -13 B (0%)
build/cart.js 43.1 kB -68 B (0%)
build/checkout.js 44.6 kB -70 B (0%)
build/featured-category.js 13.2 kB -8 B (0%)
build/featured-product.js 13.5 kB -14 B (0%)
build/legacy-template.js 2.79 kB -10 B (0%)
build/mini-cart-contents.js 22.9 kB -6 B (0%)
build/mini-cart.js 4.58 kB -7 B (0%)
build/price-filter.js 9.02 kB -8 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB -2 B (0%)
build/product-add-to-cart.js 6.88 kB -3 B (0%)
build/product-best-sellers.js 7.71 kB -1 B (0%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B -1 B (0%)
build/product-categories.js 2.77 kB -13 B (0%)
build/product-category.js 8.68 kB +1 B (0%)
build/product-new.js 7.71 kB +1 B (0%)
build/product-sale-badge.js 802 B +1 B (0%)
build/product-tag.js 8.08 kB -2 B (0%)
build/product-top-rated.js 7.95 kB -4 B (0%)
build/products-by-attribute.js 8.63 kB -1 B (0%)
build/reviews-by-category.js 11.2 kB +5 B (0%)
build/single-product.js 10 kB -16 B (0%)
build/wc-blocks-vendors.js 54.5 kB +1 B (0%)
build/wc-blocks.js 2.63 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.32 kB
build/all-products-frontend.js 18.1 kB
build/attribute-filter-frontend.js 21.9 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 347 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.14 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.39 kB
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 892 B
build/checkout-blocks/contact-information-frontend.js 2.84 kB
build/checkout-blocks/express-payment-frontend.js 5.39 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 602 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.7 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.2 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.37 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 365 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 6.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 1.72 kB
build/price-filter-frontend.js 13.1 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart-frontend.js 6.95 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 437 B
build/product-button-frontend.js 1.87 kB
build/product-button.js 1.57 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 503 B
build/product-image-frontend.js 1.88 kB
build/product-image.js 1.59 kB
build/product-on-sale.js 8.02 kB
build/product-price-frontend.js 1.9 kB
build/product-price.js 1.51 kB
build/product-rating-frontend.js 1.16 kB
build/product-rating.js 741 B
build/product-sale-badge-frontend.js 1.13 kB
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 380 B
build/product-stock-indicator-frontend.js 993 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 873 B
build/product-tag-list.js 499 B
build/product-title-frontend.js 1.31 kB
build/product-title.js 918 B
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/stock-filter-frontend.js 7.38 kB
build/stock-filter.js 7.29 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-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.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.04 kB
build/wc-blocks-editor-style.css 5.04 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.8 kB
build/wc-blocks-style.css 22.7 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 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

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Aug 2, 2022

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.

@opr opr added status: needs review focus: blocks Specific work involving or impacting how blocks behave. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Aug 2, 2022
@opr opr marked this pull request as ready for review August 2, 2022 13:53
@rubikuserbot rubikuserbot requested review from a team and wavvves and removed request for a team August 2, 2022 13:53
@opr opr requested a review from senadir August 10, 2022 11:46
@opr opr force-pushed the update/include-cart-checkout-blocks branch from ce78586 to 8309382 Compare August 12, 2022 13:36
@opr opr added the status: blocker Used on issues or pulls that block work from being released. label Aug 12, 2022
Copy link
Contributor

@ralucaStan ralucaStan left a comment

Choose a reason for hiding this comment

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

For me this works as expected. Thank you for your work! 👏

@github-actions github-actions bot added this to the 8.3.0 milestone Aug 12, 2022
Copy link
Contributor

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

Thank you for working on this, @opr! It works perfect. 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: blocks Specific work involving or impacting how blocks behave. status: blocker Used on issues or pulls that block work from being released. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Remove the Cart and Checkout Blocks from behind the feature flag
4 participants