481 lines
26 KiB
Markdown
481 lines
26 KiB
Markdown
|
# Testing notes and ZIP for release 10.8.0
|
||
|
|
|
||
|
|
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12249010/woocommerce-gutenberg-products-block.zip)
|
||
|
|
|
||
|
|
## WooCommerce Core
|
||
|
|
|
||
|
|
### Use the `Single Product` block for the `Product Details Product Listing` pattern [#9978](https://github.com/woocommerce/woocommerce-blocks/pull/9978)
|
||
|
|
|
||
|
|
1. Create a new page or post.
|
||
|
|
2. Insert the `Product Details Product Listing` pattern and save.
|
||
|
|
3. Check that the pattern is using the `Single Product` block and has a default product selected.
|
||
|
|
4. In the front end, check the pattern looks like the image above if the product has reviews.
|
||
|
|
5. Check nothing shows in the front end, if the product does not have reviews.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
<img width="681" alt="Screenshot 2023-06-23 at 15 29 12" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/1e5d9743-9fff-4c3d-a760-df0d191f0d70">
|
||
|
|
|
||
|
|
### Store Customization > Centered Header Menu with Search - Update the pattern to become wireframed [#10226](https://github.com/woocommerce/woocommerce-blocks/pull/10226)
|
||
|
|
|
||
|
|
1. Create a new post
|
||
|
|
2. Insert the Centered Header Menu with Search pattern and save
|
||
|
|
3. Make sure it works as expected and is properly rendered on the front-end
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1285" alt="Screenshot 2023-07-17 at 10 31 35" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/5c15e8a3-9594-443c-aded-8544129351c8"> | <img width="1289" alt="Screenshot 2023-07-17 at 10 25 26" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/7aaa1d02-2f23-4c89-9bd9-e2b44c9e7ffc"> |
|
||
|
|
|
||
|
|
### Store Customization > Minimal Header - Update the pattern to become wireframed [#10227](https://github.com/woocommerce/woocommerce-blocks/pull/10227)
|
||
|
|
|
||
|
|
1. Create a new post
|
||
|
|
2. Insert the Minimal Header pattern and save
|
||
|
|
3. Make sure it works as expected and is properly rendered on the front-end
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1834" alt="Screenshot 2023-07-17 at 10 42 53" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/dead1e17-cbd5-4ba2-9188-0d33873dce03"> | <img width="1832" alt="Screenshot 2023-07-17 at 10 43 08" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/7dcbaf6a-ca9b-43ef-bf28-475ca4479f67"> |
|
||
|
|
|
||
|
|
### Remove styles from `Newest arrivals` pattern [#10256](https://github.com/woocommerce/woocommerce-blocks/pull/10256)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, add the `Product Collections Newest Arrivals` pattern.
|
||
|
|
2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the `After` screenshot above.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="975" alt="Screenshot 2023-07-18 at 15 42 55" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/59b5d98a-e7f0-4e30-ae90-368157d421a5">| <img width="1049" alt="Screenshot 2023-07-18 at 15 42 30" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/2af96065-94c6-4da7-b3a2-d5a551abfb5a"> |
|
||
|
|
|
||
|
|
### Remove styles from the `Testimonials 3 cols` pattern [#10258](https://github.com/woocommerce/woocommerce-blocks/pull/10258)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, add the `Testimonials 3 columns` pattern.
|
||
|
|
2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the `After` screenshot above.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1678" alt="Screenshot 2023-07-18 at 16 18 49" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/ee16bc83-5316-44ba-a0b6-5ed766e493db"> | <img width="1701" alt="Screenshot 2023-07-18 at 16 18 25" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/26894af6-0d1c-4a34-9f51-3d3977c371e7"> |
|
||
|
|
|
||
|
|
### Store Customization > Hero Product Split pattern - Update the pattern to become wireframed [#10270](https://github.com/woocommerce/woocommerce-blocks/pull/10270)
|
||
|
|
|
||
|
|
1. Create a new post
|
||
|
|
2. Insert the Hero Product Split pattern and save
|
||
|
|
3. Make sure it works as expected and is correctly rendered on the front end: the design should match the one demonstrated on the screenshots of this PR.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="987" alt="Screenshot 2023-07-19 at 12 02 36" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/0c73123e-7cec-42e6-839d-ad0f5f5dfa85"> <img width="308" alt="Screenshot 2023-07-19 at 12 03 24" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/a55b5817-9111-4e1e-9312-f787f0c7e6bc"> | <img width="987" alt="Screenshot 2023-07-19 at 12 02 51" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4c8f2926-2711-4e91-9002-ddffb0a2418e"> <img width="310" alt="Screenshot 2023-07-19 at 12 03 07" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/064260ea-8c33-4177-9e5a-4cad364b0c7a"> |
|
||
|
|
|
||
|
|
### Update the `Testimonials Single` pattern to have no opinionated styles [#10275](https://github.com/woocommerce/woocommerce-blocks/pull/10275)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, add the `Testimonials Single` pattern.
|
||
|
|
2. Verify the text does not have opinionated styles (borders, colors, fonts, etc) and that the pattern looks like the screenshot above.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
<img width="1199" alt="Screenshot 2023-07-19 at 15 20 19" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/a627540e-ef0c-4540-81ea-026fa4880a4e">
|
||
|
|
|
||
|
|
### Update the `Footer with 3 menus` pattern to have no opinionated styles [#10294](https://github.com/woocommerce/woocommerce-blocks/pull/10294)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, add the `Footer with 3 menus` pattern.
|
||
|
|
2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the After screenshot above.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1280" alt="Screenshot 2023-07-20 at 15 26 05" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/2826ad55-d947-41fa-8ff0-d55009f61123"> | <img width="1280" alt="Screenshot 2023-08-02 at 10 22 42" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/b751c150-cdfe-4a66-af80-d6fad0898bd6"> |
|
||
|
|
|
||
|
|
### Move sale badge to top right of product image [#10297](https://github.com/woocommerce/woocommerce-blocks/pull/10297)
|
||
|
|
|
||
|
|
1. Add the following blocks to a post/page. `Hand-picked Products`, `Best Selling Products`, `Products by Category`, `Newest Products`, `On Sale Products`, `Products by Attribute`, `Products by Tag`, `Top Rated Products`.
|
||
|
|
2. For each of these blocks, ensure the `Sale` badge is on the top right of the product image as seen in the `After` screenshot above.
|
||
|
|
3. Save the post/page and ensure it shows the same in the frontend.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| | |
|
||
|
|
|
||
|
|
### Update the `Footer with Simple Menu and Cart` pattern to have no opinionated styles [#10306](https://github.com/woocommerce/woocommerce-blocks/pull/10306)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, add the `Footer with Simple Menu and Cart` pattern.
|
||
|
|
2. Verify there are no opinionated styles (borders, colors, fonts, etc) - except the margin on the separator - and the pattern looks like the After screenshot above.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="2023" alt="Screenshot 2023-07-21 at 12 54 00" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/de6c4f77-77a8-42fe-8009-91b614fa5ba4">|<img width="2021" alt="Screenshot 2023-07-21 at 12 56 29" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/a705e319-27b4-49a7-a0e3-51bae429f1ca">|
|
||
|
|
|
||
|
|
### Store Customization > Large Footer pattern - Update the pattern to become wireframed [#10323](https://github.com/woocommerce/woocommerce-blocks/pull/10323)
|
||
|
|
|
||
|
|
1. Create a new post
|
||
|
|
2. Insert both the Large Footer and Large Footer Dark patterns.
|
||
|
|
3. Make sure they work as expected and are visible both in the editor and on the front-end
|
||
|
|
4. Make sure the styles match the screenshot added on this PR description
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1979" alt="Screenshot 2023-07-24 at 12 07 55" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/d912b023-7af8-4e9f-ac9d-0c3e3b38bfab"> | <img width="1980" alt="Screenshot 2023-07-24 at 12 06 13" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/b6971fe5-e036-4c68-8a4d-fd08b775a2a5"> |
|
||
|
|
|
||
|
|
### Store Customization > Introduce the new Featured Products: Fresh & Tasty pattern [#10339](https://github.com/woocommerce/woocommerce-blocks/pull/10339)
|
||
|
|
|
||
|
|
1. Create a new post
|
||
|
|
2. Add the Featured Products: Fresh & Tasty pattern
|
||
|
|
3. Make sure the preview is properly rendered without any problems
|
||
|
|
4. Save the post and visualize it on the front-end: make sure the layout displayed matches the screenshots on this PR
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
Desktop view:
|
||
|
|
|
||
|
|
<img width="1224" alt="Screenshot 2023-07-25 at 10 21 28" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/258d794b-b021-4f88-a01b-70aeb7288242">
|
||
|
|
|
||
|
|
|
||
|
|
Mobile view:
|
||
|
|
|
||
|
|
<img width="389" alt="Screenshot 2023-07-25 at 10 37 28" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/f6e58b99-35a5-4791-835b-f0a02974bee1">
|
||
|
|
|
||
|
|
### Store Customization > Featured Category Triple pattern - Update the pattern to become wireframed [#10343](https://github.com/woocommerce/woocommerce-blocks/pull/10343)
|
||
|
|
|
||
|
|
1. Create a new post and insert the Featured Category Triple pattern
|
||
|
|
2. Ensure the pattern is rendered correctly in the editor
|
||
|
|
3. Save the post and go to the frontend
|
||
|
|
4. Ensure the pattern is rendered correctly without any errors and the styles match the screenshot on this PR.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1209" alt="Screenshot 2023-07-25 at 13 01 37" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/9106e25f-7d76-45dc-86bd-aa515363299a"> | <img width="1209" alt="Screenshot 2023-07-25 at 13 22 51" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4d04067d-6ffb-4e57-bbc3-7cb687f26872"> |
|
||
|
|
|
||
|
|
### Remove styles from `Product Details Product Listing` pattern [#10362](https://github.com/woocommerce/woocommerce-blocks/pull/10362)
|
||
|
|
|
||
|
|
1. Create a page or post.
|
||
|
|
2. Insert the `Product Details Product Listing`.
|
||
|
|
3. Click on the product title and in the styles tab check it has no colors.
|
||
|
|
4. Click on the product button and in the styles tab check it has no colors or other styles.
|
||
|
|
|
||
|
|
### Store Customization > Introduce the new Social: Follow us in social media pattern [#10368](https://github.com/woocommerce/woocommerce-blocks/pull/10368)
|
||
|
|
|
||
|
|
1. Create a new post
|
||
|
|
2. Insert the **Social: Follow us in social media** pattern
|
||
|
|
3. Make sure you can preview the pattern without any problems in the editor and save.
|
||
|
|
4. On the front-end, make sure the pattern is properly rendered.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Desingn | Implemented |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1214" alt="Screenshot 2023-07-26 at 13 08 52" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2d122488-a24d-4c2d-9ac1-38d015864d86"> | <img width="1221" alt="Screenshot 2023-07-26 at 13 04 33" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/5ab6cee4-9038-40e3-8d96-7d44d20f00e7"> |
|
||
|
|
|
||
|
|
### Featured Items: Add selection button when id not found [#10387](https://github.com/woocommerce/woocommerce-blocks/pull/10387)
|
||
|
|
|
||
|
|
1. Add the `Featured Category` block to a page.
|
||
|
|
2. Select an existing ID and click `Done`.
|
||
|
|
3. Go into `Code editor` mode and replace the `categoryId` to some random number that does not exists.
|
||
|
|
4. Click on `Exit code editor`.
|
||
|
|
5. You should now see an error `Sorry, an error occurred`.
|
||
|
|
6. Ensure you see the `Select a category` button and click it.
|
||
|
|
7. Ensure now you can select an existing category.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| | |
|
||
|
|
|
||
|
|
### Store Customization > Featured Products 5-Item Grid pattern - Update the pattern to become wireframed [#10401](https://github.com/woocommerce/woocommerce-blocks/pull/10401)
|
||
|
|
|
||
|
|
1. Create a new post
|
||
|
|
2. Insert the Featured Products 5-Item Grid pattern
|
||
|
|
3. Ensure you can see everything working as expected in the editor
|
||
|
|
4. Save the post and head over to the front end: ensure everything works as expected and the style rendered matches the one displayed on this PR.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1227" alt="Screenshot 2023-07-28 at 13 47 10" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/8bcf81f3-d220-4fdd-a85b-d7d9d5c4b931"> | <img width="1225" alt="Screenshot 2023-07-28 at 14 40 24" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/5a5f909a-ce4e-4a9c-83a3-0e775d40f6da"> |
|
||
|
|
|
||
|
|
### Update express checkout title, description, icon [#10237](https://github.com/woocommerce/woocommerce-blocks/pull/10237)
|
||
|
|
|
||
|
|
1. Open up the Checkout page in the block editor
|
||
|
|
2. Verify the visual elements in the screenshots are correct
|
||
|
|
3. On the front end, add some products to your basket and go to Checkout
|
||
|
|
4. Verify that the title of the Express Checkout block has a capital "C" for the word "Checkout".
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
Note the capital C in _Checkout_ in the block title, and the description and icon in the settings bar on the right
|
||
|
|
|
||
|
|
**Before:**
|
||
|
|
|
||
|
|
|
||
|
|
**After:**
|
||
|
|
|
||
|
|
|
||
|
|
### Add class specificity to fix indent [#10245](https://github.com/woocommerce/woocommerce-blocks/pull/10245)
|
||
|
|
|
||
|
|
1. Switch to Storefront theme.
|
||
|
|
2. Create a post.
|
||
|
|
3. Add the following blocks to the page. `Filter by Attributes`, `Featured Category`, `Featured Product`, `Hand-picked Products`, `Reviews by Product`, `Reviews by Category`.
|
||
|
|
4. Ensure in each of these blocks that default shown search list is not indented to the right as shown in the `after` screenshot. Another words there should be no indentation.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>Before:
|
||
|
|
<br><br>
|
||
|
|
<img width="833" alt="Screenshot 2023-07-06 at 10 50 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/a411aa91-beaf-45da-a97d-66a3887da04a">
|
||
|
|
|
||
|
|
</td>
|
||
|
|
<td> After:
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<img width="706" alt="Screenshot 2023-07-06 at 10 51 03" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/3da3c17f-9418-4932-a699-ba9ab59218aa">
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
### Remove Featured Category Cover Image pattern [#10252](https://github.com/woocommerce/woocommerce-blocks/pull/10252)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, open the inserter and search for the Featured Category Cover Image pattern.
|
||
|
|
2. Verify it doesn't exist.
|
||
|
|
|
||
|
|
<img src="https://github.com/woocommerce/woocommerce-blocks/assets/3616980/b8a5c628-e29f-4465-bf42-d0b86b3c8c3f" alt="" width="375" />
|
||
|
|
|
||
|
|
### Remove opinionated styles from Hero Product 3 Split pattern [#10260](https://github.com/woocommerce/woocommerce-blocks/pull/10260)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, add the Hero Product 3 Split pattern.
|
||
|
|
3. Verify it looks like the _After_ patterns in screenshot below (styles adapt to the theme) and it matches the design ([see](https://github.com/woocommerce/woocommerce-blocks/issues/10217)).
|
||
|
|
|
||
|
|
Desktop | Mobile
|
||
|
|
--- | ---
|
||
|
|
 | 
|
||
|
|
|
||
|
|
### Add to Cart Form: Fix broken styles for the block when using inside the Single Product Block [#10282](https://github.com/woocommerce/woocommerce-blocks/pull/10282)
|
||
|
|
|
||
|
|
1. Log in to your WordPress dashboard.
|
||
|
|
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
|
||
|
|
3. On the left-hand side menu, click on Pages > Add New.
|
||
|
|
4. Inside the Page editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
|
||
|
|
5. In the block library that pops up, search for the 'Single Product' block. Click on it to add the block to the template.
|
||
|
|
6. On the top-right side, click on the Save button.
|
||
|
|
7. Visit a product and check if the Single Product block is shown and the Add to Cart Form block is correctly being displayed
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="649" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/80a249d6-4a0c-41fe-8b1c-c71c69112717"> | <img width="674" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/436f48ae-9a9e-467c-95a6-1935a8ff3c11"> |
|
||
|
|
|
||
|
|
### Unify links to WordPress and WooCommerce websites in patterns [#10380](https://github.com/woocommerce/woocommerce-blocks/pull/10380)
|
||
|
|
|
||
|
|
1. Create a new page and add the following patterns: Large Footer, Large Footer Dark, Simple Footer, Simple Footer Dark, Footer with Simple Menu and Cart, Footer with 2 Menus, Footer with 2 Menus Dark and Footer with 3 Menus.
|
||
|
|
2. Publish the page and visit it from the frontend.
|
||
|
|
4. Click on the links to the WordPress and/or WooCommerce templates which appear at the bottom of the patterns and verify all of them look ok and open in a new tab.
|
||
|
|
|
||
|
|
### Fix Classic Template block in Single Product custom templates [#10342](https://github.com/woocommerce/woocommerce-blocks/pull/10342)
|
||
|
|
|
||
|
|
1. Go to Appearance > Editor > Templates and create a Product template:
|
||
|
|
|
||
|
|
<img src="https://github.com/woocommerce/woocommerce-blocks/assets/3616980/32660cc4-c2f8-4c38-8f00-ad108690d3eb" alt="" width="556" />
|
||
|
|
|
||
|
|
3. Choose one of the products and create a custom template for it.
|
||
|
|
4. Remove all blocks from the template (except header and footer) and, as a replacement, add the WooCommerce Classic Template block.
|
||
|
|
|
||
|
|
<img src="https://github.com/woocommerce/woocommerce-blocks/assets/3616980/a82da4b2-c94b-445f-a4da-45064963ad66" alt="" width="556" />
|
||
|
|
|
||
|
|
6. Visit the page of that product in the frontend.
|
||
|
|
7. Verify it renders the product details properly.
|
||
|
|
|
||
|
|
Before | After
|
||
|
|
--- | ---
|
||
|
|
 | 
|
||
|
|
|
||
|
|
### Change custom toolbar item to use toolbar button [#10246](https://github.com/woocommerce/woocommerce-blocks/pull/10246)
|
||
|
|
|
||
|
|
1. Create a post and add `Featured Category` and `Featured Product` block to the page and have your developer console opened.
|
||
|
|
2. Click on each of the block so that you can see the toolbar popup for each block.
|
||
|
|
3. In your developer console, ensure you don't see the warning `Using custom components as toolbar controls is deprecated since version 5.6. Please use ToolbarItem, ToolbarButton or ToolbarDropdownMenu components instead.`.
|
||
|
|
4. Ensure each of the toolbar items are still functioning as expected.
|
||
|
|
|
||
|
|
### Remove opinionated styles from Alternating Image and Text pattern [#10292](https://github.com/woocommerce/woocommerce-blocks/pull/10292)
|
||
|
|
|
||
|
|
1. In the post editor or the site editor, add the Alternating Image and Text pattern.
|
||
|
|
2. Click on the image placeholders and add images to the pattern.
|
||
|
|
3. Visit the frontend of your site.
|
||
|
|
4. Verify the patterns looks like the _After_ patterns in screenshots below.
|
||
|
|
|
||
|
|
Desktop:
|
||
|
|
|
||
|
|
Before | After
|
||
|
|
--- | ---
|
||
|
|
 | 
|
||
|
|
|
||
|
|
### Fix SearchListControl styles (II) [#10308](https://github.com/woocommerce/woocommerce-blocks/pull/10308)
|
||
|
|
|
||
|
|
1. Create a new post or page and add the Single Product, Products by Category and Newest Products blocks.
|
||
|
|
2. In all of them, check that the list control UI looks correct; that's the UI that lets you choose the product/category:
|
||
|
|
|
||
|
|
Single Product (no change):
|
||
|
|
|
||
|
|
Before | After
|
||
|
|
--- | ---
|
||
|
|
 | 
|
||
|
|
|
||
|
|
Products by Category (slight margin change):
|
||
|
|
|
||
|
|
Before | After
|
||
|
|
--- | ---
|
||
|
|
 | 
|
||
|
|
|
||
|
|
Newest Products (broken UI fixed):
|
||
|
|
|
||
|
|
Before | After
|
||
|
|
--- | ---
|
||
|
|
<img src="https://github.com/woocommerce/woocommerce-blocks/assets/3616980/45389590-fef5-41b2-9be8-c7a768b2fc15" alt="" width="304" /> | <img src="https://github.com/woocommerce/woocommerce-blocks/assets/3616980/6836c343-ad95-47d1-a850-5d7ea9c3b204" alt="" width="304" />
|
||
|
|
|
||
|
|
:point_up: this UI is displayed in the sidebar, under the Filter by Category panel.
|
||
|
|
|
||
|
|
### Add missing page titles in Cart and Checkout templates [#10281](https://github.com/woocommerce/woocommerce-blocks/pull/10281)
|
||
|
|
|
||
|
|
» Verify that page titles are visible
|
||
|
|
|
||
|
|
1. Install a block-theme, e.g. [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/).
|
||
|
|
2. Go to WP Admin » Appearance » Editor » Templates.
|
||
|
|
3. Open the Cart template and verify that it has the page title `Cart`.
|
||
|
|
4. Open the Checkout template and verify that it has the page title `Checkout`.
|
||
|
|
5. Go to the frontend and add a product to the cart.
|
||
|
|
6. Go to the Cart page and verify that it has the page title `Cart`.
|
||
|
|
7. Go to the Checkout page and verify that it has the page title `Checkout`.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>Cart template (EN) - before:
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<img width="1512" alt="Screenshot 2023-07-19 at 19 14 51" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/7027813d-83bf-427e-9d4d-18324be0cbed">
|
||
|
|
</td>
|
||
|
|
<td>Cart template (EN) - after:
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<img width="1512" alt="Screenshot 2023-07-19 at 19 13 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/7d060bd5-e455-4dfc-a870-79f210b14f9f">
|
||
|
|
</td>
|
||
|
|
<td>Cart template (NL) - after:
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<img width="1512" alt="Screenshot 2023-07-20 at 12 40 21" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/eedb9060-b1ec-42a4-b2ab-e5b1b83bcace">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Checkout template (EN) - before:
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<img width="1512" alt="Screenshot 2023-07-19 at 19 15 19" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/4ea05fda-e1cb-471e-8798-78762adfadeb">
|
||
|
|
</td>
|
||
|
|
<td>Checkout template (EN) - after:
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<img width="1512" alt="Screenshot 2023-07-19 at 19 13 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/9e614530-763f-4c64-848d-ba8059a9d7e1">
|
||
|
|
</td>
|
||
|
|
<td>Checkout template (NL) - after:
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<img width="1512" alt="Screenshot 2023-07-20 at 12 40 42" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/6cc88e87-7056-47c7-8e10-6b5e13d6c6f0">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
### Add Color Panel [#10062](https://github.com/woocommerce/woocommerce-blocks/pull/10062)
|
||
|
|
|
||
|
|
This testing is utilizing the implementation in the Mini-Cart block to verify functionality
|
||
|
|
|
||
|
|
1. Ensure you are running WP 6.3 and/or the latest Gutenberg installed
|
||
|
|
2. Insert the Mini-Cart Block into a template.
|
||
|
|
3. Select the block, in the settings panel for the block, turn on the "Display total price" toggle so you're able to see the color changes.
|
||
|
|
4. Select the "Styles" panel.
|
||
|
|
5. Set custom colors for the Icon, Price, and Product count color options. Verify they are changed in the Mini-Cart block.
|
||
|
|
6. Save the template and then view on the frontend. Verify the Mini-Cart block has retained the custom colors.
|
||
|
|
|
||
|
|
### Create Mini-Cart template part area [#10203](https://github.com/woocommerce/woocommerce-blocks/pull/10203)
|
||
|
|
|
||
|
|
1. With WP 6.3 and a block theme, go to Appearance > Editor > Patterns.
|
||
|
|
2. Verify there is a Mini-Cart template part area containing the Mini-Cart template part.
|
||
|
|
|
||
|
|
Before | After
|
||
|
|
--- | ---
|
||
|
|
 | 
|
||
|
|
|
||
|
|
### Newest Products: fix Stock Status filter [#10201](https://github.com/woocommerce/woocommerce-blocks/pull/10201)
|
||
|
|
|
||
|
|
1. Go to Editor
|
||
|
|
2. Add Newest Products block
|
||
|
|
3. Focus on block
|
||
|
|
4. Try to open "Filter by stock status" and change the switches
|
||
|
|
5. Expected: Block doesn't crash and reacts to changes
|
||
|
|
6. Save and check that block renders on the frontend
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
Result after clicking "Filter by stock status":
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
| <img width="1107" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/38eb8ccd-b165-4460-9f37-9fe7175663c7"> | <img width="1106" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/f72189a5-86c4-4026-b066-9de7a7072bc5"> |
|
||
|
|
|
||
|
|
### Fix Misplacement of Shipping Radio Buttons [#10150](https://github.com/woocommerce/woocommerce-blocks/pull/10150)
|
||
|
|
|
||
|
|
Instructions
|
||
|
|
|
||
|
|
1. Create any test site.
|
||
|
|
2. Install and activate all the required plugins
|
||
|
|
3. Add sample products.
|
||
|
|
4. Add some Shipping methods.
|
||
|
|
5. Create new test page.
|
||
|
|
6. Add Cart block.
|
||
|
|
7. Change two-column grid to stacked column using align option.
|
||
|
|
8. Observe that "Shipping" radio buttons are not misaligned.
|
||
|
|
|
||
|
|
#### Screenshots
|
||
|
|
|
||
|
|
| Before | After |
|
||
|
|
| ------ | ----- |
|
||
|
|
|  | <img width="701" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/1d7a62cf-14aa-4d27-bb21-04d9d597160b"> |
|
||
|
|
|
||
|
|
|
||
|
|
## Feature plugin
|
||
|
|
|
||
|
|
### Remove border control for filter by attribute block [#10277](https://github.com/woocommerce/woocommerce-blocks/pull/10277)
|
||
|
|
|
||
|
|
1. Add a post and insert `Filter by Attribute` block.
|
||
|
|
2. Check that the `border controls` are no longer available in the `Styles` section of the `Inspector controls`.
|