Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/10859627/woocommerce-gutenberg-products-block.zip)
## WooCommerce Core
### Set inherit default to true when products is inserted on archive product templates ([8375](https://github.com/woocommerce/woocommerce-blocks/pull/8375))
1. Make sure you are using a block theme.
2. Go to the `Products by Category` template on the `Site Editor`.
3. Insert the `Products (Beta)` block.
4. Make sure the `Inherit query from template` is **enabled** by default.
5. Repeat for the `Products by Tag`, `Products by Attribute`, `Product Search Results`, and `Product Catalog` templates.
6. Go to any other template (like `Single Product` or `Page`), insert the `Products (Beta)` block, and make sure the `Inherit query from template` is **disabled** by default.
7. Create a new page or post and make sure you can insert the `Products (Beta)` block.
### Fixes CSS spacing and availability issues for breadcrumb, catalog sort, and result count blocks. ([8391](https://github.com/woocommerce/woocommerce-blocks/pull/8391))
The issues are primarily visible with the Twenty Twenty Two theme. However, testing should be done against some other themes to make sure this doesn't introduce significant issues with those themes. In theory, it _shouldn't_ because the CSS for the blocks should appropriately inherit what the theme provides for default margins and spacing in the container around the blocks.
1. Go to the "Product Catalog" Template in the Site Editor (`Appearance` -> `Editor`).
2. Paste the following after the header in the template:
3. Make sure that in the editor view the alignment for the blocks appears as in the above screenshots.
4. Make sure that the shop catalog on the frontend (default is `sitedomain.com/shop` on most WP installs) shows all blocks aligned as in the above screenshots.
| <imgwidth="1372"alt="CleanShot 2023-02-07 at 07 57 57@2x"src="https://user-images.githubusercontent.com/1429108/217170772-cc744548-3a4e-4dc0-9572-26a7bbbb57e3.png"> | <imgwidth="1359"alt="CleanShot 2023-02-07 at 07 58 58@2x"src="https://user-images.githubusercontent.com/1429108/217170974-ce17659b-95aa-49a6-9211-4b7d26f12cb5.png"> |
##### Breadcrumbs not even displaying for shop page
While it appears okay when editing the Product Catalog template, it is not shown on the frontend for certain themes. It surfaced with Twenty Twenty Two (or derivatives of that theme) for me.
### Add Single Product Details block ([8225](https://github.com/woocommerce/woocommerce-blocks/pull/8225))
1. Enable a blocked theme in your WordPress installation (go to Appearance > Themes, and select one of the blocked themes options, such as: Twenty-Twenty Three);
2. Once the theme is enabled, go to Appearance > Editor (Beta);
3. On the left side menu, click on Templates;
4. Select the Single Product template, and click Edit;
5. Select the WooCommerce Single Product Block that comes by default with the template, remove it, and Save;
6. Using the Block Inserter, type: Single Product Details. Add it to the Editor and position the block as you want.
7. Make sure the Single Product Details block is being displayed and contains the tabs: Description, Additional Information and Reviews;
8. Save the changes. Access your website and click on a product;
9. Make sure the Single Product Details block appears and contains the product description (Description tab), product attributes (Additional Information tab) and the product reviews (Reviews tab).
### Create the Add to Cart Form Block ([8284](https://github.com/woocommerce/woocommerce-blocks/pull/8284))
1. Make sure you are using a block theme.
2. Make sure you have the following product types created in your store: Simple, Variable, Grouped and External.
3. Edit the Single Product template on the Site Editor ( e.g. path > wp-admin/site-editor.php?postType=wp_template&postId=woocommerce%2Fwoocommerce%2F%2Fsingle-product&canvas=edit&sidebar=%2Ftemplates).
4. Insert the new **Add to Cart Form** block and save.
5. Make sure in the editor you see a placeholder block and it matches the following:
<imgwidth="414"alt="Screenshot 2023-02-28 at 12 27 55"src="https://user-images.githubusercontent.com/15730971/221840837-689bae27-e952-4a9c-9d55-a3ea10cf4cf2.png">
6. Access a single product page for a Simple product and ensure the content matches the one displayed on the screenshot shared here on this PR.
7. Access a single product page for a Variable product and ensure the content matches the one displayed on the screenshot shared here on this PR.
8. Access a single product page for a Grouped product and ensure the content matches the one displayed on the screenshot shared here on this PR.
9. Access a single product page for an External product and ensure the content matches the one displayed on the screenshot shared here on this PR.
#### Editor Preview
The editor preview is just a placeholder in this initial moment: the style will change a bit later on as @vivialice and I had a convo today, and she is actively working on a design for it. Here's the current implementation:
<imgwidth="414"alt="Screenshot 2023-02-28 at 12 27 55"src="https://user-images.githubusercontent.com/15730971/221840837-689bae27-e952-4a9c-9d55-a3ea10cf4cf2.png">
We discussed adding placeholders (gray boxes) for the additional content that may or may not be visible depending on the product type last week. As this approach was implemented, the end result was a bit polluted, so I defaulted to relying exclusively on the notice instead.
#### Editor Sidebar
<imgwidth="285"alt="Screenshot 2023-01-30 at 20 30 26"src="https://user-images.githubusercontent.com/15730971/215576964-37331401-af66-414b-a15a-515a8d9b723d.png">
PS: The icon for this block also needs design review/approval cc: @vivialice .
#### Frontend
The content displayed on the frontend is dynamically changed depending on the product type:
##### Simple Product
<imgwidth="253"alt="Screenshot 2023-01-30 at 20 06 48"src="https://user-images.githubusercontent.com/15730971/215571279-3a580e4e-caa1-4ba0-991b-75392ebe8868.png">
##### Grouped Product
<imgwidth="463"alt="Screenshot 2023-01-30 at 20 05 45"src="https://user-images.githubusercontent.com/15730971/215571065-070f425f-02fc-4593-866f-e885d3fde661.png">
##### Variable Product
<imgwidth="259"alt="Screenshot 2023-01-30 at 20 03 51"src="https://user-images.githubusercontent.com/15730971/215570697-de9a7b5d-3c67-4ec8-8d0e-1e8b3716d065.png">
<imgwidth="551"alt="Screenshot 2023-01-30 at 20 04 53"src="https://user-images.githubusercontent.com/15730971/215570883-3dbc08b5-4d1e-41ac-a488-f75876f62875.png">
##### External Product
<imgwidth="169"alt="Screenshot 2023-01-30 at 20 07 33"src="https://user-images.githubusercontent.com/15730971/215571424-43e8d529-1dc8-4221-a30e-2b2392ce2185.png">
### Rename the checkout events ([8381](https://github.com/woocommerce/woocommerce-blocks/pull/8381))
1. Install and activate the Stripe Payment Gateway plugin
2. Add something to your cart and checkout with a bad card (4000 0000 0000 0002).
3. You should see a "Your card was declined" message in the payment options section
4. Add something to your cart again and checkout with a valid card (4242 4242 4242 4242)
5. You should be redirected to the order summary page and you should see the order in wp-admin.
### Use the @wordpress/components instead of wordpress-components while in editor ([8432](https://github.com/woocommerce/woocommerce-blocks/pull/8432))
### Check for wc-blocks script registration before checking payment method script dependencies ([8428](https://github.com/woocommerce/woocommerce-blocks/pull/8428))
1. Install WooCommerce 7.1+ and Elementor 3.9.0+
2. Navigate to the WordPress Admin > Posts > Add New
3. Open the JS console and on the post page, click the "Edit With Elementor" button. Ensure no errors relating to payment method script dependencies appear in the console.
4. Ensure payment methods work in the Checkout block correctly.
### Move the usage of Notices from @wordpress/components from frontend to editor (Filter by Attribute) ([8457](https://github.com/woocommerce/woocommerce-blocks/pull/8457))
**Expected:** There's no Filter by Attribute and no Notice (although filter may be displayed for a glance while loading)
### Add parsed border props to featured items ([8472](https://github.com/woocommerce/woocommerce-blocks/pull/8472))
1. Add a Featured Item (Featured Category or Featured Product) block to a page or post.
2. Select the border controls and add a border style. Add a color and give it some width.
3. You should see the border you set dynamically display on the featured item.
4. Now click on the `Unlink` button on the border controls and try setting different values for color and width for each of the border sides (top,right,bottom,left).
5. Ensure this is working by visually seeing the changes to the featured item.
6. Save and make sure this is also displaying correctly on the frontend.
7. Test both `Featured Category` and `Featured Product` blocks.
### Fix Product categories, Product Tags & Keyword filter not working in Products block ([8377](https://github.com/woocommerce/woocommerce-blocks/pull/8377))
4. Check the front-end. Only products with added categories, tags, or keywords are showing.
### Move the usage of Notices from @wordpress/components from frontend to editor (Filter by Rating) ([8444](https://github.com/woocommerce/woocommerce-blocks/pull/8444))
1. Make sure you have no products with ratings. You can achieve that by going to `wp-admin/edit.php?post_type=product&page=product-reviews`, mark all the reviews and Bulk Actions -> Move to Trash -> Apply (it can be reverted\*)
4. Save the post and go to frontend. Confirm there's no Filter by Rating and no Notice.
Note: to revert moving the reviews to trash go to `http://store.local/wp-admin/edit.php?post_type=product&page=product-reviews&comment_status=trash&paged=1`, mark all the reviews and Bulk Actions -> Restore -> Apply
### Fix Catalog Sorting default color in dark backgrounds ([8483](https://github.com/woocommerce/woocommerce-blocks/pull/8483))
1. Install a theme with a dark background (ie: theme TT3 with Auberginie style).
2. Go to Appearance > Editor and edit the Product Catalog template.
3. Add the `Catalog Sorting` block and save the template.
4. Make sure it's legible in the editor and the frontend.
5. Change the text color of the `Catalog Sorting` block.
6. Verify the color is correctly set in the editor and the frontend.
### Remove opinionated styles from Button component on block themes that define button styles ([8478](https://github.com/woocommerce/woocommerce-blocks/pull/8478))
0. Create three posts, one with the Mini Cart block, another one with the Cart block and the last one with the Checkout block.
#### Test different themes
1. Twenty Twenty Three:
1.1. Install it from [here](https://wordpress.org/themes/twentytwentythree/).
1.2. Go to the pages created in step 0 and verify the Mini Cart, Cart and Checkout buttons **follow** the theme styles.
1.3. Go to Appearance > Editor > Styles > Browse Styles and change between style variations. Verify the buttons follow the styles in all of them.
2. Pixl or another block theme with custom button styles but which is not TT3 or Zaino:
2.1. Install it from [here](https://wordpress.org/themes/pixl/).
2.2. Go to the pages created in step 0 and verify the Mini Cart, Cart and Checkout buttons **follow** the theme styles.
3.1. Install it from [here](https://wordpress.org/themes/storefront/).
3.2. Go to the pages created in step 0 and verify the Mini Cart, Cart and Checkout buttons **don't follow** the theme styles. Instead, they have opinionated styles.
### Update Product Details block so it inherits more styles from the theme ([8494](https://github.com/woocommerce/woocommerce-blocks/pull/8494))
Repeat these testing steps with at least three themes: [TT2](https://wordpress.org/themes/twentytwentytwo/), [TT3](https://wordpress.org/themes/twentytwentythree/) and any other block theme which is not a child theme of TT2/TT3 (ie, [Pixl](https://wordpress.org/themes/pixl/)).
1. Open the Single Product template in the frontend, look at how the _Description_, _Reviews_, etc. tabs are rendered.
2. Go to Appearance > Editor and edit the Single Product template.
3. Add the Product Details block and remove the Classic Template block.
4. Go to the frontend and verify the styling of the tabs of the Product Details block looks the same as the ones of the Classic Template block in Step 1.
5. Go back to the editor and clear the template customizations so the Classic Template block is added back.
Note: the screenshots below display the Product Details block in the same template as the Classic Template block. Because of a recent change, adding both to the same template will cause different styling, so you will need to test with only one of them in the same template at the same time.
1. Go to Appearance > Editor and edit the Single Product template.
2. Add the Product Details block after the Classic Template block.
3. Verify the styling of the tabs of the Classic Template and Single Product block look the same in the editor.
### Show Cart and Checkout blocks in Style Book ([8489](https://github.com/woocommerce/woocommerce-blocks/pull/8489))
1. Ensure that a block theme is installed, e.g. [TT3](https://wordpress.org/themes/twentytwentythree/) and install [Gutenberg v15.1.0](https://github.com/WordPress/gutenberg/releases/download/v15.1.0/gutenberg.zip)
2. Go to `WP Admin » Appearance » Editor`.
3. Click the blue `Edit` button and then click the `Styles` icon in the upper-right corner.
1.Add a product to the cart. 2. Go to the Cart block page. 3. Open the shipping calculator. 4. Enter any address with an invalid zip code. 5. Confirm the error notice is getting displayed in the calculator. 6. Confirm there are no errors in the browser console.
1. Add at least two incompatible payment gateways with the C&C Blocks. You can find them in our [list of incompatible plugins with the Cart & Checkout Blocks](https://github.com/woocommerce/woocommerce-blocks/issues?q=is%3Aopen+is%3Aissue+label%3A%22plugin+incompatibility%22) (e.g., [Paypal](https://woocommerce.com/document/woocommerce-paypal-payments/#account-setup)). You will need to configure them to be detected and used by WooCommerce. [Klarna Payments](https://docs.klarna.com/platform-solutions/woocommerce/klarna-checkout/configuring-klarna-checkout-on-woocommerce/) is compatible with the Cart & Checkout Block since v3.0.0. To use it in this test you can [rollback](https://wordpress.org/plugins/wp-rollback/) to a previous version (e.g. Klarna v2.12.1)
3. Select any element of the `Checkout` Block. You should see a notice with the list of incompatible gateways in the right sidebar of the editor (i.e., `Settings -> Block`)
5. The notice should be removed, and The `make as default`&`sidebar compatibility notices` should be visible instead. Select another Checkout Inner Block. Make sure the `incompatible gateways` notice is still dismissed.
6. Refresh the page. Make sure the `incompatible gateways` notice is still dismissed.
7. Do the same test from step 2 to 6 using the `Cart` Block
8. Disable an incompatible payment gateway (`Plugins -> [Plugin_name] -> Deactivate` or `WooCommerce -> Settings -> Payments`, find the payment gateway and toggle it off)
9. Go to `Checkout` Block page, and select any element of it. You should see the notice again with the list **of only the enabled incompatible gateways** in the right sidebar of the editor (i.e., `Settings -> Block`)
2. Check that placeholder description says "This block serves as a placeholder for your WooCommerce Single Product Block. It will display the actual product image, title, price in your store. You can move this placeholder around and add more blocks around to customize the template."
3. "Upgrade to Products block" button is not visible.
Repeat for Product Catalog, Products by Category and Product Search Resultstemplates. The placeholder description may vary slightly.
### [Blockifying Product Archive Templates]: Implement the blockified template conversion for the Classic Template Block. ([8248](https://github.com/woocommerce/woocommerce-blocks/pull/8248))
#### Conversion is not possible on WP lower than 6.1
##### Prerequisites
WordPress: <6.1
Make sure Product Catalog and Products by Category templates are cleared out to the default state. To achieve that:
1. Go to (`/wp-admin/site-editor.php?postType=wp_template`)
2. Click three dots next to template and click "Clear customizations"
##### Steps
1. Edit the Product Catalog template
2. Check that placeholder description says "This block serves as a placeholder for your WooCommerce Product Grid Block. It will display the actual product image, title, price in your store. You can move this placeholder around and add more blocks around to customize the template. Don't worry, you can always revert back."
3. "Upgrade to Products block" button is not visible.
---
#### Convert classic templates on Product Archive templates
- Make sure Product Catalog/Products by Category/Products by Attribute/Products by Tag/Product Search Results templates are cleared out to the default state. To achieve that:
1. Go to (`/wp-admin/site-editor.php?postType=wp_template`)
2. Click three dots next to template and click "Clear customizations"
2. Check that placeholder description says "This block serves as a placeholder for your WooCommerce Product Grid Block. We recommend upgrading to the Products block for more features to edit your products visually. Don't worry, you can always revert back."
3. Open List View of the blocks
4. Click "Upgrade to Products block" button
<imgwidth="902"alt="Screen Shot 2023-01-25 at 11 27 32 AM"src="https://user-images.githubusercontent.com/20098064/214540490-839d351d-c837-4db5-b991-f8293b8a924b.png">
WooCommerce Product Grid Block is replaced with blocks:
- Check the Product Results Count displays proper numbers, e.g. go to the page 2 (it should say "Showing 17–17 of 17 results" if you're using "standard" products set).
- Check the Catalog Sorting sorts the products correctly, e.g. by price.
2. Check that placeholder description says "This block serves as a placeholder for your WooCommerce Product Search Results Block. We recommend upgrading to the Products block for more features to edit your products visually. Don't worry, you can always revert back."
3. Click "Upgrade to Products block" button: Blocks keeps the same `align` setting in Editor:
- Store Breadcrumbs
- Archive Title
- Store Notices
- Row
- Products
4. Save the template
5. Go to frontend (`/shop`): Blocks keeps the same width (expected to be 650px wide in case of "None" and full available width in case of "Full width" option)
#### Product Archive - side by side comparison (editor)
8. Save the changes and check the frontend as well
9. Enter the edit mode of "Add to Cart" button (there's a [bug that block cannot be clicked](https://github.com/woocommerce/woocommerce-blocks/issues/8439). To enter the edit mode, please open a "list view" of blocks and choose "Add to Cart" from there)
