Added core and blocks instructions

Jonathan Lane 2022-03-22 13:02:17 -07:00
parent 36be2c5399
commit 673251e803
1 changed files with 235 additions and 0 deletions

@ -1,2 +1,237 @@
WooCommerce 6.4 includes:
* [WooCommerce Admin Updates](#woocommerce-admin-updates)
* [WooCommerce Blocks Updates](#woocommerce-blocks-updates)
* [WooCommerce Core Updates](#woocommerce-core-updates)
---
## WooCommerce Admin Updates
---
## WooCommerce Blocks Updates
### FSE: Enable global style for Attribute Filter Block ([5557](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5557))
1. Upgrade to `WordPress 5.9`.
2. Install and enable the `Twenty Twenty-Two` theme.
3. Add the `Filter Products By Attribute` Block to a post.
4. On the right sidebar, personalize the styles of the block.
5. Go on the page and check if there are changes.
6. Reset to default using the `Reset` button from the different sections.
7. Go to Dashboard and select Appearance > Editor (beta). On top of the screen, select Home > Browser all templates > Single Post. When the page is loaded, add the block to the page.
8. On the Editor page click on the `Styles` icon on the right-top corner.
9. Verify that the `Filter Products By Attribute` Block is shown under the `Blocks` section. Personalize again the block.
10. Save your changes.
11. Go on the page created earlier and check if all styles are applied correctly.
12. Edit your previous post/page again.
13. Change again the styles.
14. Save your changes.
15. Check if these styles have priority over the styles from the Site Editor.
### FSE: Enable global style for Sale Product Block ([5565](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5565))
1. Install and enable the `Twenty Twenty-Two` theme.
2. Add the `All Products` Block to a post.
3. Go to Dashboard and select Appearance > Editor (beta).
4. On the Editor page click on the `Styles` icon on the right-top corner.
5. Verify that the `On-Sale Badge` is shown under the `Blocks` section. Click on the label. Personalize the block.
6. Save your changes.
7. Go on the page created earlier and check if all styles are applied correctly.
### FSE: Revert template customization for WooCommerce templates ([5746](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5746))
1. Ensure you have the latest WooCommerce, WordPress 5.9 and a block theme so that the FSE feature is enabled.
2. Go to Appearance > Editor and load Single Product template, customize the content and save the template.
3. In a separate tab ensure these changes are represented on the frontend, be careful _not_ to reload the current tab.
4. Back in your Site Editor tab, using the navigation please navigate back to All Templates view. In the list of templates your customized Single Product template should indicate it has been customized.
5. Click the three dots on the right of this template and click "Clear Customizations" and wait until the action has been complete.
6. Click "Single Product" again to go back into this template, check that all customizations have been cleared.
7. In a separate tab ensure these changes are represented on the frontend, be careful _not_ to reload the current tab.
8. Now in your Site Editor tab make another customization in this template and save it. Then using the navigation please navigate back to All Templates view. In the list of templates your customized Single Product template should indicate it has been customized.
9. Now click "Single Product" again to go back into the Site Editor, check that these customizations are showing still in the Site Editor.
10. Click the downward chevron in the top bar next to the block template title. It should show a "Clear Customizations" option here, click this and check that all customizations are reverted.
11. Now add a WooCommerce template (e.g. `single-product.html`) into your theme or download and install [this version of TwentyTwentyTwo](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/8036005/twentytwentytwo.zip) and test steps 1-10 again.
### Checkout: Local state management for shipping options ([5802](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5802))
1. Ensure your store has multiple shipping methods setup
2. Add something to your cart that requires shipping
3. Go to the cart block
4. Select a shipping option. Confirm the UI updates instantly, and the option remains checked once totals are updated
5. Open 2 tabs with a cart block in each
6. In tab 1, select a shipping method
7. In tab 2, change an item qty. Confirm that once the update completes, the correct shipping method is selected.
### Cart and Checkout: Appender button overlap ([5801](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5801))
1. Open up a page with the Checkout block in the editor
2. Select the “Wide Width” option
3. Confirm that the "Place Order" button and the "Add Block" button at the bottom of the block don't overlap
4. Confirm that in the right hand side bar, the total price doesn't overlap with the "Add block" button
5. Also check the Cart block that the insert inner block buttons don't overlap
### Cart and Checkout: Fix button hover and focus states ([5712](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5712))
1. Create test pages for cart, mini cart, and checkout blocks.
2. In each page check the hover and focus styles for the `View my cart`, `Go to checkout`, `Proceed to Checkout`, and `Place Order` buttons.
3. You can do the same test using the available default themes and the Storefront theme as well.
### Product blocks: Fix ignoring redirection to cart after add ([5708](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5708))
1. Go to WooCommerce Settings > Products > General and toggle _Redirect to the cart page after successful addition_
2. Add All Blocks and/or other products blocks.
3. Hit the _Add to Cart_ button
4. If setting is enabled you should be automatically redirected to the cart
### Checkout: Fix default attributes not being passed to the front-end ([5732](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5732))
1. Add the Checkout block and select the Shipping Address in the editor.
2. Change the settings (try a few different, random settings) in the sidebar and ensure the block changes as expected.
3. Save the block and load it on the front-end and ensure the block is rendered as you expect based on the attributes you saved.
4. Go back to the editor and select the Checkout block as a whole, set the "Dark mode inputs" option to true.
5. Load the block in the front-end again and ensure the dark mode inputs are being used.
### Checkout: Fix handling of orders without payments ([5720](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5720))
1. Create a coupon for 100% of the order total.
2. Add items to cart.
3. Apply the coupon. The order total should be 0 and the payment section hidden during checkout.
4. Place the order. Confirm it goes through without errors.
### FSE: Add a “Remove Image” option to the Featured Category Block ([5719](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5719))
1. Go to post or page
2. Add Featured Category block and add an image to it
3. Check the "Remove" button that appears in the toolbar
4. Click the "Remove" button and check it removes the image, save block and check frontend.
### TT2: Fix Twenty Twenty-Two Products by Category Block item tile styling issues ([5684](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5684))
1. Get the [Twenty Twenty Two](https://wordpress.org/themes/twentytwentytwo/) theme
2. Create a page with Products by category block with products on sale available
3. Visit the page
4. Confirm sale price on products on sale **is not** underlined
5. Add product to cart
6. Confirm `View cart` action is centred under the `Add to cart` button and not broken into two lines
### Add Global Styles support to the Product Price block. ([5950](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5950))
1. Be sure that you are on `WordPress 5.9`.
2. Install and enable the `Twenty Twenty-Two` theme.
3. Select Appearance > Editor (beta). On the Editor page click on the `Styles` icon in the top-right corner.
4. Edit some Global Styles e.g. color & font-size for the Product Price block in the Blocks section.
5. Create a new post and add the All Products block.
6. The Price component should reflect the changes made in Global Styles.
7. Click the Edit icon in the block toolbar. Select the Price block and change its styles in the right sidebar. Click Done & save.
8. Ensure the local styles override the Global Styles on the Frontend of your store.
### Add Global Styles support to the Add To Cart Button block. ([5816](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5816))
1. Be sure that you are on `WordPress 5.9`.
2. Install and enable the `Twenty Twenty-Two` theme.
3. Add the `All Products` block (this block contains the `Add To Cart Button Block`) to a post.
4. Click the Edit icon in the block toolbar. Select the `Add To Cart Button`.
5. On the right sidebar, personalize the styles of the block. Click Done & save.
6. View the post on the Frontend and confirm your changes.
7. Reset to default using the `Reset` button from the different sections.
8. Go to Dashboard and select Appearance > Editor (beta). At the top of the screen, select Home > Browse all templates > Single Post. When the page is loaded, add the `All Products` block to the page.
9. On the Editor page click on the `Styles` icon in the top-right corner.
10. Verify that the `Add To Cart Button` is shown under the `Blocks` section. Personalize the block again.
11. Save your changes.
12. Go on the page created earlier and check if all styles are applied correctly.
13. Edit your previous post/page again.
14. Change the styles again and save your changes.
15. Check if these new styles have priority over the global styles from the Site Editor.
### Store API - Introduced `wc/store/v1` namespace. ([5911](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5911))
1. Smoke test checkout process to highlight any problems with cart/checkout endpoints.
2. Smoke test the All Products block to highlight any problems with product endpoints.
3. Try accessing old endpoints, for example, `https://store.local/wp-json/wc/store/cart`. These should still work.
4. Try accessing new endpoints, for example, `https://store.local/wp-json/wc/store/v1/cart`.
### Renamed WooCommerce block templates to more e-commerce related names. ([5935](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5935))
1. Be sure that you are on `WordPress 5.9`.
2. Install and enable the `Twenty Twenty-Two` theme.
3. Select Appearance > Editor (beta).
4. Select the dropdown next to Home and click the "Browse all templates" button.
4. Confirm that the WooCommerce block template names appear on the list according to the following table:
Old Title | New Title
-- | --
Product Archive | Product Catalog
Product Tag | Products by Tag
Product Category | Products by Category
Single Product | _no change_
### Featured Product block: Add the ability to reset to a previously set custom background image. ([5886](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5886))
1. Add a Featured Product block to a page, post, or template. Select a product that has a product image.
2. In the block toolbar, click Replace and add custom background media.
3. The button to Reset the image should become available in the block toolbar.
4. Clicking the Reset button should remove the custom media.
5. The original product image should show again.
### Fix loading WC core translations in locales where WC Blocks is not localized for some strings. ([5910](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5910))
1. Go to Settings > General > Language (`/wp-admin/options-general.php`) and select a language which has WC core translation at 100% but WC Blocks' at 0% e.g. `Català`.
2. Go to the updates screen (`/wp-admin/update-core.php`), scroll down and update the language translations.
3. Visit the Cart or Checkout block in the frontend and verify the texts are translated.
### Featured Product block: Add the ability to reset to a previously set custom background image ([5886](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5886))
1. Add a Featured Product block to a page, post, or template. Select a product that has a product image.
2. In the block toolbar, click Replace and add custom background media.
3. The button to Reset the image should become available in the block toolbar.
4. Clicking the Reset button should remove the custom media.
5. The original product image should show again.
### Correctly load JS translations from WC core [#6036](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6036)
1. Go to Settings > General > Language (/wp-admin/options-general.php) and select a language which has WC core translation at 100% but WC Blocks' at 0%. (I tested with Català).
2. Go to the updates screen (/wp-admin/update-core.php), scroll down and update the language translations.
3. Visit the Cart or Checkout block in the frontend and verify all texts are translated.
### Try to memoize/cache filter results so that we don't call third party filters too often [#5143](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5143)
These instructions use WooCommerce Subscriptions as this is known to use several filters in different places.
1. Install WooCommerce Subscriptions and create a subscription product.
2. Add it to the cart.
3. Go to the Cart block and ensure it shows the details of the subscription product under the line item.
4. Ensure you can still successfully check out and you are charged the amount you expect to be based on the item price in the database, what is displayed in the Cart block and what is displayed in the Checkout block.
### Checkout: Missing country error for virtual orders (edge case) [#6050](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6050)
1. WC settings > General - set default customer location to "no location by default"
2. Create a downloadable, virtual product
3. Go to the store as a logged out guest in incognito mode
4. Add the virtual/downloadable product to your cart
5. Go to checkout
6. Fill out billing address
7. Place order. It should succeed.
8. Check order details. Shipping should match billing address.
---
## WooCommerce Core Updates
### Fixed clear cart after payment for block-based themes (Twenty Twenty-Two) [31877](https://github.com/woocommerce/woocommerce/pull/31877)
*Preparation:*
1. Activate Twenty Twenty-Two theme.
1. Install and setup any payment gateway plugin which does not clear the cart after payment (example: [WooCommerce PayFast Gateway](https://wordpress.org/plugins/woocommerce-payfast-gateway/))
*Prime the persistent cart:*
1. Login as a customer and add some items to the cart.
1. Log out.
1. Log back in.
*Now to test:*
1. Your cart should already be populated; go ahead and check out (and be sure to use the noted payment gateway, or one that behaves in a similar fashion).
1. After paying, you should be returned to the order-received page.
1. Now navigate to the cart page:
1. Using earlier code (ie, WooCommerce 6.2.1) you should notice that the cart remains populated ❌
1. With this branch, the cart should have been successfully cleared ✅