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

Latest commit

 

History

History
372 lines (261 loc) · 22.2 KB

1020.md

File metadata and controls

372 lines (261 loc) · 22.2 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 10.2.0

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

WooCommerce Core

Add shop by price pattern (#9373)

  1. Create a page and use the block inserter->patterns->WooCommerce and to insert the Shop by Price pattern.
  2. Check that the preview shows up nicely and add the pattern to the page.
  3. Update/save and check the frontend and ensure it is displaying nicely per design.

image

Mini Cart drawer: print width in PHP #9329

  1. Add the Mini Cart block to the header of your site (via Appearance > Editor).
  2. In the frontend, open the Mini Cart drawer clicking on the button.
  3. Verify the drawer is opened instantly. Until now, there might be a small delay if the shopper clicked the button very quickly right after the page was loaded and the network was slow.
Before After
Enregistrament de pantalla des de 2023-05-03 11-15-25 Enregistrament de pantalla des de 2023-05-03 11-14-17

Convert to use WP core blocks #9340

  1. Create a page and use the block inserter->patterns->WooCommerce and to insert the Featured Category Triple pattern.
  2. Check that the preview shows up nicely and add the pattern to the page.
  3. Update/save and check the frontend and ensure it is displaying nicely per design.

image

Add product hero pattern #9181

  1. Create a page/post and use the block inserter->patterns->WooCommerce->Product Hero | Wide
  2. Update/save and ensure the design is close to the suggested design seen below.

image

Single Product Template - Related Products: fix items per page option #9286

  1. Edit the Single Product Template.
  2. Click on the button Upgrade to Blockified Single Product template.
  3. Focus the Related Products Controls block.
  4. Change the option Items per Page, for example put 1. (check the image below)
  5. Save the template.
  6. Visit a Product and be sure that the Related Products block shows the number of products that you selected before. (if you select a high number, there is the risk that there will be displayed fewer products. It is not a bug, but it means that aren't so many related products).

image

Remove duplicated code in BlockTypesController.php #9283

  1. Change your theme to a classic theme (ie: Storefront).
  2. Go to Appearance > Widgets.
  3. Verify the All Products, Cart and Checkout block don't appear in the inserter.

(Note: there is Cart widget which is available in the inserter, you can distinguish it from the block because it doesn't have a trolley icon)

image

Fix Product Price styles leaking into the Mini Cart, Cart and Checkout blocks #9276

Product Price styles don't leak into the Mini Cart block

  1. Go to Appearance > Editor > Template Parts > Mini Cart.
  2. Open the Styles sidebar > Blocks > Product Price.
  3. Set some margin and color to the Product Price.
  4. Verify that the new styles aren't applied to the product prices shown in the Mini Cart.
  5. Go to the frontend and open the Mini Cart drawer.
  6. Verify again that the styles you set in step 3 don't affect the product prices shown in the Mini Cart drawer.

Product Price styles are still applied to the Single Product template

  1. Go to Appearance > Editor > Templates > Single Product. Add the Product Price block somewhere in the template.
  2. Open the Styles sidebar > Blocks > Product Price.
  3. Set some margin and color to the Product Price.
  4. Verify that the Product Price block has the margin and color you set.
  5. Open the single product page in the frontend.
  6. Verify that the Product Price block has the margin and color you set.

Product Price styles are still applied to the Products and All Products blocks

  1. Go to Appearance > Editor > Templates > Product Catalog. Add the Products and All Products blocks somewhere in the template.
  2. Open the Styles sidebar > Blocks > Product Price.
  3. Set some margin and color to the Product Price.
  4. Verify that the Product Price inner blocks have the margin and color you set.
  5. Open the Shop page in the frontend.
  6. Verify that the Product Price inner blocks have the margin and color you set.

Implement new Hero Product – Split pattern #9191

  1. Create a new page or post
  2. Make sure the WooCommerce Hero Product – Split pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.

image

Add featured category cover image #9284

  1. Create a page and use the block inserter->patterns->WooCommerce and to insert the Featured Category Cover Image.
  2. Insert the pattern and update/save and check the frontend and ensure it is displaying close to the design from #9046

image

Prevent email address being removed when changing shipping method/entering shipping address #9328

  1. Enable local pickup (WooCommerce -> Settings -> Shipping -> Local Pickup) and add some locations.
  2. Add some shipping locations in WooCommerce -> Settings -> Shipping.
  3. In an incognito window, add an item to your cart and go to the Checkout block.
  4. Click the "Local Pickup" button in the shipping method selector.
  5. Enter your email address, then click the "Shipping" button. Ensure the email address remains as you entered it.
  6. Change the email address again, put something different in.
  7. Edit the "First name" field of the shipping address. Ensure the email address remains as you entered it.
  8. Uncheck the "Use shipping as billing" checkbox and check out with two different addresses. Ensure the addresses are correct in the order confirmation email and in the WooCommerce back end.

[Pattern] Add new Hero product 3 split pattern #9319

  1. Create a new page or post
  2. Make sure the Hero product 3 split pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.

image

Rename Add to Cart #9315

  1. Open the Site Editor.
  2. Go to the Single Product Template.
  3. Click on the button "Upgrade to Blockified Single Product Template".
  4. Click on the `Add to Cart" button.
  5. On the sidebar, check the name of the block. Be sure that the name is "Add to Cart with Options".

Product Image Gallery: fix resize width when the window resizes #9299

  1. Edit the Single Product Template.
  2. Switch to the blockified version.
  3. Save.
  4. Visit a product page that has multiple images (if you are using test products, you can visit the Logo Collection product.
  5. Be sure that the Product Image Gallery block doesn't overlap with the text when you resize the window.
Before After
Screen.Capture.on.2023-05-01.at.14-25-45.mp4
Screen.Capture.on.2023-05-01.at.14-25-03.mp4

[Pattern] Add new Product Collections: Newest Arrivals pattern #9240

  1. Create a new page or post
  2. Make sure the Product Collections: Newest Arrivals pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.

image

Fix Mini Cart block not respecting Add-to-Cart behaviour attribute when adding the first product #9257

  1. Go to Appearance > Editor and add the Mini Cart block to the header of your store.
  2. Make sure the Open cart in a drawer option is disabled: imatge
  3. Go to the frontend and add a product to your cart from the Shop page.
  4. Verify the drawer doesn't open but the Mini Cart value increases.
  5. Go back to the site editor and enable the Open cart in a drawer option.
  6. Again from the frontend add a product to your cart.
  7. Verify now the drawer does open.

Fix shipping notices for multiple packages #9285

  • Enable “Multiple Packages for WooCommerce” extension.
  • Go to WooCommerce > Settings > Multiple packages
  • Select "group by" product, then save changes.
  • Add several items to your cart.
  • Go to the cart page, toggle open a package section, and choose “local pickup”
  • Toggle open another package and choose something other than "local pickup"
  • See the “Multiple shipments must have the same pickup location” notice above the packages
  • Go to the checkout page
  • Choose "shipping" in the shipping method block
  • Quickly look at the shipping section below and ensure no notice was visible

Add/featured category focus pattern #9322

  1. Create a page and use the block inserter->patterns->WooCommerce and to insert the Featured Category Focus.
  2. Notice the preview shows per design screenshot shown above.
  3. Insert the pattern and then update/save and check the frontend and ensure it is displaying as the screenshot above.

image

Related Products: make Product Title a link by default #9179

  1. Go to Appearance > Site Editor > Templates > Single Product.
  2. Add the Related Products somewhere in the page.
  3. Click on the Product Title inner block.
  4. Verify the Make title a link toggle is on by default.

image

Product Image Gallery: fix inline #9297

  1. Edit the Single Product Template.
  2. Switch to the blockified version.
  3. Move the Product Image Gallery before the block Store breadcrumbs.
  4. Save.
  5. Visit a product page.
  6. Be sure that the Product Image Gallery isn't displayed inline.

Add new Product collections: Featured Collection pattern #9246

  1. Create a new page or post
  2. Make sure the Product Collections: Featured Collection pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.

image

Remove min-height and padding for WP Button elements #9260

  1. Enable TT3 theme with the Aubergine style.
  2. Go to the Site Editor and add the mini-cart block to the header and save.
  3. Go to the Site Editor and edit the mini-cart template part and save.
  4. Check the cart buttons in the editor vs the cart buttons in the front-end are the same.
  5. Enable TT3 theme with the Whisper style.
  6. Create a new page and add a Single Product and a Checkout block and save.
  7. Check the cart buttons in the editor vs the cart buttons in the front-end are the same.

Before

Editor Front-end
Screenshot 2023-02-28 at 10 41 52 Screenshot 2023-02-28 at 10 41 46
Editor Front-end
Screenshot 2023-03-01 at 10 01 41 Screenshot 2023-03-01 at 10 01 51

After

Editor Frontend
Screenshot 2023-04-27 at 12 08 37 Screenshot 2023-04-27 at 12 09 03
Editor Frontend
Screenshot 2023-04-27 at 12 10 34 Screenshot 2023-04-27 at 12 10 47

Products block: Using nested selector to add margin between Product elements #8993

  1. Create a new post & Add Products block to it.
  2. Add all product elements as inner blocks

image

  1. Save & publish
  2. Verify that on Editor & Frontend, There is equal space between the product elements.
  3. Now using following steps, verify that user can still change margin-top & bottom of products elements using Global styles:
    1. Open the Global Styles sidebar by clicking the "Styles" button at the top right corner of the editor. video
    2. In the Global Styles sidebar, locate any product element, for example, "Product Price" block.
    3. Change margin-top & bottom and save the changes.
    4. Check the Product Price block in both the editor and on the front-end to ensure that the changes made through the Global styles UI are accurately applied:
      • In the editor, inspect Product Price block & ensure it matches the value set in the Global styles UI.
      • Save the post & publish it. On frontend, inspect Product Price block & ensure it matches the value set in the Global styles UI.

[Patterns]: Add new Header Centered Search pattern #9081

  1. Create a new page or post
  2. Make sure the WooCommerce Header Centered Search pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.

image

[Patterns] Add new Footer with 3 menus menu #9175

  1. Create a new page or post
  2. Make sure the Footer with 3 menus pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.

image

Use currentColor for Mini Cart footer border #9245

  1. Go to the Appearance > Editor > Template Parts, open the Header template, and insert the Mini Cart block.
  2. Go to the Appearance > Editor > Template Parts and open the Mini Cart template part.
  3. Change the text color of the Mini Cart template part to something different than black or gray. For example, set it to red, blue or green.
  4. Save it and, in the frontend, open the Mini Cart drawer.
  5. Verify the border between the main content of the Mini Cart drawer and the Mini Cart footer follows the text color (it's expected to be a translucent version of that color, similar to the border of the quantity input field of products).
Before After
imatge imatge

Update the icon and description for the Product Details block #9241

  1. Open the Site Editor.
  2. Go to the Single Product Template.
  3. Click on the button "Upgrade to Blockified Single Product Template".
  4. Get the focus on the Product Details Block.
  5. On the sidebar, check the icon of the block and the description are equals to the image below:

image

Update icon and description for the Product Meta block #9243

  1. Open the Site Editor.
  2. Go to the Single Product Template.
  3. Click on the button "Upgrade to Blockified Single Product Template".
  4. Get focus on the Product Meta Block.
  5. On the sidebar, check the icon of the block and the description are equals to the image below:

image

[Patterns]: Add new Featured products: 5-item grid pattern #9006

  1. Create a new page or post
  2. Make sure the WooCommerce Featured Products 5-item grid pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.

image

Implement Hand-Picked Products block #7925

Simplest path

  1. Add a “Products (Beta)” block to your page.
  2. Go to the “Advanced Filters” within the Inspector Controls and add “Hand-picked Products”.
  3. Start typing to select some products.
  4. Ensure the preview is correctly updated as you narrow down your selection.
  5. Click Publish.
  6. Ensure the front-end is correct.

Complex path

  1. Repeat steps 1–4 above.
  2. Add additional filters (such as “On sale”).
  3. Ensure the block only applies the subsequent filters to the subset of products you have selected.

Only validate postcode if its required or filled #9377

  1. Set country to something with an optional postcode like Vietnam
  2. Try to checkout with the field empty, it should pass fine.

Remove <br> In Hero Product – Split Pattern Heading #9409

  1. In the editor, insert the Hero Product – Split pattern.
  2. Inspect the output and confirm that there is no <br> in the heading.
  3. Adjust the browser/viewport width and confirm that the text flows naturally without any unexpected line-breaks.

CleanShot 2023-05-09 at 10 24 32

Related Products: Fix hardcoded limit product #9407

  1. Open the Single Product Template.
  2. Switch to the blockified template.
  3. Focus on the Related Products Controls block.
  4. Change the option Items per Page, for example, put 10.
  5. Be sure that there are often related products. (if not, you can just clone the same product multiple times)
  6. Save the template.
  7. Visit a Product and be sure that the Related Products block shows the number of products that you selected before. (if you select a high number, there is the risk that there will be displayed fewer products. It is not a bug, but it means that aren't so many related products).

Feature plugin

Mini Cart Contents block: fix wide width not being applied in the editor #9201

  1. Go to the Editor, open the Header template, and insert the Mini Cart block.
  2. Go to the Editor > Template parts and open the Mini Cart template.
  3. Open the List View and click on the Mini Cart Contents block.
  4. On the settings sidebar change the Dimensions to a wider size (like 9000) and save.
  5. Verify that the change is applied and the Mini Cart Contents block occupies the entire available width.
Before After
imatge imatge