Store Editing Snaps: Stability, Performance, Reliability, and more!

Hello and welcome to another round of Snaps from the WooCommerce Store Editing team! 🎇

Every month, we give an update on all the work being done by our team from behind the scenes. We’ve worked on a number of things in the last month, but below are some specific items we want to highlight since our last update.

---

Product Collection block

The Product Collection block has been making great strides, and we are on our way to graduate it from “beta” thanks also to all the great feedback and enthusiasm we received during this phase.

Here are some highlights:

Clarified preview state within templates (#46369)

Previously, there was some confusion when using the Product Collection block in templates like “Products by category”, “Products by tag”, and “Products by attribute”.

If the “Sync with current query” option was turned ON, the products you saw while editing wouldn’t match what was shown on the actual website. This was because the products displayed on the website depended on factors like the category being viewed, which wasn’t considered in the editor.

To fix this, a preview label has been added:

A tooltip will appear when you hover over the “Preview” label in the Editor, stating: “Actual products will vary depending on the page being viewed”. This serves as a reminder that the products shown in the editor are for preview purposes only and do not represent the exact products that will be displayed on the front-end.

Note: The preview label will only be visible when the Product Collection block or any of its inner blocks is selected. This approach helps keep the user interface clean and uncluttered.

Fixed Taxonomy Term Limit On Product Collection Filters (#47155)

Previously, we had an issue that caused not all the categories within your store to be selectable in the “Product Categories” filter within a Product Collection block. This was especially evident in stores with a large amount of categories.

This limitation is now removed, and all categories are correctly accessible from the filter.

---

Templating logic update

We are making some improvements to the logic that handles WooCommerce templates (i.e. Product Catalog, Products by Category, Single Product, Cart, Checkout, etc.).

After spending the first weeks improving test coverage, modernizing the code and, with it, fixing some long-standing bugs, we are working on the second phase of this deep refactor. The goal is to add extensibility points upstream in Gutenberg, so plugins can easily register templates and template parts without having to write huge amounts of custom code on their end.

Extending available templates via plugins (gutenberg#41401)

Currently, it’s not easy for plugins to register templates and template parts, as they need to hook into several filters.

We have submitted a proposal outlining the potential design of an API that would allow the registration of templates and template parts from plugins. You can find the proposal in the original GitHub issue, and you can find a very early exploration of an implementation in the associated PR.

If you have any feedback, feel free to share it in the issue!

Introduce template_name label to custom post types and custom taxonomies (WordPress#6344 and gutenberg#60367)

We also made a suggestion about adding a template_name label to custom post types and custom taxonomies. This label can then be used in the Site Editor to display user-friendly labels for templates, instead of using the singular_name value, which is not as readable.

Replace div element with main in block templates (#47119)

We have updated several block templates to replace the main <div> element with a <main> tag.

One big benefit of the <main> tag over a <div> is that assistive technologies, such as screen readers, can more effectively identify and navigate to the primary content when encapsulated within a <main> tag.

This change will land in WooCommerce 9.0, scheduled for June 11, 2024. You can read more about this change in our Developer Advisory: HTML Tag Update in Block Templates for WooCommerce 9.0

Updated documentation for blocks and block templates styling (#47269)

We updated the docs about theming to highlight that the recommended way to style blocks and block templates is using global styles. They offer many benefits over CSS like better performance, allowing user customization from the UI and are less likely to cause conflicts between plugins and themes.

Updated documentation related to block templates classes (#47110)

We also updated the documentation about WooCommerce classes that handled block templates logic. Those docs became out of date recently, as we introduced many changes to this part of the codebase.

---

Store Customization: Full Composability 

This project aims to introduce full composability to the Customize Your Store Assembler, allowing users to design their homepages by adding, removing, and shuffling patterns.

Block Toolbar

The Block Toolbar will allow you to move, shuffle, and delete patterns:

Currently, we have the following work-in-progress:

• Allow the user to move patterns (#47322)
• Allow the user to shuffle patterns of the same category (#47356)
• Highlight the main block at hover (#47415)

Also, we had the chance to contribute to Gutenberg and make the BlockPopover component public (gutenberg#61529) allowing any consumer of this component to create a custom BlockToolbar and customize it according to their application needs: that’s how we built the above-mentioned features! We are keen to see what you can build with that.

Migrating WooCommerce Patterns to the Pattern Toolkit (PTK)

With Pattern Toolkit we can rely on the dedicated API to fetch WooCommerce and other curated patterns for usage within our platform. An additional positive outcome is that the size of the WooCommerce plugin will be significantly reduced, considering all images required for patterns will be migrated to this dedicated API.

Currently, we have the following work-in-progress:

• Update the registration of patterns within WooCommerce, ensuring they are fetched from the relevant PTK categories (#47306)

---

---

Thanks for following along with us – until next time! 👋