Back in August, I published a peek into the WooCommerce Blocks roadmap and I’m back with another update! This update is a bit later than planned because we’ve been super busy the first part of this year making some organizational changes to help support all the work we’re doing at the intersection of WooCommerce and changes in WordPress.
Introducing Store Editing
For those in the WordPress community, you are already aware of some of the significant shifts happening around the interfaces users can use to not only create content but also edit their site. Here at Woo, we’ve recognized the incredible opportunities this presents to dramatically improve the experience of merchants, store builders, and commerce-focused theme creators in customizing WooCommerce powered stores. With that in mind, we’ve invested some effort around the concept of Store Editing.
In a nutshell, Store Editing is used to describe a collection of technologies and interfaces that allow merchants or store builders to customize their store via a no-code required visual canvas.
It’s all about customization…
Traditionally in WooCommerce, there are multiple different paths to customizing a store:
- Using the WordPress customizer interface – which provides some visual feedback dependent on what the theme or plugin exposes as controls.
- Via PHP and JS in WooCommerce templates – WooCommerce comes with some default templates out of the box for various views. Themes (or plugins) can override and customize things like layout or content via replacing these entire templates (written in code).
- Via PHP filter and action hooks – Again, via code, plugins or themes can utilize a myriad of different PHP filter and action hooks to inject custom content or modify existing content. So instead of replacing an entire template, they can opt to only work with a specific part of the content (which in turn can impact any theme that overrides that template).
While all of the above options have provided a great deal of flexibility in store creation and design, most customization requires the merchant to implement code changes (whether themselves, hiring a developer, or using a plugin/theme that comes close to what they want).
WooCommerce has always been flexible and customizable, however, much of that has required custom or low code solutions. Plugins and themes have always provided great starting points but there really hasn’t been a consistent way for merchants to apply their distinct branding and creativity to their stores with no code interfaces.
Thanks to the fantastic work producing new interfaces in WordPress such as the block editor and Full Site Editing, there are incredible opportunities for us to utilize these interfaces to dramatically improve the customization experience for merchants.
Who are we building for?
The primary consumer of everything we build in this new Store Editing environment is the merchant. The end result is that merchants should have more ability than ever to be able to completely customize their store themselves even if they don’t know any code.
However, we also have a high value on the other consumers of Store Editing that will help us get to that primary goal:
Low Code Builders (or assemblers) are a growing segment of people that build stores for merchants. They typically take care of setting up the site on a host, installing the theme, installing plugins, and doing initial setup for clients who have hired them to build (and sometimes maintain) their store. These builders tend to rely on page builder solutions available in the market (Beaver Builder, Elementor etc) to customize the “final mile” to the merchant’s needs. With Store Editing, builders should have the option to eliminate (or supplement) a lot of third-party page builder tools from their tech stack and utilize what is native to WordPress and WooCommerce for finalizing that last mile more quickly and with better performance.
Custom Solutions Builders (agencies and developers) – This segment typically code completely bespoke stores for their clients. With Store Editing, agencies and developers can still code custom solutions, however, they will also be able to piggyback on all the APIs and components we provide to enable consistent and flexible solutions that are still unique for each client but also re-usable across all clients. They will also be able to more rapidly iterate on changing needs of their clients and accomplish more, for less.
Ecosystem Experts (extension and theme developers) – There will always still be a need for this group of people within the Woo Ecosystem no matter how much our interface changes to a no-code/low-code paradigm. What will change, is that instead of the ecosystem having to reproduce various user interfaces and experiences in the solutions they build, they will be able to tap into a common set of APIs and components to create those solutions. This in turn will lead to a more consistent and powerful interface for the consumers of their extensions and themes and give more time back to the extension and theme developers to iterate on the unique logic/design of their solutions. There will also be potential for new emerging marketplaces that offer blocks, block patterns, and template part variations as improved ways for stores to be customized.
The Roadmap
Of course, the prelude describes the ideal that we’re aiming for and the road from here to there still has work ahead. To help our ecosystem come along with us, we’re going to try and give quarterly updates on our roadmap that share what we’re working on. For these updates, we’ll be following the Now, Next, Later format as there are still a number of unknowns that could impact delivery dates.
A few other things to keep in mind:
- Most of the Store Editing work takes place in the WooCommerce Blocks repository. We welcome contributors and bug reports in the Issues.
- We’ve opened up the GitHub discussions feature for collecting ideas, feature requests, and feedback, and also facilitating Q&A-type questions around extensibility and customizations.
- We’re also collecting feedback and ideas through this form that doesn’t require any login if you’d prefer to use it instead.
- While the new checkout flow (Cart and Checkout blocks) was mentioned in the previous roadmap update, we’re going to start doing those separately for now. So it’s intentionally left out of this update. They still are very important and continue to be worked on but giving those updates separately helps to keep the discussion more focused.
- This roadmap is not exhaustive and in some places not detailed. Along with actually building the things mentioned here, we’re also involved in design explorations, user research and collaborating with the Gutenberg project. These sorts of things are all a part of the work we’re doing.
Now
Initial Block Theme Support
We’ve already released some initial block theme support for WooCommerce. Now when you activate a block theme on a WooCommerce Store, your store should be completely functional.
We took a very transitional approach to this support by introducing a classic template block that works in concert with custom WooCommerce templates to make various existing PHP-based WooCommerce templates compatible with block themes.
As you’re reading this roadmap, does any of this work sound interesting to you? Are you a designer or engineer that would like to help us in creating an incredible Store Editing experience for WooCommerce? We’re hiring!
We took this approach so that existing customizations on templates will still be available in block themes while providing the space for us to work on transforming how WooCommerce is customized in the context of WordPress site editing, block themes, and the accompanying APIs. At a minimum, this approach will also provide a way for existing stores to more gradually adopt the newer functionality as extensions and customizations they have are adapted to work with the newer interfaces.
We’re also currently at work on preparing merchant-facing documentation that introduces Store Editing and gives a high-level overview of what they can customize with it. This will be iterated on as we continue to build this.
Mini Cart Block
One of the major pieces of a store that is found in most commerce-focused themes is a “mini-cart”. Usually living in the header of the store theme, this provides a way for shoppers to see at a glance whether they have items in their cart, how many are there, and via clicking, what is in the cart.
We’ve been working on this block for a few months and it’s available now in the feature plugin and should also be available in the May release of WooCommerce Core. We will be publishing documentation for this as well.
Adding Global Styles support to WooCommerce blocks
While we still anticipate doing more work on our existing library of blocks and making some changes in response to various feedback we’ve got over the past few years, there’s some low hanging fruit in bringing various design tools and global styles support to this library. We’ve completed the first phase of this project and if you’ve been watching WooCommerce Blocks release notes, you’ve seen a number of blocks receive these updates.
In the bigger picture, this is one piece unblocking a lot of creativity that can be utilized in themes defining specific styles for WooCommerce blocks, having the option to limit what is exposed for merchants to modify, and creating patterns from the blocks.
Next
Improvements to existing blocks.
Beyond iterating on and expanding design tools and global styles support as the Gutenberg project continues to iterate on and provide more options, we’re also auditing our existing library of blocks and identifying improvements we can make related to the feedback we’ve received.
Ensuring that relevant theme.json directives apply to various WooCommerce templates.
If this is the first time you’ve heard of theme.json you can head on over to the official documentation which has a good overview. Essentially it is a configuration file for theme styles and block settings and is a significant component of block themes (although it can be used in classic themes too!).
As a part of the transitionary plan bridging existing WooCommerce PHP template support in block themes all the way to the full store editing experience with templates fully powered by blocks, we’ve already done an audit to confirm that various theme.json properties correctly apply to WooCommerce templates.
Another area we may explore is what WooCommerce custom properties could optionally be defined in `theme.json` for finer control over WooCommerce-specific design elements (such as the “Add to Cart Button”).
Work on new blocks
We also have two blocks we have identified as high value in the context of Store Editing given their typical use-case in nearly every online store.
Product Search Block
While this block already exists in our library, we are revisiting it with the goal of refactoring so it functions more similarly to the WordPress search block. Product search is often a key element of stores providing a way for shoppers to find the products they are looking for.
Dynamic “My Account” link block
For any store that provides a way for shoppers to view orders and manage their profiles, the “My Account” link provides an always visible link to their account page. With this block, merchants will be able to completely customize where this link appears and it will dynamically react to whether a shopper is logged in or not, or whether user registration is available on the store.
Ensure relevant Store Editing pieces are working well with upcoming WordPress improvements for WP 6.0
In the preliminary roadmap for WordPress 6.0, Matias Ventura highlights a number of improvements that will be coming to the next release of WordPress (tentatively May 2022).
A number of these roadmap items have direct relevance to the work we’re doing in Store Editing including:
- Improved experience for building site menus.
- Improved browsing experience for templates and template parts.
- Improved experience for creating new templates.
- Site-wide style variations.
- Decoupling templates from themes.
A number of these improvements are already being worked on and released as a part of the Gutenberg feature plugin updates. Our team will be experimenting and exploring how we can best utilize these improvements in Store Editing and contributing to the project where needed.
Later
“Blockifying” the Single Product Template
We’ve picked this initial template for completely transforming to be powered by blocks because many of the elements of the single product page could be re-used in other contexts.
Of course, we plan on updating all WooCommerce templates (and some existing shortcode-powered views) to fit the new Store Editing paradigm. More on those will surface in future updates.
New Blocks
While this list of new blocks is still being developed as we learn more about what merchants need most, plus discovery work around different patterns and WooCommerce templates, the two blocks we do have in mind for this year are:
- Filter Products by Rating
- Categories Grid block
Leave a Reply