Peek into the WooCommerce Blocks Roadmap

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:

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.
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.

Aaron from We Are AG

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:

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.

Surfacing Woo Specific pages in the list of URLs to pick from in the Navigation block.

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!


Keep yourself in the loop!

Sign up for the WooCommerce developer newsletter:
Hidden
Hidden
Hidden


36 responses to “Peek into the WooCommerce Blocks Roadmap”

  1. […] This article was originally published here. […]

    1. I’d like to see WC Blocks offer the ability to offer more badges beyond the SALE badge, like a NEW badge for newer products in the shop.

      1. So would we! There’s all sorts of ideas we have for new blocks (and improving existing blocks) that could improve the merchant experience (and realize the more fully the potential of WooCommerce Blocks). Much of our current roadmap involves solving some bigger problems around significant merchant flows and once we get through this period well, we can start turning our attention to addressing a lot of these great ideas!

  2. Would be great to see Vivawallet Payment integration with the new Cart and Checkout blocks. As a major EU payment provider, they still state they don’t take it into consideration, from my last email to them.

  3. Where can we look to test I2 once it is ready?

    1. You can test the Checkout Block I2 now if using the development build of WooCommerce Blocks from the repository. We’re getting close to doing more extensive internal testing before we make it available in the feature plugin as a replacement for I1.

      We’re currently thinking through Cart Block I2, but I anticipate development will go quicker on it based on what we’ve learned from the Checkout Block I2 work.

      1. Thanks for the follow up, was just looking through the repo. I can’t wait to test with my Block Visibility plugin. A “blockified” cart and checkout opens up so many possibilities. Amazing work!

  4. […] any developers who work with WooCommerce Blocks should take a look at this thorough high-level overview of the WooCommerce Blocks Roadmap that outlines plans for the Cart & Checkout Blocks as well as Full Site Editing […]

  5. Lee Willis Avatar

    We looked at integrating previously (https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/4009), but too many things were in flux, and it doesn’t look like anything’s changed (for the bits we’re interested in).

    Is there a roadmap when _experimental hooks will stop being _experimental and will be supportable in production?

    1. Great question and I should have made this more explicit in the post. This is an ongoing thing we evaluate as a part of every blocks release. I would put this within the now/next portion of the roadmap – you can expect to see most of the interfaces becoming stable within the next couple of months.

      1. Lee Willis Avatar

        Perfect – thanks!

  6. […] Nyfiken vart WooCommerce Blocks, tillägget där blocken för WooCommerce utvecklas, är på väg? Det finns en roadmap-post att kika […]

  7. […] Are you wondering what the second iteration of the Checkout block is? Read more over on our recent post giving you a peek into the WooCommerce Blocks roadmap. […]

  8. […] WooCommerce Blocks: version 5.8.0 of WooCommerce Blocks has been released! Say hello to the All Products block, which enables merchants to filter visible products by stock status (courtesy of @grogou, who made the community contribution to the WooCommerce blocks repository). The highlight for me, though, is probably the generation of much-needed documentation for Cart and Checkout blocks. Would love to see Cart & Checkout extension developers capitalize on this (we certainly plan to over at PeachPay). For more information about the WooCommerce blocks roadmap, you can also check out this post. […]

  9. […] Are you wondering what the second iteration of the Checkout block is? Read more over on our recent post giving you a peek into the WooCommerce Blocks roadmap. […]

  10. Are there plans to create product page blocks or what is your suggestion for creating custom product block page templates?

    Currently it’s not possible to use a custom block page template for the product page, is this correct? I’ve been trying to replace single-product.php page in our FSE block theme without luck so far.

    I would love to hear more details on this.

    Thanks so much, Ellen

    1. Hi Ellen,

      Are there plans to create product page blocks or what is your suggestion for creating custom product block page templates?

      Yes, we are planning to create what we name ‘Product element blocks’, those are blocks to display product data, ie: there will be a Product price block, a Product rating one, SKU, etc. They will work in a similar way as some Theme blocks from Gutenberg (Post title, Post categories, etc.). We are planning to start working on this soon, but we can’t give any ETA yet.

      Currently it’s not possible to use a custom block page template for the product page, is this correct? I’ve been trying to replace single-product.php page in our FSE block theme without luck so far.

      This is already possible! 🙂 You will need to add a single-product.html block template to your theme and define WooCommerce support in functions.php (add_theme_support( 'woocommerce' );). Once you do that, the block-based template will be loaded instead of the PHP one. You can find more details about how it works and which templates can be replaced in this PR.

      We hadn’t publicized this a lot because until Product element blocks are a reality, it’s not very useful to replace WC PHP templates with block-based ones. But be sure this is on our radar. 🙂

  11. Dave Loodts Avatar
    Dave Loodts

    Kinda bedazled when i look at the Available Filters page. I don’t understand it to be honest, it gives me shivers on how to implement this or even work with these kinds of filters. And you have to know i’m quit technical experienced. I can’t image how other non-tech DIY-show owners will handle this.

    That will be the most dramatic part of all this change. The available code snippets around the web will not work, for example in this cart and checkout blocks.
    And the question is if there’s even an alternative solution (or available filter) in a WooCommerce block.

    So, my question: does the non-block cart and checkout page continue to work in the future? Or is there a milestone when this is cut off.

    1. Ron Rennick Avatar
      Ron Rennick

      does the non-block cart and checkout page continue to work in the future? Or is there a milestone when this is cut off.

      There are no plans to discontinue the existing cart and checkout pages.

      1. Just to add some additional color to Ron’s reply since it is only partially true.

        • We have no immediate plans to discontinue supporting the shortcodes (and related php templates) powering the current Cart and Checkout flow.
        • We DO have plans to change the default checkout flow to be powered by the blocks (as noted in the original post).

        The cart and checkout shortcodes (which is what currently powers the checkout flow in WooCommerce) will still be supported for an indefinite (at this point) amount of time because we realize there is a lot of history around the customizations that have been on top of the shortcodes and the existing php templates.

        There will also definitely be ways for existing stores to ensure their checkout flow remains in place with the shortcode based flow if there are requirements the blocks don’t solve for.

    2. Kinda bedazled when i look at the Available Filters page. I don’t understand it to be honest, it gives me shivers on how to implement this or even work with these kinds of filters. And you have to know i’m quit technical experienced. I can’t image how other non-tech DIY-show owners will handle this.

      The current documentation is definitely not in its final state but we wanted to start publishing some things for those who are wanting to dig in now. I definitely understand the concern around the changes this brings given the wealth of tutorials, snippets and code examples existing on the internet for existing flows.

      We do plan on creating tutorials and even some sort of starter examples to help ease the transition for extenders, builders, and developers – recognizing that this is a big change. Ideally it would have been great to just build on top of the existing system. However, given the significant improvements this provides to the merchant experience (and conversion rates!) as well as our belief in the long run this will provide a much more stable and consistent platform for developers to extend – we believe the short term pain in the transition process will be worth it.

  12. Please tell me you’re not going to retire the Storefront theme. When you retired Canvas I had to update loads of client websites. Since then I’ve built dozens more in Storefront. I really do not want to have to change them all to something else again!

    1. Hi there! Thanks for taking the time to leave your concern!

      There are no immediate plans to retire Storefront, but we do anticipate that in the future there will be a number of incredible incentives for folks to switch to a WooCommerce supported block theme that works and performs better for stores once block themes and full site editing becomes more prevalent.

      If you haven’t already, I highly recommend starting to follow all the changes that are happening in WordPress (and thus WooCommerce) around block themes and Full Site editing to help prepare for that future.

      1. I’m using Storefront for all types of websites, not just ecommerce sites 🙂 And yes, I’m aware of forthcoming changes to WordPress – fully aware of FSE being the next big WP thing, and was (until this moment) looking forward to it. I am of course utilising Gutenberg in all of my sites.

        I was hoping you would develop Storefront into a FSE theme before too long. Which would be the sensible/obvious way to go, considering Storefront was developed as “THE” go-to theme for WooCommerce and so many sites are using it. If this isn’t in your plans, you must be bonkers 🙂

        I work primarily with clients who have small budgets. They don’t have the cash to be made to switch themes every few years – I chose Storefront because now that WooCommerce is owned by Automattic, I trusted it to be always available, stable and future-proof (having been stung previously with Canvas).

        Perhaps you could suggest a theme I can use for clients going forward, which won’t be dropped the minute something new appears in WP?

        Changing one site for myself isn’t the end of the world, but when I’ve got dozens of small cash-strapped businesses relying on me to keep their websites as future-proof as possible, with as little cost as possible, switching them all over to another new theme – and all the redesign work that will be involved in that – is going to be a nightmare for all of us on many levels.

        1. Having this additional context is super useful! Thanks for writing it! A lot of what you’ve written about is why we don’t have immediate plans to retire Storefront. We know it has grown in popularity across WordPress sites (not just Woo as you noted!) because of how solidly it’s performed as a great theme.

          We’re still in the process of evaluating how exactly we will invest in block themes – whether that may be doing something like what you suggest, or something else. I definitely understand the angst some of the uncertainty provides but know that your concerns (and others noted from other channels) are all a part of the many things we consider in plans made for the future.

  13. cheshireisaacs Avatar
    cheshireisaacs

    I don’t know if my comment got eaten by the system, so hopefully this isn’t a duplicate. Anyway, back in March I had tried to implement WC Blocks but found out it wasn’t cooperating with Automattic’s Min/Max plugin. At the time I was told it wasn’t supported (which honestly is a little bizarre given that the same company makes both products).

    The specific problem at the time was that the WC Blocks cart page wasn’t alerting a customer if they broke the min/max rules I had set up.

    Is that plugin supported by WC Blocks now? I hope so, because WC Blocks look a whole lot better than the standard cart/checkout pages.

    1. Hi there!

      Just to make sure we’re referring to the same plugin, I think you are referencing the Min/Max Quantities extension?

      If so, I can’t confirm at the moment whether the extension is supported yet. I agree, it may seem unusual that all the products owned by WooCommerce don’t support the Cart and Checkout block yet but it definitely is something we’re working on as a part of the roadmap. We initially released the Cart and Checkout blocks over a year ago in the feature plugin without full support across our products because we wanted to get it into the hands of users sooner for feedback and to help validate its value. We knew that there would be a number of stores unable to use it until their extension was available but the feedback we were able to get from stores that could use it has been invaluable.

      Over time we have integrated a number of WooCommerce extensions and payment methods (or discovered extensions that just work) – any extensions we’re aware of that are compatible are listed in this document (which is kept up to date).

  14. k8w5xdsevyhitzvkt Avatar
    k8w5xdsevyhitzvkt

    I, for one, really like the new cart and checkout blocks and they’ve been flawless.

    I would like to add a field to the checkout block (question with a textbox). The plugin I had been using doesn’t work with blocks and I’ve been struggling to find one that does.

    Any suggestions?

    1. Hi! Glad you like the blocks and find them useful!

      We just released WooCommerce 6.x which introduces the next iteration of the Checkout blocks (as mentioned in this post). One of the really neat things with the new architecture of the blocks is that it will be easier for extensions to add custom fields to the blocks.

      There’s no immediate solution for this yet, but it is definitely on our radar!

  15. […] This release includes a lot of leg work needed to update the Cart block to use innerBlocks as well, so keep an eye for that soon. Are you wondering what we have we’re working on currently and in the future? Read more over on our recent post giving you a peek into the WooCommerce Blocks roadmap. […]

  16. I’m a new DIY merchant getting ready to build a site. Reading all the comments makes me want to start building with blocks. Is that realistic at the moment ? Meaning October 2021 ?

    1. There are a number of blocks you can use in any store now! I highly encourage you to check the existing blocks out and see if you’re able to get most of what you need with them. There are various themes in the WooCommerce Marketplace that should already work with the existing slate of blocks.

      Depending on your store needs, you may find there are still some gaps not filled by blocks. If that’s the case, please do let us know. When we see a lot of people report missing functionality it helps us prioritize what we work on first.

      Related to this roadmap, the work we are doing on preparing WooCommerce to support full site editing in WordPress will unlock so much more potential for builders such as yourself to more visually, easily build their stores. While we’re not quite there yet, we’re getting there!

  17. Mr Alex Banks Avatar
    Mr Alex Banks

    Hello, is the new cart / checkout using blocks system going to be compatible with Klarna / ClearPay payment gateways ? Thanks

    1. Hi there,

      I can’t speak authoritatively for the third party teams responsible for the Klarna/ClearPay payment gateways, I am aware that they are working on compatibility. I don’t know of any timeline when that will be available.

  18. mosdostogether Avatar
    mosdostogether

    were there any updates recently that make checkout block compatible with WooCommerce subscriptions
    I tested it out once it was officially “compatible” and on the renewals we had issues.
    I reached out to support then and they told me even though its compatible its still new so I should wait any updates since then?

  19. […] any developers who work with WooCommerce Blocks should take a look at this thorough high-level overview of the WooCommerce Blocks Roadmap that outlines plans for the Cart & Checkout Blocks as well as Full Site Editing […]

Leave a Reply

Your email address will not be published. Required fields are marked *