The WooCommerce team has been hard at work in bringing blocks to merchants and stores around the world. We believe strongly that blocks and full-site editing are important components for the future of WooCommerce so are taking time now to share the latest on the blocks-focused work we’re doing now and our current priorities for the future.
This is just a slice of the work we’re doing at WooCommerce, but one that we felt was worth proactively communicating more openly with our community, as it may be useful in guiding some of your own plans around product investment and development. Please note that we are intentionally using imprecise terms in regards to timing (Now, Next, Later) as we continue to discover ways to improve the user experience that may impact delivery dates.
Also note that this is a snapshot into the plans as of publishing this post.
Cart and Checkout Blocks
For the past two years, we have been focused on building a better, block-based checkout flow for WooCommerce stores. With these Cart and Checkout blocks, merchants experience:
- Smoother checkout flows, leading to better conversion rates.
- Increased flexibility and customization of Cart and Checkout flows without the need for code changes.
- Retained ability for customization through code via curated extensibility interfaces.
- Ability to preview how Cart and Checkout looks from the editor.
- Less risk of breakage by buggy extensions and/or custom code integration with the checkout flow.
Now
Extension Integrations
The Cart and Checkout blocks implement curated extensibility interfaces that preserve merchants’ ability to customize checkout flows (via the editor interface) while improving the ease with which developers can integrate their extensions – with the shared end-goal of higher-converting shopper experiences.
We’ve already integrated a number of key extensions (you can see a list here) that have helped us identify, build, and validate extensibility interfaces for any extension integrating with the cart and checkout flow.
We’re aiming to get to ~85-90% coverage of the extensibility needs of all extensions by continuing to build out integrations for key extensions we’ve identified as having value both for merchants and that help validate remaining extension interfaces.
Release “Iteration 2” of the Checkout and Cart blocks.
This next iteration of the blocks utilizes an inner block structure/architecture (versus the current monolithic block structure). We will ensure that transition from old blocks to the new implementation is seamless for users.
The second iteration of these blocks will provide more customization options for the checkout and cart, plus more ways for extension developers to integrate with the flows. As an example, extension developers can create blocks to be inserted in inner block areas of the cart and checkout parent blocks to access the necessary data in the logic flow. This unlocks another level of functionality that keeps the checkout and cart experience performant for merchants and shoppers.
We’re nearing the testing stage for this next iteration.
Write and publish documentation for all the new extensibility interfaces
There are numerous ways to extend the blocks, with more options coming in future months. You can bookmark this page for documentation on how to extend the blocks. Extensibility interfaces already available include:
- Payment Method integration.
- Available Filters
- Exposing your data in the Store API
- Available endpoints to extend with the `ExtendRestAPI` and how to add an endpoint to the `ExtendRestAPI`
- Using Slots and Fills to extend the blocks and the available slot fills.
- Available Formatters for formatting data used in the StoreAPI.
- The IntegrationInterface class and how to use it to register scripts, styles and data with WooCommerce blocks.
We’ll be adding to the documentation over time, as we know how important it is for a successful rollout.
We’re aiming for developers to have an experience similar to what Aaron (a payment method developer in our ecosystem) describes here!
Late last Friday (19th March 2021) I was reading over a blog post from the Woo team about integrating payment gateways into their new checkout blocks. I spent the weekend researching and having a look at the codebase for this. Monday morning I started work on an update for our ePDQ plugin to include the new block code. This was done, and the team here tested it before we pushed it out to our users before the end of the working day.
Aaron from We Are AG
That was not bad for a Monday! A new feature built, tested and rolled out. This was a quiet launch up until now. Why? I wanted to work on getting some more of our plugins to support the WooCommerce checkout blocks. Today, Thursday (25th March 2021), I am happy to report we have more plugins supporting this.
Surface Cart and Checkout blocks to a subset of users not already using them.
We’re currently working on increasing the visibility of the Cart and Checkout blocks to a subset of merchants and stores that don’t have the WooCommerce Blocks feature plugin installed (currently the only way to experience the blocks while in preview), primarily though in-product messaging directly to stores. We’ll be sure to include links to more information about how to try out the new experience using the feature plugin.
Increasing usage of the new flow will help us continue to confirm conversion rate improvements (currently ~20%+ over the shortcode flow).
Next
Reach out and encourage Woo Marketplace developers to integrate with the new checkout flow.
While we hope those reading this are already working on integrating their extensions, we’re aware that an extra reminder can’t hurt! We intend to reach out to developers listing products in the Woo Marketplace to encourage them to integrate. Our goal is for 90% of extensions impacting the checkout flow in the Woo marketplace to be fully integrated with the cart and checkout blocks.
Our engineers will be available for technical guidance on any questions that come from third party developers building our integrations. We’ll also use this period to continue refining our documentation and interfaces.
Release the Cart and Checkout blocks as the default checkout flow for new users of WooCommerce
In the future, store owners using WooCommerce for the first time will have the Cart and Checkout blocks installed as part of our guided store setup experience. The current shortcode checkout flow will only be surfaced in the cases where they have selected extensions that we know are not integrated.
For established stores, we will continue to support the shortcode flow as we recognize that some have significant customizations that are working well for them.
Later
Release the Cart and Checkout Blocks as the default checkout flow for all users of WooCommerce
We’ll continue working towards getting all checkout-related extensions within the WooCommerce marketplace compatible with the blocks. The eventual plan is to establish the Cart and Checkout blocks as the default experience for all users of WooCommerce.
We expect that this will also include seeing new extensions in the marketplace that take advantage of the better user experience the blocks provide.
Your feedback!
While the measures above are the things we have planned for the immediate future, we’re still listening for the community’s thoughts on the evolution of the Cart and Checkout Blocks. What features and functionality do you believe are critical for merchants, shoppers, store builders, and extension developers?
Full Site Editing
The WordPress full site editing experience enables site owners to more intuitively configure the layout and style of their websites.
Is the term full site editing new to you? Here’s a few resources that might help you learn more:
- This status check (December 2020) gives an overview of the Full Site Editing experience and more context about how they fit together.
- Anne McCarthy (on the developer relations team for WordPress.org) presented this overview of Full Site editing at a WP meetup.
- Joe Casabona has a great introductory overview video to Full Site Editing.
- This post on various ways you can keep tabs on Full Site Editing.
- This GitHub issue gives an overview of some remaining work being scoped for the site editing project.
- A series of questions and answers around full site editing.
The release of WordPress 5.8 brought some of the initial components for the full site editing experience into WordPress for the first time including elements such as:
- The Query Loop Block.
- Post templates.
- Global Styles and Global Settings APIs (including theme.json).
If you haven’t already, I do recommend any WooCommerce developers check out the field guide for the WordPress 5.8 release as it includes a number of developer notes around the changes.
We are working diligently to bring the best of full site editing to the WooCommerce environment for the benefit of merchants and shoppers alike. Increased site performance, high quality blocks, and optimized patterns will empower merchants to maximize conversion while retaining their unique storefront.
Now
Integrating WooCommerce pages with the Navigation Block
The navigation editor (and block) is currently scheduled to surface in WordPress 5.9 (estimated release December 2021). Our team has been working on improvements to it that allow other plugins such as WooCommerce extend it in various ways for improved UX. This includes things like including WooCommerce endpoints automatically when selecting from pages to link to.
Research how products can be surfaced and utilized within the Query Block
The Query Block is a key component of Full Site editing that essentially replaces “the WordPress loop” that powers so much of content presentation in WordPress today. Along with “element” blocks such as Post Title, Post Excerpt, Post Feature Image etc, this allows for site editors to more easily customize the layout of their post archive views with immediate visual feedback of changes.
Within the WooCommerce context, there’s incredible potential here for integrating and exposing product data (WooCommerce products are custom post types) in this block via similar element blocks such as Product Title, Product Price, Add to Cart button etc.
Create a Mini Cart Block
While widgets are still going to be around for a while in WordPress via the legacy widget block and classic themes, they will be de-emphasized in the future in favor of the fuller user experience provided by blocks. This is already happening as a result of the rollout of the new block based widget editor in WordPress – when block themes are enabled on a site, the widget editor is disabled and not even available.
To ensure we are prepared for this shift with widgets within WordPress, we have plans to convert all WooCommerce widgets to blocks (and create new blocks along the way!).
There are a number of widgets we’ve already converted to blocks over the past two years but in returning to this work, the first significant widget we’ve started with is the Mini Cart. As part of that, we’ll be solving for additional needs like minimizing asset loading for frontend interactive functionality (important for performance, especially for something that typically is on every page of a store). You can also expect improvements and new features over the widget version of the mini cart, including the ability to change product quantity, customize empty state, and integrate with extensions in a similar way as the Cart block.
Next
Work on creating block equivalents to various WooCommerce widgets.
Besides the mini cart widget -> block conversion mentioned earlier, we’ll be creating blocks for a number of other WooCommerce widgets.
Combined with Full Site editing, converting widgets to blocks will provide added flexibility for those designing block themes and merchants customizing the “last mile” of their stores.
Create Product Element blocks
Product element blocks include things like “Product Title”, “Product Description”, “Product Price”, or “Add to Cart button”.
These will become important “building block” items for things like:
- WooCommerce Block Patterns
- WooCommerce Block themes.
- WooCommerce Templates (eg single product view template, shop catalog etc).
- Product editor.
Later
Implement Global Styles
New blocks we build will include support for global styles. Support for existing blocks will be rolled out over time.
Create winning WooCommerce Block patterns
Once we have the right blocks (and feature set) needed for high quality WooCommerce block patterns, we will make available competitive, commerce-optimized designs and layout options out-of-the-box for merchants to set up stores that dazzle and convert.
Block template equivalents for existing WooCommerce functionality
There are a number of WooCommerce specific templates that are provided by Woo for themes to style and incorporate in every store. These include templates such as:
- Homepage layouts
- Transactional templates (such as order-received, my-account)
- Store catalog
The advent of block themes will require creating block templates for each of these views.
Woo Block Themes
Storefront has been an incredible theme for WooCommerce stores to get started with. It’s still within the list of most used themes for WooCommerce stores. Yet, we recognize that with the advent of block themes in WordPress (and the evolution of functionality they bring for developers, designers, and end users) its age is showing.
With full site editing (blocks, block patterns, block templates, and global styles), merchants can flexibly customize and adjust themes to offer their customers the most optimal shopping experiences. We believe the investments we make in things like Widget -> Blocks conversions, Product Element blocks, additional WooCommerce blocks, and block patterns will revolutionize how WooCommerce stores are designed and built by agencies, developers, and merchants.
In closing
We hope you’ve found value with this peek into the WooCommerce Blocks roadmap. Feedback from merchants and developers (both direct and indirect) has informed a lot of what we’ve been building and are working towards, so please keep it coming!
Leave a Reply