diff --git a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1100.md b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1100.md new file mode 100644 index 00000000000..e72df72adcf --- /dev/null +++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1100.md @@ -0,0 +1,227 @@ +# Testing notes and ZIP for release 11.0.0 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12472807/woocommerce-gutenberg-products-block.zip) + +## WooCommerce Core + +### Enhancements + +#### Enable Product Collection as a core feature [#10524](https://github.com/woocommerce/woocommerce-blocks/pull/10524) + +This PR enables a block that's been developed for a couple of months. Product Collection includes many functionalities and each of the changes at the moment of merging the particular functionalities. I don't think we should test ALL of them again, especially since the testing steps would be unreadable. However, I believe the major paths should be re-tested. + +In some cases, I linked PRs. In that case, please refer to the testing scenarios from respective PR: + +##### Major scenarios + +###### Inserting + +0. This PR should be tested in production build, so use `npm run build:deploy` if you test locally. Ignore this step when testing plugin as a whole. +1. Go to Editor +2. Type "Product Collection" and "Products (Beta)" +3. In both cases Product Collection (Beta) should appear in the inserter +4. Try to insert it +5. It should appear correctly in the Editor +6. Save and make sure it displays correctly in the Frontend + +###### Inherit from query template + +1. Open the Editor and navigate to the "Product Search Results" +2. Replace the existing 'Classic Template' block with the 'Product Collection' block. +3. After the 'Product Collection' block is successfully inserted, ensure that the 'Inherit query from template' option is enabled by default. +4. Save the changes. +5. Navigate to the frontend of your website. You can emulate a search for "shirt" by visiting the URL "/shop?s=shirt". Confirm that the search query `shirt` effectively displays related products. +6. Head back to the Editor. +7. In the 'Product Collection' block, deactivate the 'Inherit query from template' option. +8. Subsequently, you should observe various settings and filters available in the inspector controls. Modify these filters and settings as required and validate immediately that the changes are visible within the Editor. +9. Save your modifications and return to the frontend of your website. +10. Ensure that the adjustments made to the 'Product Collection' block within the Editor are accurately displayed on the frontend of your website. + +###### Filters + +1. Add Product Collection and Products (Beta) block side by side +2. Disable "Inherit query from template" in both +3. Set of filters should appear in the Inspector Controls +4. Play around with the filters setting up the same conditions in both cases (be aware Product Collection offers more filters than Products (Beta), so you may not be able to recreate all of the scenarios in Products (Beta) block) +5. Treat Products (Beta) block as a reference - the results in product grid should be the same in both cases. We look for discrepancies between blocks. Keep in mind in some scenarios filters may be mutually exclusive or there may be some existing bugs. If they occur in both blocks, feel free to report it but it's not a blocker to release Product Collection. + +###### Global Styles + +1. Add Product Collection and Products (Beta) block side by side +2. Play around with the Global Styles of Product Collection/Products, Product Template and particular Product Elements. +3. As in case of Filters we look for discrepancies between blocks. If there's bug that occur in both blocks, feel free to report it but it's not a blocker to release Product Collection. + +###### Product Elements + +1. Make sure you're able to add all of the following blocks in Product Template of Products Collection + +- Product Image +- Product Title +- Product Price +- Product SKU +- Product Summary +- Product Rating +- Product Stock Indicator +- On sale badge +- Add to Cart Button + +###### Others - play with it + +1. Play with Product Collection as you would as a merchant. Test it, try to break it. Think of stuff we didn't think of and try it out! + + +#### Enable manual migration of Products to Product Collection [#10655](https://github.com/woocommerce/woocommerce-blocks/pull/10655) + +1. Go to Editor and add at least two Products (Beta) block +2. In one of them disable "Inherit query from template" and apply some advanced filters, for example, "Handpicked products" +3. Focus on either of the Products (Beta) block +4. Expected: There's an Upgrade Notice in Inspector Controls + +image + +5. Click "Upgrade to Product Collection" +6. Expected: all Products (Beta) blocks should be replaced with Product Collection blocks preserving the block settings (filters) + + +#### Footer Patterns > Ensure the “My Account” text has the same font size as the other texts nearby [#10614](https://github.com/woocommerce/woocommerce-blocks/pull/10614) + +| Before | After | +| ------ | ----- | +| Screenshot 2023-08-16 at 10 04 33 Screenshot 2023-08-16 at 10 01 21 | Screenshot 2023-08-16 at 10 02 12 Screenshot 2023-08-16 at 10 01 37 | + +1. Create a new post +2. Insert the Large Footer, Large Footer Dark, Simple Footer and the Simple Footer Dark patterns +3. Make sure the size of the My Account text is the same when compared with other texts in the footer (as demonstrated in the "After" column in the description of this PR). +4. Publish the post and make sure the patterns are correctly displayed on the FE as well. + +#### Testimonials Single Pattern > Update the image format and content width [#10600](https://github.com/woocommerce/woocommerce-blocks/pull/10600) + + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-08-15 at 12 33 09 Screenshot 2023-08-15 at 12 39 30 | Screenshot 2023-08-15 at 12 36 31 Screenshot 2023-08-15 at 12 37 17 | + + + +1. Create a new post +2. Insert the **Testimonials Single** Pattern +3. Make sure the pattern is correctly displayed in the editor +4. Save the post and head over to the front end: make sure the pattern is correctly displayed both on desktop and mobile view (the layout should match the one demonstrated in the above screenshots in the **After** column). + +### Bug Fixes + +#### Fix UI misalignment of Filter by Price in TT1 theme [#10732](https://github.com/woocommerce/woocommerce-blocks/pull/10732) + +1. On TT1 theme +2. Create new post +3. Add Filter by Price and Products (Beta) so filter is displayed +4. Make sure it looks like on screenshots (nice UI alignment) and they're functional (change values) +5. Repeat on TT2 and TT3 to make sure they stayed untouched +6. Check on Chrome, Firefox, Safari + + + +| Before | After | +| ------ | ----- | +| image | image | + +#### Make View Cart link displayed below the Add to Cart button [#10675](https://github.com/woocommerce/woocommerce-blocks/pull/10675) + +1. Edit Product Catalog template +2. Add Products (Beta) block if it's not there already +3. Save and go to frontend +4. Add a simple product to cart +5. Expected: "View Cart" link appears BELOW the Add to Cart button + +| Before | After | +| ------ | ----- | +| image | image | + +#### Store Breadcrumbs block: Fix icon color when block is selected in List View [#10652](https://github.com/woocommerce/woocommerce-blocks/pull/10652) + +1. 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. +2. On the left-hand side menu, click on Appearance > Editor > Templates +3. Find and select the 'Single Product' template from the list. +4. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before. +5. On the top-right side, click on the Save button. +6. On the left side, check the List View and select the 'Store Breadcrumbs' block. Make sure the icon changes it's color from a dark color to a white color when the block is selected on the list + +| Before | After | +| ------ | ----- | +| image | image | + +#### Dispatch the wc-blocks_render_blocks_frontend event when rendering the empty cart block [#10619](https://github.com/woocommerce/woocommerce-blocks/pull/10619) + +##### User-facing testing + +1. Add the Cart block and switch to the Empty Cart edit mode. +2. Replace the Newest products block with the All Products block. Feel free to add other JS-rendered blocks like a filter or a Reviews block. +3. View the page in the frontend. +4. Verify all blocks render correctly when the cart is empty. Try adding a product to the cart (so it switches to the Full Cart view) and removing it (so it switches back to the Empty Cart view). Verify the blocks still render correctly. + +##### Developer Facing Testing + +1. Install [Carousel Slider Block for Gutenberg](https://wordpress.org/plugins/carousel-block/) and activate it. +2. Edit the plugin's files, find `wp-content/plugins/carousel-block/blocks/carousel/view.js` - change the code inside to: + +```ts +/*! + * Carousel Block + * Version: 1.0.0 + */ +( function ( $ ) { + const cartBlock = document.querySelector( '.wp-block-woocommerce-cart' ); + cartBlock.addEventListener( + 'wc-blocks_render_blocks_frontend', + function () { + $( '.wp-block-cb-carousel' ).slick(); + } + ); +} )( jQuery ); + +``` + +4. Open the Cart page in the site editor and edit the template. +5. Select the Cart block and click the "Filled cart" button, change the view to "Empty cart". +6. Add the Carousel Slider block, add some slides to it (I used images, and added 4). +7. Save the template. +8. Load the Cart block in the front end. If there's an item there, remove it. +9. Ensure the carousel you added renders correctly and you can move between slides. +10. Add an item to your cart. +11. Remove the item and double check the carousel slider still works when returning to the empty cart. +12. Also perform the user-facing testing. + +#### Remove client side navigation from Products beta block [#10636](https://github.com/woocommerce/woocommerce-blocks/pull/10636) + +1. Create a new post +2. Add Products (Beta) block & publish it +3. On Frontend, verify that + 1. Client-side navigation isn't there anymore i.e. changing the page should also refresh the page + 2. Verify that Product button(Add to cart) still works as expected. + +## Should be tested by the development team exclusively + +### Bug Fixes + +#### Refactor block variation registration in product-collection [#10701](https://github.com/woocommerce/woocommerce-blocks/pull/10701) + +1. Since the issue was reproducible in Production build, so run `npm run build:deploy` to create a production build +2. Create a new post. +3. Insert a 'Product Collection' block. +4. Ensure you can include a 'Product Summary' block within it using the block inserter. +5. Upon adding the 'Product Summary' block, publish the post and check that the 'Product Collection' block is displayed accurately on the frontend. + +#### Fix "On sale" badge class [#10634](https://github.com/woocommerce/woocommerce-blocks/pull/10634) + +| Before | After | +| ------ | ----- | +|Screenshot 2023-08-17 at 09 57 30| Screenshot 2023-08-17 at 09 56 36 | + +1. Checkout to the PR branch and run `npm run start`. +2. Enable a blocks theme (like TT3). +3. Create a new page or post. +4. Add the Products (Beta), Products Collection, Products by Attribute, Products by Tag, Products by Category, Handpicked products, and All products blocks. +5. Check the Sale badge is shown on the top-right corner of the image on all of them, in the editor, and in the frontend. +6. Go to the classic shop page and check the Sale badge also shows in the top-right corner of the product image. +7. Repeat steps 3 to 6 with Storefront enabled. diff --git a/plugins/woocommerce-blocks/phpcs.xml b/plugins/woocommerce-blocks/phpcs.xml index 15c520c0987..b918a2a6314 100644 --- a/plugins/woocommerce-blocks/phpcs.xml +++ b/plugins/woocommerce-blocks/phpcs.xml @@ -8,7 +8,7 @@ languages/woo-gutenberg-products-block.php - + diff --git a/plugins/woocommerce-blocks/readme.txt b/plugins/woocommerce-blocks/readme.txt index 99566b0febe..d42c5f8dff4 100644 --- a/plugins/woocommerce-blocks/readme.txt +++ b/plugins/woocommerce-blocks/readme.txt @@ -4,7 +4,7 @@ Tags: gutenberg, woocommerce, woo commerce, products, blocks, woocommerce blocks Requires at least: 6.3 Tested up to: 6.3 Requires PHP: 7.3 -Stable tag: 10.9.0 +Stable tag: 11.0.0 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html @@ -81,6 +81,30 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ == Changelog == += 11.0.0 - 2023-08-30 = + +#### Enhancements + +- Enable Product Collection block. ([10524](https://github.com/woocommerce/woocommerce-blocks/pull/10524)) +- Add Product Collection Grid pattern. ([10660](https://github.com/woocommerce/woocommerce-blocks/pull/10660)) +- Enable manual migration of Products to Product Collection. ([10655](https://github.com/woocommerce/woocommerce-blocks/pull/10655)) +- Footer Patterns > Ensure the “My Account” text has the same font size as the other texts nearby. ([10614](https://github.com/woocommerce/woocommerce-blocks/pull/10614)) +- Updated the image format and content width for the Testimonials Single Pattern. ([10600](https://github.com/woocommerce/woocommerce-blocks/pull/10600)) +- Product Gallery block: Add Pager block. ([10320](https://github.com/woocommerce/woocommerce-blocks/pull/10320)) + +#### Bug Fixes + +- Fix UI misalignment of Filter by Price in TT1 theme. ([10732](https://github.com/woocommerce/woocommerce-blocks/pull/10732)) +- Refactor block variation registration in product-collection. ([10701](https://github.com/woocommerce/woocommerce-blocks/pull/10701)) +- Make View Cart link displayed below the Add to Cart button. ([10675](https://github.com/woocommerce/woocommerce-blocks/pull/10675)) +- Store Breadcrumbs block: Fix icon color when block is selected in List View. ([10652](https://github.com/woocommerce/woocommerce-blocks/pull/10652)) +- Fix "On sale" badge class. ([10634](https://github.com/woocommerce/woocommerce-blocks/pull/10634)) +- Ensure the event dispatched when rendering the empty cart block is done only when it actually renders. ([10619](https://github.com/woocommerce/woocommerce-blocks/pull/10619)) + +#### Various + +- Remove client side navigation from Products beta block. ([10636](https://github.com/woocommerce/woocommerce-blocks/pull/10636)) + = 10.9.3 - 2023-08-24 = #### Bug Fixes