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

Latest commit

 

History

History
376 lines (299 loc) · 17 KB

950.md

File metadata and controls

376 lines (299 loc) · 17 KB

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

Testing notes and ZIP for release 9.5.0

Zip file for testing: woocommerce-gutenberg-products-block.zip

WooCommerce Core

Style Book: Fix Featured Product and Featured Category Blocks preview (8313)

  1. With Gutenberg installed and a block theme like Twenty Twenty-Three enabled.
  2. Go to Appearance » Editor and edit a template.
  3. In the toolbar, select Styles (black and white circle) and then, Open Style Book (eye icon).
  4. Go to the WooCommerce tab.
  5. Be sure that the Featured Product and Featured Category are displayed like the image below.
Before:

image 		After:

image

Style Book: Hide Filter blocks and Product Search block (8309)

  1. With Gutenberg installed and a block theme like Twenty Twenty-Three enabled.
  2. Go to Appearance » Editor and edit a template.
  3. In the toolbar, select Styles (black and white circle) and then, Open Style Book (eye icon).
  4. Go to the WooCommerce tab.
  5. Be sure that the Attribute Filter, Stock Filter, Price Filter, Rating filter, and Product Search blocks aren't visible.

Style Book: Fix useForcedLayout to prevent breaking style book (8243)

  1. With Gutenberg installed and a block theme like Twenty Twenty-Three enabled.
  2. Go to Appearance » Editor and edit a template.
  3. In the toolbar, select Styles (black and white circle) and then, Open Style Book (eye icon).
  4. Go to the WooCommerce tab.
  5. Ensure the Mini Cart block load correctly.

Add border attributes to featured items block to show border styles in editor (8304)

  1. Go to wp-admin dashboard and to your shop page.
  2. Add a Featured Product block to the page.
  3. Try adding a border color and border width to the product.
  4. Ensure you're seeing the preview of the border styles while editing.
  5. Repeat steps 2-4 for the Featured Category block.
Before:

image 		After:

image

Fix for wrong shipping schema in checkout (8291)

  1. Create and place an order with shipping address different from billing.
  2. Verify on checkout that both display correctly.

Adjust return to cart arrow (8289)

  1. Select a dark theme, e.g. the Twenty Twenty-Three and use a dark style.
  2. Add a product to the cart and go to the checkout page.
  3. Verify that the arrow of the Return to Cart button as the same color as the text.
  4. Go to https://store.test/wp-admin/options-general.php and switch to an RTL-language.
  5. Go to the checkout page again and verify that the arrow of the Return to Cart button points in the other direction.
Before LTR:

Screenshot 2023-01-25 at 17 30 32 		After LTR:

Screenshot 2023-01-25 at 17 29 52
Before RTL:

Screenshot 2023-01-25 at 17 32 44 		After RTL:

Screenshot 2023-01-25 at 17 12 12

Add reset button in the editor for product attributer filter (8285)

  1. Go to your wp-admin dashboard and Shop page.
  2. Add the Filter by Attribute Product block.
  3. Choose an attribute which has a product linked to it.
  4. Ensure you see the Reset button at the bottom right.
  5. Go to your Shop page and select an attribute.
  6. Ensure you see the Reset button and clicking on it works as expected.
  7. Back in the wp-admin Shop page. Edit the block and now try choosing an attribute which has no products link to it.
  8. Ensure you no longer see the Reset button at the bottom right.
Before:

image 		After:

image

Make Notice component legible in dark themes (8278)

  1. Install a theme with a dark background (ie: theme TT3 with Aubergine style or theme Zaino).
  2. Go to Appearance » Editor and edit the Product Catalog template.
  3. Add the Store Notices block.
  4. Make sure the notice text is black and legible.
Before:

image 		After:

image

Set inherit setting to true when is inserted in the archive product template (8251)

  1. Make sure you are using a block theme.
  2. Go to the Product Catalog template on the Site Editor (wp-admin/site-editor.php?postType=wp_template&postId=woocommerce%2Fwoocommerce%2F%2Farchive-product).
  3. Insert the Products (Beta) block.
  4. Make sure the Inherit query from template is enabled by default.

Avoid changing the markup of all ratings when the Product Rating block is present in the page (8247)

  1. Make sure a product has an average rating of 4 or less.
  2. With the Twenty Twenty-Three theme installed, go to Appearance » Editor.
  3. Edit the Product Catalog template, adding the Products block above the WooCommerce Product Grid Block:
image
  1. You might want to add a title above each of those blocks to help you distinguish them in the frontend.
  2. Go to the frontend and verify the rating markup of the WooCommerce Product Grid block is not filtered. To verify it, scroll down to the WooCommerce Product Grid block and check that the "empty" star in the rating is outlined instead of dimmed:
Before:

image 		After:

image

Note: The Products block is expected to have dimmed stars instead of outlined ones. This testing steps refers to the WooCommerce Product Grid block.

Update Local Pickup price display when price is 0 and multiple packages are used (8241)

  1. Enable the Multiple Packages for WooCommerce extension and set a price for local pickup.
  2. Add multiple products to cart. Confirm you have multiple shipping packages and the price x quantity is shown when choosing local pickup.
  3. Go to settings and make local pickup free.
  4. Go back to checkout and confirm prices for pickup is shown as "FREE".
Show as "Free" instead of "0 x 3 packages":

image 		Existing logic preserved for pickup with prices:

image

Product Price: Transition from using CSS margin to Global Styles (8269)

  1. Add a Products block on a new page.
  2. Ensure the Product Price margin is displaying correctly (and is present in the Dimensions » Margin setting).
  3. Now add an All Products block on another page.
  4. Click on the pencil icon to edit the layout and change the Product Price block margin.
  5. Verify the margin is applied in the editor. Save the layout, save the page and check the changes in the frontend, verify the margin is applied there as well.

Product Button: Transition from using CSS margin to Global Styles (8239)

  1. Add a Products block on a new page.
  2. Ensure the Product Button margin is displaying correctly (and is present in the Dimensions » Margin setting).
  3. Iterate over each Products block pattern (which includes the Product Button block). Make sure the margin is correct.

Product Rating: Transition from using CSS margin to Global Styles (8202)

  1. Add a Products block on a new page and add the Product Rating block inside of it.
  2. Ensure the Product Rating margin is displaying correctly (and is present in the Dimensions » Margin setting).
  3. Iterate over each Products block pattern (which includes the Rating block). Make sure the margin is correct.
  4. Make sure the alignment setting works (for Product Rating) correctly in the editor and frontend.

Add Store Breadcrumbs block (8222)

  1. Make sure you are using a block theme.
  2. Edit any template on the Site Editor e.g. the Single Product Template (wp-admin/site-editor.php?postType=wp_template&postId=woocommerce%2Fwoocommerce%2F%2Fsingle-product&canvas=edit&sidebar=%2Ftemplates).
  3. Insert the new Store Breadcrumbs block.
  4. Style the breadcrumbs (update the colors for the link and text and typography) and ensure the changes are also visible on the FrontEnd.
Editor Preview:

image 		FrontEnd:

image
Editor sidebar:

image 		Block inserter:

image

Add Catalog Sorting filter block (8122)

  1. Enable a blocks theme and go to the Site Editor » Browse all templates and open the Product Catalog template.
  2. Insert the Catalog Sorting block.
  3. Insert the Products (Beta) block and enable the Inherit query from template.
  4. Check the Catalog Sorting block renders on the editor.
  5. Save and go to the shop on the front end, make sure it renders the Products (Beta) block with the Catalog Sorting dropdown.
  6. Change the dropdown value and make sure the products are ordered in the expected order.
image

Add Results Count block (8078)

  1. Create new post/page
  2. Try to add "Product Results Count"
    Expected: Product Results Count block is not available there
  1. Edit Product Catalog template
  2. Add "Product Results Count"
    Expected: It displays "Showing 1-X of X results".
  3. Remove Classic Template and add Products block
  4. Make sure Products block has Inherit query from template setting enabled (!)
  5. Save the template and go to Frontend
    Expected: It displays "Showing 1-16 of 17 results". - depends on number of products your store has, numbers may differ, but it displays correct number of product that shows up in Products block
  6. Go to the next page of Products
    Expected: It displays "Showing 17-17 of 17 results". - depends on number of products your store has, numbers may differ, but it displays correct number of product that shows up in Products block
Editor sidebar:

image 		Block inserter:

image
  1. Change global styles and make sure styles are applied to the block (in frontend as well)
  2. Change the color/font styles to the block and make sure styles are applied to the block (in frontend as well)

Add coupon link instead of dropdown in Cart and Checkout blocks (7993)

  1. Go to the Edit Cart page, remove the Cart block and add it again.
  2. Go to the Edit Checkout page, remove the Checkout block and add it again.
  3. Visit your site front-end and add items to cart
  4. Go to the Cart page, and confirm the Apply a coupon code link is visible.
  5. Enter the coupon code, and confirm the coupon is getting applied.
  6. Go to the Checkout page, and confirm the Apply a coupon code link is visible.
  7. Enter the coupon code, and confirm the coupon is getting applied.
  8. Test around this issue.

Checkout/Store API: Push valid changes selectively (8030)

  1. Go to the checkout page as a logged in user who has checked out before.
  2. Edit a single address field - it has to be one of the address fields that require a push: city, state, country, postcode, or email.
  3. Wait a few seconds for the request to finish.
  4. Refresh the checkout page.
  5. Confirm the change you made was persisted.

Refresh the cart when using the browser back button (8236)

For the Checkout block

  1. Add items to your cart.
  2. Go to the checkout block page.
  3. Place an order.
  4. Press the browser back button.
  5. After a short delay you'll see the empty cart notice.

For the Mini Cart block

  1. Add mini cart to the theme header.
  2. Add something to your cart.
  3. Visit a page - note the total in mini cart.
  4. Visit the shop page and add another item to the cart. Note the new mini cart total.
  5. Press the browser back button. Without mousing over the mini cart block, confirm the total updates.
image

Feature plugin

n/a

Experimental

n/a