Allows product grid block contents to be limited by stock level

[jonny-bull]

Adds a product stock dropdown to Product Grid blocks. This allows admin users to filter products by their stock status (in stock, out of stock, on back order or any status).

If the site has the 'Hide out of stock items from the catalog' WooCommerce setting enabled, this filter does not display.

The blocks effected are:

• Products by Attribute
• Products by Tag
• Top Rated Products
• Products by Attribute
• On Sale Products
• Newest Products

This has come from a client requesting Product Grid blocks that show only products in stock or on back order, without hiding all out of stock items across the site. This change should allow admin users more control over which products display in the above blocks. For example, creating a product block of products on back order could be used to drive pre-sales or draw attention to products that are due back in stock soon.

This work could also be extendable to include low stock products, allowing for users to create blocks of products that will sell out soon.

Fixes #2739

Accessibility

Interactions added in this PR are duplicates of existing interactions used on product grid blocks.

Screenshots

Screen.Recording.2021-10-11.at.12.07.06.mov

Very important note: the debug string visible in this video is to give a quick and easy visual indicator of what products are in stock and out of stock. It is not included in this PR.

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

Manual Testing

How to test the changes in this Pull Request:

1. On a Gutenberg page, add a new product grid block (namely, Products by Attribute, Products by Tag, Top Rated Products, Products by Attribute, On Sale Products or Newest Products)
2. In the right hand edit column, open the 'Stock level' panel
3. Change the drop down menu setting and observe the product list changing to match the new filter
4. Repeat with any variations and combinations of settings

Performance Impact

When filtering by stock meta_query is used by WP_Query to return the selected products. This can product slow queries.

Changelog

Added controls to product grid blocks for filtering by stock levels

[jonny-bull]

This is my first contribution to this plugin, so do point out any rookie errors or incorrect assumptions I've made here.

[mikejolley]

First, thanks for contributing. It's great to see! I added some inline comments/feedback for the current code.

This PR allows filtering to a specific status e.g. In stock vs On Backorder. Do you anticipate multiple statuses at once? E.g. show instock and onbackorder, but hide outofstock? If so we could consider using a multiselect component and array type, rather than select component with string type.

One other thing, we definitely need to refactor this to use https://github.com/woocommerce/woocommerce/blob/5cdf9799613ce00504c16c79dff5064d0ee54677/includes/wc-product-functions.php#L870 otherwise custom statuses will be ignored. Do you agree?

Thanks again. Let me know if you have questions about my comments.

[jonny-bull]

@mikejolley thanks for the review. Will be able to pick this up this week

[jonny-bull]

@mikejolley comments have been addressed. Let me know if there's more feedback.

One thing I've noticed, and want to fix, is preventing clicking the checkboxes while the edited block is reloading with updated data. Any pointers on that hugely appreciated.

[opr]

Hey @jonny-bull thanks for contributing! I've tested this out and had a look through the code, it all looks good. I've left a couple of comments for you to address but it's nothing major at all.

I have spent some time looking into how we can disable the checkboxes while the block is loading and there's nothing I can see that will allow us to do this. I might be missing something though.

Despite them not being disabled, rapidly changing the options while the block loads still seems to result in the correct output.

[jonny-bull]

Despite them not being disabled, rapidly changing the options while the block loads still seems to result in the correct output.

@opr yeah, I tried to demo this 'bug' to a client this week, but couldn't recreate it. Usually I demo things that work and find bugs, so nice to have it go the opposite way for once.

[opr]

Despite them not being disabled, rapidly changing the options while the block loads still seems to result in the correct output.

@opr yeah, I tried to demo this 'bug' to a client this week, but couldn't recreate it. Usually I demo things that work and find bugs, so nice to have it go the opposite way for once.

Awesome, that makes a nice change for sure. Glad it went well!

I'll approve this PR but wait until Mike is back and get his 👍🏼 to merge it.

note: I'm running the workflows for this PR, but the ESLint action will fail because the job is running from a fork. It looks good from my end though.

[jonny-bull]

@opr @mikejolley cool. That's two approvals. I don't have access to merge this PR. Can either of you push the button?

[mikejolley]

Thanks @jonny-bull, it's merged. And thanks @opr for reviewing.

[jonny-bull]

@mikejolley @opr and thanks to you both for the help with my first contribution. If there's more I can do, let me know

[mikejolley]

I think we missed something; this affects the All Products Block which is not a grid block. It's caused a little breakage so I will raise a PR to remove it from that particular block for now, and leave it in place for grid blocks only.