Store Editing Snaps: September 25 – October 6

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

Every couple of weeks, we give an update on all the work being done on WooCommerce Blocks from behind the scenes.

Let’s take a look at some highlights of what we’ve done since our last update.

Note that the linked #numbers that accompany each item below point to the relevant issues and pull requests on the GitHub repository.

---

What We’re Working On 🚧

We’ve worked on a number of things in the last two weeks but here are some specific items we want to highlight.

Store Customization

This project aims to create a brand new Store Customization experience by introducing new key features, such as an updated design hub, onboarding experience, and more. While many different teams are working on this initiative, our primary focus in this phase is to start implementing AI-driven flows, helping users design their stores with the power of AI.

During this cycle, the goal is to have AI manage the images displayed in patterns, ensuring they dynamically change depending on what the user decides to add as a description for their business in the settings.

Store Customization > Ensure the Just Arrived Full Hero pattern can have an AI selected image assigned to it (#11159)

Here, we’ve updated the Just Arrived Full Hero pattern to ensure that it can be assigned AI-managed images.

Additionally, we’ve added a background dim over the image, depending on the image that AI assigns to the pattern. This was done to prevent readability issues.

Remove opinionated styles from the Hero Product 3 Split pattern (#11110)

In this PR, we’ve removed the opinionated styles for the Hero Product 3 Split pattern.

Now, when color palettes are selected globally for a theme, the pattern inherits the colors from the selected palette or global styles and doesn’t contrast, or look out of place on the page.

[Store Customization MVP] Fix conflict with other plugins (#11082)

Here, we’ve fixed a PHP error that was occurring when the WooCommerce Product Add-ons or the WooCommerce Product Bundles plugins were enabled.

The issue was present because both plugins are using the rest_request_after_callbacks filter and accessing the response data as an array but we were returning an object.

Product Gallery Block

This project builds off of our previous work and aims to introduce additional functionalities to the blocks and enhance their interactivity. We plan to achieve this utilizing the Interactivity API and the Behaviors API, alongside enhancing block reliability through the development of e2e tests within the new Playwright infrastructure. 

Product Gallery: fix ‘Block woocommerce/product-gallery-large-image is already registered’ error (#11124)

As mentioned in the title, this fixes the console error (`Block “woocommerce/product-gallery-large-image” is already registered`) that occurs when a user opens the Site Editor.

Product Gallery > Next/Previous Buttons block: Add support to Interactivity API (#10938)

Here, we’ve added support for the Interactivity API on the Next/Previous buttons block, allowing shoppers to navigate between the gallery images without having to reload the page.

Frontend Filters

The goal of this project is to improve the performance of all filters that impact the products blocks. We want to make the filters’ context aware, so we only query the products we need and make overall user experience better and smoother by exploring the use of interactivity API.

CollectionFilters: Hydrate Collection Data for inner filter blocks (#10873)

Here, we’ve hydrated the collection data API request for all inner filter blocks from the CollectionFilters block, then passed down the response through context.

Making filter block contextual on the front end (#10919)

Thanks to the amazing ProductCollectionData route, we can make all filter blocks contextual in one place.

In additional to the collection data params in PR #10873, we’ve converted the ProductCollection block query context to Store API ProductCollectionData route params.

Other Notable PRs / Issues ✅

• Product Button: use setTimeout when requestIdleCallback isn’t available (#11125)
• Pattern: fetch product id on the JS side (#11138)
• Returning $pre_render_block in the pre_render_block filter (#11143)

WooCommerce Blocks Releases ✨

• 11.2.0 – Many of the changes noted in this post are included in the 11.2.0 release of the WooCommerce Blocks feature plugin from October 3rd. You can find the full details in the release notes. 

---

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