Review WooCommerce Blocks and ensure they work with the new Block Based widget area coming to WordPress 5.7

[nerrad]

WordPress 5.6 WordPress 5.7 is scheduled to introduce the new block based widget areas in WordPress. For this issue, we will need to test all the WooCommerce blocks in this new UI and ensure they work as expected.

We also need to review all WooCommerce widgets that are not converted to blocks yet and ensure they work with the new legacy widget wrapper/mechanism the block widget interface is adding.

(note block widget areas were punted to WordPress 5.7)

To expand this issue a bit (feel free to open a separate issue in Storefront if desired, I added here because I figured we'd be testing this issue in storefront anyways), let's see how WordPress core blocks work in Storefront with widget areas as well. Related, is this issue in the GB repo: WordPress/gutenberg#27458

[Aljullu]

Posting this comment that will serve as a summary of my in-progress work.

Set up

• You need to install Gutenberg, ideally the latest version in master.
• The widgets editor can be accessed from Appearance > Widgets.
• There is an alternative view from Appearance > Customize > Widgets, but according to this post, it will change dramatically.

Known issues

Currently, the widgets editor has some known issues that affect our widgets/blocks as well:

• Widgets editor: "There was an error. object Object" on save WordPress/gutenberg#27173
• Bogus undo and unsaved changes notification WordPress/gutenberg#26468

So when testing it's important to distinguish what's a Gutenberg bug and what's something specific to WooCommerce.

Testing WooCommerce Core widgets in the new widgets editor

Widget name	Works in editor?	Works in frontend?
Product Search	🗸	🗸
Product Tag Cloud	🗸	🗸
Product Categories	🗸	🗸
Products	❌1	🗸
Products by Rating	❌1	🗸
Recent Viewed Products	🗸	🗸
Products by Rating	🗸	🗸
Recent Product Reviews	🗸	🗸
Active Product Filters	❌2	🗸
Filter Products by Attribute	❌2	🗸
Filter Products by Price	❌2	🗸
Filter Products by Rating	❌2	🗸
Cart	❌3	🗸

Issues found

¹ Products and Products by Rating have the initial value of Number of products to show set to 5, but after pressing Update, that value is replaced by 1. This change is only visible when looking at the frontend or by reloading the widgets editor screen.
² WC Core filter widgets are invisible when previewed in the widgets editor. That's because they are only visible in the shop page, but it looks quite confusing for users.

³ In WC Core Cart widget, only title is visible when previewed.

Testing WooCommerce Blocks in the new widgets editor

Widget name	Works in editor?	Works in frontend?
Featured Product	❌1	🗸
Featured Category	❌1	🗸
Hand-Picked Products	❌1, 2	🗸
Best Selling Products	❌2	🗸
Top Rated Products	❌2	🗸
Newest Products	❌2	🗸
On Sale Products	❌2	🗸
Products by Category	❌1, 2	🗸
Products by Tag	❌1, 2	🗸
Products by Attribute	❌1, 2	🗸
Product Categories List	🗸	🗸
Reviews by Product	❌1	🗸
Reviews by Category	❌1	🗸
All Reviews	🗸	🗸
Product Search	🗸	🗸
All Products	❌1, 3, 6	🗸
Filter Products by Price	❌1, 6	🗸
Filter Products by Attribute	❌1	🗸
Active Product Filters	❌1, 6	🗸
Cart	🗸	❌4
Checkout	🗸	❌4, 5

Issues found

¹ SearchlistControl has some style conflicts (woocommerce/woocommerce-admin#5901):

Widget editor	Post/page editor

² Product grid images are skewed (#3553).

³ Having an All Products block in the sidebar and another one in the post can cause unexpected behavior. For example, if you change the pagination in the All Products block in the post content from 1 to 2, the grid of the All Products block in the sidebar gets updated too, but the pagination components is still marking 1 as the current page. A similar issue happens when interacting with the sort select: product grid is updated in both components but the select is not synced.

⁴ Coupon code input and button have different heights (#3575):

⁵ After completing an order, the shortcode is shown (WordPress/gutenberg#27793):

⁶ It can only be added in one widget area.

Testing WordPress Core blocks in Storefront

Widget areas	Works in editor?	Works in frontend?
Sidebar	❌1	🗸
Below Header	🗸	🗸
Footer Column 1	🗸	🗸
Footer Column 2	🗸	🗸
Footer Column 3	🗸	🗸
Footer Column 4	🗸	🗸

Issues found

¹ Cart button styles make it look disabled:

Other issues

• Several core widgets have their block equivalent. As a user, it's not clear what's the difference between them. In some cases, they are almost the same (Product Search), but in some others, they work completely different (ie filters: the widgets work in the Shop page and the blocks work with the All Products block).

[nerrad]

I'm sure you are already planning this Albert, but make sure you surface the WooCommerce core widget issues to Proton. I think that's something we can safely handoff to them to work on and we'll focus on the extensions we own along with Storefront and blocks compatibility with the new feature.

[nerrad]

@Aljullu it looks like most (if not all) of the things you found either have a tracking issue or are already have a fix merged. Can you confirm that? Do we need to keep this issue open or are there other things that should be considered as a part of doing work for Cycle 1?

I'm moving this issue to the backlog for now but will pull back into the cycle anything that needs addressed depending on your answer.

[Aljullu]

@nerrad yes, it's ok to close this issue. Everything that could be fixed on our end has been fixed and follow-up discussions are taking place in pca54o-KL-p2.