Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/8563282/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce
### Add PHP templates support to the Active Product Filters block. ([6295](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6295))
1. With a block theme, go to Edit Site > Product Catalog.
2. Add `Active Product Filters`, `Filter Products by Stock`, `Filter Products by Attribute`, `Filter Products by Price` blocks to the template.
3. Go to the shop page on the front end.
4. Select some filters, see the page reload and the selected filters appear in the Active Products Filters block.
5. Remove an arbitrary filter, see the page reload and the removed filter doesn't appear in the Active Product Filters block. See the filtered product results updates accordingly.
### Enhanced the *Featured Category block* ([6276](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6276)):
1. Use a block theme (such as Twenty Twenty Two)
2. Add the ”Featured Category” block to a page and select a product.
3. Make sure that the resizable handle is a shown fully (it should be a full circle), and that is shown only when the block is selected.
4. Select the block and apply a Duotone filter.
5. Make sure the overlay color control is under the `Overlay` section and change the overlay color to a gradient.
6. Add a padding to the block and make sure the padding is added on the inside of the wrapper (i.e. no white space is created outside of the block).
7. Move around your image focal point and make sure you can actually move around the entire image and not only constrained on one dimension.
8. Apply “Image fit > Cover”and notice how the image will scale along with the container. As opposed to point 5 above, now the focal point picker is limited to one dimension.
9. Increase the `padding-top` of the block and notice that the content can't get pushed out of the container, but instead the container resizes.
10. When that's the case, try resizing the block through the handle to a lower height: the handle should move but the container should not resize. When the mouse is lifted, the handle should return to its original position.
11. For the steps 4–9 above, save the page and check that the styles are applied correctly on the front-end (as the block is rendered statically via PHP).
### Allow adding the Filter Products by Stock block to Product Catalog templates to filter products. ([6261](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6261))
1. With a block theme, go to Appearance > Editor > Template > Product Catalog.
2. Add the Filter Products by Stock block above the product grid.
3. Be sure that you have some out stock products. Check "out of stock" on the frontend.
4. Notice the page reloads and the list of products updates accordingly.
5. Add a test page to your site with the `All Products` block, and the `Filter Product by Stock` block and ensure no regressions have been introduced here.
### Enhanced the *Featured Product block* ([6181](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6181)):
1. Use a block theme (such as Twenty Twenty Two)
2. Add the ”Featured Product” block to a page and select a product.
3. Make sure that the resizable handle is a shown fully (it should be a full circle), and that is shown only when the block is selected.
4. Select the block and apply a Duotone filter.
5. Make sure the overlay color control is under the `Overlay` section and change the overlay color to a gradient.
6. Add a padding to the block and make sure the padding is added on the inside of the wrapper (i.e. no white space is created outside of the block).
7. Move around your image focal point and make sure you can actually move around the entire image and not only constrained on one dimension.
8. Apply “Image fit > Cover”and notice how the image will scale along with the container. As opposed to point 5 above, now the focal point picker is limited to one dimension.
9. Increase the `padding-top` of the block and notice that the content can't get pushed out of the container, but instead the container resizes.
10. When that's the case, try resizing the block through the handle to a lower height: the handle should move but the container should not resize. When the mouse is lifted, the handle should return to its original position.
11. For the steps 4–9 above, save the page and check that the styles are applied correctly on the front-end (as the block is rendered statically via PHP).
### Allow saved payment methods labels other than card/eCheck to display brand & last 4 digits if present. ([6177](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6177))
1. Install latest dev/release version of WooCommerce Payments & setup an account in [dev mode](https://woocommerce.com/document/payments/testing/dev-mode/).
2. Under WooCommerce Payments -> Settings, Enable the new WooCommerce Payments checkout experience and add new payment methods.
- This _should_ have enabled Euros in Multi-Currency automatically, but if not, go to WooCommerce > Settings > Multi-Currency and enable Euros as an additional currency.
3. Save SEPA account to your customer account in one of two ways:
- Add item to your cart and go to the classic checkout page, select SEPA, enter the account, and choose Save payment information to my account for future purchases., then check out.
- Go to My Account > Payment Methods, and add the SEPA method there.
- SEPA account to useAT611904300234573201 or other test numbers available here: https://stripe.com/docs/testing#sepa-direct-debit
4. Once the SEPA method is saved, add an item to your cart and go to the page with the checkout block.
5. Confirm that under Payment options you will see SEPA IBAN ending in 3201.
### Store API: Allow Store API to filter products by custom taxonomies. ([6152](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6152))
1. Add an All Products Block to a page, add the Filter Products by Attribute Block, and Filter by Price Block too.
2. Go to the page and use the filters, ensure they update the All Products Block correctly.
### Filter Products by Attribute: Fix the page reload which happens when clicking the filter button on Woo templates using the Classic Template block. ([6287](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6287))
1. On a block theme, go to Edit Site > Product Catalog template.
2. Add Active Filters and Filter Products by Attribute block to the template.
3. Choose an attribute to filter, and make sure the filter button is toggled.
4. Go to the shop page.
5. Select an attribute, a reload should not happen until you click the filter button.
6. Once the filter has been applied. Uncheck it, a reload should not happen until you click the filter button.
7. Try this again with the filter button untoggled, although these reloads should now happen as soon as you check the attribute you're filtering by
8. Check there are no regressions on All Products block.
### Store API: Show visible attributes in simple products, and hidden attributes in variable products. ([6274](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6274))
1. Create a simple product with attributes and set them as visible.
2. Using a REST client, fetch `wc/store/v1/products/:id` and check the attributes field for the product where `:id` is the product id, in both cases, you should see the attributes you added.
3. Uncheck visible attributes, fetch your product again, no attributes should be returned.
4. Turn the product into a variable product, keep attributes hidden but check "used for variations".
5. Fetch your product again, you should see your attributes.
6. Make them visible, you should still see the attributes.
### Add RTL support for the Mini Cart icon. ([6264](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6264))
1. Add Mini Cart to the site (Header for block themes, Sidebar for classic theme).
2. Set the language to an RTL language (ie: Arabic).
3. See the Mini Cart looks good on the front end.
### Fix page load problem due to incorrect URL to certain assets. ([6260](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6260))
1. Install WC 6.4 but move and symlink its folder.
3. Try to open wp-admin > WooCommerce > Home (/wp-admin/admin.php?page=wc-admin). With base branch, expect a blank page. With this PR branch, expect page loads normally.
### Make Filters Products by Price work with Active Filters block for the PHP rendered Classic Template. ([6245](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6245))
1. Add the `Filter Products by Price` block &`Active Filters` block to the **Shop** Page
2. Open the **Shop** page
3. Use the `Filter Products by Price` block, the page should reload with the filter params now being in the URL too.
4. Check the `Active Filters` block shows the active price filter.
### Fix attribute filter dropdown list z-index level. ([6294](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6294))
1. Create new page with Filter Products by Attribute and All Products block right under
2. Configure Filter block to use Dropdown display style and show Colour attribute (if using sample products)
3. Have products on sale in first row
4. Visit page and focus on field to see dropdown
- All Products block Placeholder elements should be under the dropdown
- Sale badge shouldn't bleed through the dropdown
### Fix Featured Product block frontend mismatch. ([6263](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6263))
1. Switch to a block-enabled theme (such as Twenty-twentytwo).
2. Add the Featured Product block to a page.
3. Confirm that it has a default, semi-transparent, black overlay and that a default height of 500 px or whatever the theme supports through the `featured_block::default_height` setting.
4. Publish the page.
5. Preview the page and confirm that the block looks like the one in the editor (specifically for height and overlay).
6. Play around with the styles of the block on the editor (change the overlay color, the padding, the opacity, the image fit etc.).
7. Confirm they get correctly applied on the frontend.
### Fix Customizer fatal error on PHP 8. ([6317](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6317))
1. Switch to PHP 8.
2. Activate WC 6.5 beta 1 and Storefront.
3. Apply change in this PR to `wp-content/plugins/woocommerce/packages/woocommerce-blocks/src/BlockTypes/MiniCart.php`.
4. Go to Appearance > Customize.
5. See no fatal error, the Customizer is loading and working as expected.
### Fix page refresh when using filters with the All Products block on non-product archive templates for WooCommerce. ([6324](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6324))
1. Activate Storefront
2. Add the All Products block to a newly created page, along with a filter block such as Filter by Attribute
3. Visit this page on the frontend and select some attributes to filter by.
4. Observe the filters being applied without a page refresh.
@ -86,6 +86,48 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/
== Changelog ==
= 7.5.0 - 2022-04-25 =
#### Enhancements
- Add PHP templates support to the Active Product Filters block. ([6295](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6295))
- Enable Draft orders in WooCommerce Core. ([6288](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6288))
- Enhanced the *Featured Category block*:
- Implemented support for duotone.
- Implemented support for gradients on the overlay.
- Implemented support for custom inner padding.
- Implemented image fit options: users can now decide how should the image behave on the resizing of the component; it can either scale to always cover the entire container, or remain its original size.
- Fixed an inconsistency where the overlay color was controlled by the background color control. It is now moved to the correct section.
- Fixed the focal point picker, it now works on both axis as long as the image fit (above) is set to `none`.
- Fixed an issue with the visibility of the resizing handle.
- Fixed an issue which would keep the resizing handle always active regardless of block selection status.
- Changed the behavior of the resizing: The block can't be resized below a minimum height determined by its content plus the padding. ([6276](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6276))
- Allow adding the Filter Products by Stock block to Product Catalog templates to filter products. ([6261](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6261))
- Enhanced the *Featured Product block*:
- Implemented support for duotone.
- Implemented support for gradients on the overlay.
- Implemented support for custom inner padding.
- Implemented image fit options: users can now decide how should the image behave on the resizing of the component; it can either scale to always cover the entire container, or remain its original size.
- Fixed an inconsistency where the overlay color was controlled by the background color control. It is now moved to the correct section.
- Fixed the focal point picker, it now works on both axis as long as the image fit (above) is set to `none`.
- Fixed an issue with the visibility of the resizing handle.
- Fixed an issue which would keep the resizing handle always active regardless of block selection status.
- Changed the behavior of the resizing: The block can't be resized below a minimum height determined by its content plus the padding. ([6181](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6181))
- Allow saved payment methods labels other than card/eCheck to display brand & last 4 digits if present. ([6177](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6177))
#### Bug Fixes
- Filter Products by Attribute: Fix the page reload which happens when clicking the filter button on Woo templates using the Classic Template block. ([6287](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6287))
- Store API: Show visible attributes in simple products, and hidden attributes in variable products. ([6274](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6274))
- Add RTL support for the Mini Cart icon. ([6264](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6264))
- Fix page load problem due to incorrect URL to certain assets. ([6260](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6260))
- Fix: Make Filters Products by Price work with Active Filters block for the PHP rendered Classic Template. ([6245](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6245))
#### Various
- Product Query: Pass any product taxonomies existing in the URL parameters. ([6152](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6152))
github-actions[bot]
GitHub