Categories
Roadmap Insights

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:

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!

By Darren Ethier

I’m the father of four children and husband of the most beautiful woman in the world. My passion is developing useful and pretty code. I also love anything to do with leadership and the wise use of words.  Currently I'm employed as a Code Wrangler with Automattic and an engineering team lead for a team working on WooCommerce.

15 replies on “Peek into the WooCommerce Blocks Roadmap”

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.

Like

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.

Liked by 2 people

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!

Liked by 3 people

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.

Liked by 1 person

[…] 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. […]

Like

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

Liked by 1 person

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

Liked by 2 people

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.