Store Editing Snaps: February 13 – 24

Daniel W. Robert Avatar
Daniel W. Robert

•

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 🚧

Below are a few key projects that we began work on and will be heavily focusing on over the next several weeks.

Products Block – Next Steps (#6793)

The Products block (a rename from “Product Query” block) is a larger project that includes Product Archive Type Blocks, “Blockifying” the Product Archive templates. This has been the precursor to the following projects below.

The goal for the next steps is to graduate the “Products (Beta)” block out of its beta phase via a thorough QA process on different platforms. During this process, we will also be fixing outstanding bugs from the beta phase and continue improving the UX, making the block smooth and delightful to use.

Add support for woocommerce_loop_add_to_cart_args filter in Products block (#8422)

Here, we’ve fixed an issue in the Products block where a fatal error was displayed because the filter woocommerce_loop_add_to_cart_link was being applied with two parameters instead of three.

Fix Product categories, Product Tags & Keyword filter not working in Products block (#8377)

We have also fixed an issue with filtering products by category or tag in the Products block. Previously, the block did not respect the filter and displayed all products on the live post or page.

Make a product titles in Products block a link (#8519)

Here we have made the titles in the Products block render as links by default.

Blockifying Product Archive Templates (#8059)

The goal for this project is to create a complete block experience for Product Archive templates. In order to do so, we will leverage the work that has already been done on the “Products (Beta)” block and create equivalent blocks for the various parts of an archive page.

Update the archive templates to use Products block (#8308)

We have blockified the archive-product.html and product-search-results.html templates to use the Products block instead of a placeholder. This replaces the woocommerce/legacy-template block with an equivalent design, powered by blocks.

Set inherit default to true when products is inserted on archive product templates (#8375)

Here, we have enabled the Inherit query from template setting by default when adding the Products block to an archive product template. This brings consistency with the behavior of the Query Loop block when adding to archive templates.

Check if property exists before accessing (#8443)

We’ve fixed the Notice: Undefined property: stdClass::$area in BlockTemplatesController.php
error by checking whether the area property exists before accessing it.

Blockifying Single Product Template (#8054)

Alongside the above effort to blockify the Product Archive templates, this project aims to blockify the Single Product template. This will allow merchants to use the features of the Site Editor to create and edit the template used for rendering all single products (or even a specific product).

Product Image Gallery: fix 404 error (#8445)

This update fixes a 404 error that was discovered with the Product Image Gallery block, where unavailable assets were attempting to be registered. Since this is a dynamic (server-side-rendered) block, it isn’t necessary to register the block assets.

Add Single Product Details block (#8225)

We have added a new Product Details block (visible on the single product template), allowing merchants to add the description, information, and reviews to their products.

Create the Add to Cart Form Block (#8284)

Here we have introduced a new Add to Cart Button block, allowing merchants to display a button in single product templates.

Add Related Products block (#8522)

We’ve also added a new Related Products block (visible only in the Single Product Template) as a wrapper for the Related Products Control variation.

Store Editing preparation for WordPress 6.2

WordPress 6.2 tentative release date is March 28. The last version of WooCommerce Core that will be released before March 28 is v7.5 (code freeze February 20). The last version of WooCommerce Blocks that will be merged into WooCommerce Core v7.5 is WooCommerce Blocks v9.6 (February 13).

In continued preparation for this upcoming release, we noticed that the sidebar in the Customer Account block had some display issues in the editor. We’ve fixed this in the following Pull Request:

  • Fix Customer account sidebar link incorrect margin in WP 6.2 (#8437)

WooCommerce Blocks Releases ✨

  • 9.6.0 – Many of the changes noted in this post are included in the 9.6.0 release of the WooCommerce Blocks feature plugin from February 13th. You can find the full details in the release notes.

Other Notable PRs / Issues âś…

Automated Tests

  • Fix e2e tests related to inserting blocks (#8462)
  • e2e tests: update close modal aria-label to match new versions of GB (#8459)
  • Fix e2e tests of the Product Details block (#8470)

Misc. Bug Fixes, Refactors, & Improvements

  • Add minimum height to Mini Cart Contents block in the Style Book (#8458)
  • Fix Filter by Rating reset button (#8374)
  • Product Price: Fix typography styles in the editor (#8398)
  • Add more test to the BlockTemplateUtils (#8467)
  • Simplify unused Add to Cart button form placeholder for grouped product (#8438)
  • Fixes CSS spacing and availability issues for breadcrumb, catalog sort, and result count blocks. (#8391)
  • Add parsed border props to featured items (#8472)
  • Fix Catalog Sorting default color in dark backgrounds (#8483)
  • Fix Product Price and Product Rating alignment (#8526)
  • Add explicit CSS styling to mini-cart block amount in inserter preview (#8516)

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

Keep yourself in the loop!

This field is hidden when viewing the form
This field is hidden when viewing the form
This field is hidden when viewing the form

6 responses to “Store Editing Snaps: February 13 – 24”

  1. responsiveflow Avatar
    responsiveflow

    I really like the efforts that you guys are putting into blockifying WooCommerce and I think that eventually blocks will become a solid solution to build Woo Stores.

    However, right now it’s not quite there yet, and you can see that just by Googling (or searching on youtube) for a tutorial on how to build a store with Full site editing. There are basically no results.
    The main issue is that there are no themes “compatible” with WooCommerce.
    With “compatible” I don’t mean that WC is not compatible by itself, but the store UI on a block theme like 2023 is incredibility ugly. Especially product page but also product archive are just ugly.

    What doesn’t WooCommerce creates a simple, free block theme, fully compatible with WooCommerce? It would definitely boost Blocks adoption.

    Reply
    1. Daniel W. Robert Avatar
      Daniel W. Robert

      Thank you for this feedback!

      Our current focus is on providing a great store editing experience out of the box with any block theme – and it will take some time to get there.

      In the meantime, we are seeing more and more plugins and themes in the WooCommerce ecosystem building really beautiful things with Gutenberg and the site editor. It’s worth noting that there are already a number of theme shops building block themes explicitly supporting WooCommerce.

      While the default experience of WooCommerce in every block theme will not always be appealing for everyone, keep in mind that there will always be a subjective element involved.

      What doesn’t WooCommerce creates a simple, free block theme, fully compatible with WooCommerce? It would definitely boost Blocks adoption.

      This is a great suggestion and we haven’t ruled that out yet! As I noted above, however, our initial focus is on the store editing experience in block themes and putting the tools in place for merchants (and builders) to visually customize their store without code.

      Reply
  2. Bradley Avatar
    Bradley

    Is there a block based on price, such as ‘display all products costing between $25 – $100’?

    Reply
    1. Darren Ethier Avatar
      Darren Ethier

      You can achieve this with the Products Block and the price filter block. But I think you’re referring to the merchant controlling the display of those products (so it’d be a merchant-side filter)?

      If so, that is something we have in mind to implement for the Products block but it’s not available yet.

      Thanks for taking the time to leave your question!

      Reply
    2. Daniel W. Robert Avatar
      Daniel W. Robert

      If so, that is something we have in mind to implement for the Products block but it’s not available yet.

      Here is an open GitHub Issue on this for the Products block that you can follow along with! 🙂

      Reply
      1. Bradley Avatar
        Bradley

        Thank you Darren and Daniel. Yes, I am referring to a block setting controlled by the merchant. An example use case would be the ability to create a page called ‘Under $100’ which only displays the products selling for under $100, or even better, in the range of $25-$100.

        If the regular price was $125, and then a product was put on sale for $99, then it would automatically be displayed on the page using the Products block. And of course when the product was no longer on sale, then it would no longer be displayed on that page.

        Thanks for your replies and linking to the open Issue.

        Reply

Leave a Reply

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