Changelog

The latest version of WooCommerce Blocks, version 9.9.0, is now available for download on WordPress.org and GitHub.

Notable Changes

This release includes many exciting changes and bug fixes. Below are a few of the most important ones that we want to highlight to our community.

Fixed a bug where ShippingData returned by payment processing observers did not contain an address property

In Check for address on shippingData (#8878) which was included in this release, we fixed a regression with our payment processing observers. Previously, certain payment event observers (see the eventRegistration prop in our documentation) that returned a shippingData object with an address property would overwrite the customer’s shipping address with the supplied address, however in #8163 this was inadvertently removed.

This has now been changed so that these extensions work as they did (but passing the address via shippingData.address is still deprecated, and the preferred method is to pass it via shippingAddress which should be a flat address object).

Migrating to shippingAddress

To migrate away from the deprecated shippingData property to using the new shippingAddress property, you will need to update your observer’s return value. The address, previously stored the in shippingData.address should be moved into shippingAddress which will be a flat object containing only the address data.

Old observer response value

return {
  shippingData: {
    address: {
      first_name: 'John',
      last_name: 'Doe',
    }
}

New observer response value – note the shippingAddress value is a flat object

return {
  shippingAddress: {
    first_name: 'John',
    last_name: 'Doe',
  }
}

Client-side postcode validation in the Checkout block

In this release, we included a change that performs postcode validation on the client-side. This change improves the performance of the Checkout process for the shopper. Previously the postcode was only validated on the server. There was a delay before the user saw an error if they entered an invalid postcode. This new experience not only reduces the load on your server but allows the shopper to work through the checkout form more quickly!

We still perform server-side validation of the postcode, but this is done when the checkout form is submitted rather than when the value changes.

Pickup location on the order confirmation page

When shoppers check out using a local pickup method, they will now see the pickup location’s address on the order confirmation page and in the order confirmation emails! The collection instructions also appear in this area.

Payment gateway filtering in Store API

Payment methods on the Checkout block will now respect the woocommerce_available_payment_gateways filter. For example, on the PHP side you could prevent a payment method being shown to a customer using:

add_filter(
	'woocommerce_available_payment_gateways',
	function( $payments ) {
		unset( $payments['cod'] );
		return $payments;
	}
);

As part of this work, the Store APIs wc/store/v1/cart route will now return a list of available payment methods for that cart, e.g.:

"payment_methods": [ "cod", "bacs", "cheque" ],

This is in turn stored on the JavaScript side in the wc/store/cart data store. This change does not affect payment extensions or payment method registration, it only affects use of filters on the server side.

Add to Cart button styling improvements

We have made some improvements to the Add to cart button, providing greater customization options for online stores. It’s now possible to choose between Fill and Outline styles for the button and adjust its width to 25%, 50%, 75%, or 100% of the parent container. In addition, we’ve introduced a variety of typography controls, including Font Family, Appearance, Line height, Letter spacing, Decoration, and Letter case.

These improvements aim to provide greater control over the look and feel of the Add to cart button, ensuring it seamlessly integrates with the store’s design.

Mini Cart Block Improvements

It’s now possible to customize all buttons of the Mini Cart, including changing their color and background as well as changing the style from outline to filled. In addition to that, the Mini Cart block got a new setting to customize how it renders in the Cart and Checkout pages (Hide or Remove), which will allow to change its behavior depending on the desired header style.

Provide a way to switch to the blockified Single Product Template

We have added a button “Upgrade to Blockified Single Product template” to the Single Product template. By clicking on this button, the classic template is upgraded to the new Blockified Single Product template.

This new template allows customizations of the product page with blocks, giving more flexibility and creativity in showcasing the products.

Changelog

Enhancements

• Move Related Products’s notice component to the Inspector Control section. (8843)
• Product SKU Block: Don’t render the prefix when the SKU isn’t defined. (8837)
• Mini-cart: Add the option to change the style between ‘Outline’ and ‘Fill’ in all the buttons. (8835)
• Product SKU: Make the block focusable in editor. (8804)
• Add Fill & Outline styles, width settings & new typography controls for Product(Add to cart) button block. (8781)
• Allow themes to remove the Mini Cart title on overridden template parts. (8779)
• Add style to the Mini Cart buttons. (8776)
• Add the ability to change the background and text colors of the Mini Cart block “Start shopping” button. (8766)
• Mini-cart: Add setting to not render the block on the cart & checkout pages. (8700)
• Ensure shipping rates do not show in the Checkout block if the “Hide shipping costs until an address is entered option is selected”. (8682)
• Move option to hide shipping costs until an address is entered to the Checkout block. (8680)
• Remove certain Shipping settings from WooCommerce -> Settings -> Shipping -> Shipping Options when using the Cart or Checkout blocks, these have been moved to setting on the blocks. (8679)
• Add spacing between Mini Cart title and products list when scrolled. (8676)
• Add new ExperimentalOrderLocalPickupPackages Slot/Fill. (8636)
• Add default Single Product HTML template. (8515)
• Validate postcodes client-site instead of server-side. (8503)
• Added support for woocommerce_available_payment_gateways to the Store API. (8441)

Bug Fixes

• Fix border styles not visible in the editor in Featured Product and Featured Category blocks. (8838)
• Add decoding to product names titles that are in HTML entities. (8824)
• Fix react 18 error in the editor when using cart/checkout blocks. (8820)
• Filter by Stock and Filter by Rating: Fix the potential endless redirection loop when used on a search results page. (8784)
• Fix “Save changes” default behavior bug in the Firefox browser. (8754)
• Store API – Apply woocommerce_cart_item_permalink filter to cart item permalinks. (8726)
• Add validation error to prevent checkout when there is no shipping method available. (8384)
• Fix Markdown table in payment-method-integration.md > external contribution #8158. (8258)

Various

• Display pickup location details in order confirmations. (8727)
• Local Pickup: Merge country and state into same field in location modal. (8408)
• Enable users to migrate to the blockified Single Product template. (8324)

WooCommerce Blocks 9.8.2 is now available for download, this is a fix release that follows 9.8.1, which we released last week.

These are the changes included:

WC Blocks 9.8.1

Bug Fixes

• Fix Single Product page not visible in block themes that provided a custom template. (8758)
• Products by Attributes: Fix the block rendered empty in the Editor. (8759)
• Fix the local pickup price in the shipping type selector and pickup options. (8623)

WC Blocks 9.8.2

Enhancements

• Display the link to add the shipping address when the shipping address is not available. (8141)

Bug Fixes

• Fix Customer Account block doing a 404 request in the frontend. (8798)
• Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons in Firefox. (8777)

The latest version of WooCommerce Blocks, version 9.8.0, is now available for download on WordPress.org and GitHub.

Notable Changes

Better performance and look and feel for the Mini Cart block

With this release, we introduced many improvements to the Mini Cart block. Among others, it’s been optimized and has better performance. When opening the Mini Cart, the content shows up immediately, as it’s preloaded in the background while the browser is idle.

The Empty Mini Cart button, which encourages shoppers to add products to the cart, now matches your theme styles.

Improved Attributes filtering in Products block

The new Products block now allows filtering products by attribute directly from the Editor interface. The experience has been enhanced by providing a user-friendly collapsible menu with attributes. Additionally, you can quickly filter attributes by typing their name. These enhancements provide a more streamlined experience for selecting the products you want to display.

Also, when checking the attributes, there’s now a live preview of the products from the Editor perspective, which allows seeing how the block will be displayed in the frontend of your store.

Improved margins in Products block patterns

There are a number of available patterns using the Products block. All of them have now consistent and scalable margins.

Here’s the list of available patterns to try out:

• WooCommerce 1:1 Image 4-Column Products Row
• WooCommerce 3-Column Product Row
• WooCommerce 4-Column Product Row
• WooCommerce Large Image Product Gallery
• WooCommerce Minimal 5-Column Products Row
• WooCommerce Minimal Product List
• WooCommerce Product Gallery
• WooCommerce Product list with 1:1 images
• WooCommerce Product list with full product description

Dev note

In this release, we are adding two new filters for the Cart block, they are: proceedToCheckoutButtonLabel and proceedToCheckoutButtonLink.

By using these filters, developers can alter the text and link of the “Proceed to checkout” button in the Cart. Our documentation has additional information on these filters and an example of how to use them.

Changelog

Enhancements

• Add Product Meta block. #8484
• Add proceedToCheckoutButtonLabel and proceedToCheckoutButtonLink filters and delete cached filters when registering new ones. #8613
• Add border style controls to the Mini Cart block. #8654
• Add support to non-AJAX add to cart in the Products block. #8532
• Fix mini-cart Start shopping button to follow the current theme styles. #8567
• Fix: change the “Add-to-Cart behaviour” mini-cart select to a toggle button. #8558
• Fix: enable global styles for the Product Result Count block. #8517
• Fix: increase the “Customer account” size icon. #8594
• Improve Mini Cart drawer close button alignment and make it inherit the text color #8605
• Made the cart and checkout view switcher compatible with List View in the editor. #8429
• Preload Mini Cart inner blocks frontend scripts to improve performance #8653
• Products block: improved UX and UI for the Product Attributes advanced filter. #8583
• Products: Improve spacing consistency of product elements in patterns. #8401
• Reduce the number of scripts needed to render a page containing the Mini Cart block #8657 #8703

Bug Fixes

• Fix ‘Edit Mini Cart template part’ link in WP 6.2 #8574
• Fix Mini Cart block having some translations missing in the editor. #8591
• Fix Mini Cart block inserter preview not showing the cart amount. #8516
• Fix: remove unnecessary class from the Mini-cart badge. #8557
• Fixed a bug where quickly clicking through shipping methods would cause UI to update multiple times after the final selection is made. #8498
• Products block: Fix attributes filters that do not update the editor preview correctly #8611
• Revert “Show Cart and Checkout blocks in Style Book” #8602

Technical debt

• Change the required minimum version from 6.1.1 to 6.1.0. #8649
• Only call wp.apiFetch.createPreloadingMiddleware() when necessary. #8647

A new version of WooCommerce Blocks has been released! Version 9.7.1 is now available for download from GitHub and WordPress.org.

Notable changes

New Blocks

We’re thrilled to introduce the following new blocks for the Single Product Template. This is our first iteration to port over existing functionalities of the Single Product template to the Site Editor.

• Single Product Details block: The block version of the product details in the Single Product Template. Merchants can now add product descriptions, information, and reviews to their stores.
• Add to Cart Form block: The block version of the add to cart form enables merchants to display a button in single product templates. Options are also displayed depending on product type. e.g. quantity, variation.

Disabling payment gateways stops associated saved payment information from displaying

We have improved our payment system by preventing saved cards from displaying if the payment gateway that added them is disabled. This ensures that users only see available and enabled payment options, making the payment process more efficient and straightforward.

Clearer Checkout Events in the Payment System

We have made changes to the checkout events in our payment system to improve clarity and reduce confusion. Several events were renamed to improve their accuracy and clarity:

• onCheckoutValidationBeforeProcessing renamed to onCheckoutValidation
• onCheckoutAfterProcessingWithSuccess renamed to onCheckoutSuccess
• onCheckoutAfterProcessingWithError renamed to onCheckoutFail
• onPaymentProcessing renamed to onPaymentSetup

Fix: Product categories, Product Tags & Keyword filters not working in the Products block

The following filters should be working fine, which are available in the Inspector Controls of the Products block:

• Product Categories
• Product tags
• Keyword

Enhancements

• Add Related Products block. (8522)
• Products block: Set the Product Title as a link by default. (8519)
• Add support for the woocommerce_loop_add_to_cart_args filter in the Products block. (8422)
• Enable the Inherit query from template setting by default for the Products block in archive products templates. (8375)
• Update the blockified archive templates to use the Products block. (8308)
• Improve the dismissal behavior of the incompatible gateways notice. (8299)
• Add the Add to Cart Form block, allowing merchants to display a button so the customer can add a product to their cart. Options will also be displayed depending on product type. e.g. quantity, variation. (8284)
• All Products: Add alignment settings for the Product Rating and Product Price blocks. (8264)
• Enable users to migrate to blockified Product Archive templates. (8248)
• Add Product Image Gallery block. (8235)
• Add Single Product Details block that displays the product description, information, and reviews. (8225)

Bug Fixes

• Add the woocommerce_disable_compatibility_layer filter to disable the compatibility layer. Disable the compatibility layer when Archive Product and Single Product templates contain the WooCommerce Product Grid Block. (8550)
• Ensure custom shipping methods supporting local pickup show up in the shipping options when no WC Blocks pickup locations are enabled. (8542)
• Focus the coupon code input when the form is revealed in the cart. (8525)
• Fix: Make Price product margin work in the All products block. (8518)
• Fix an issue in which setting the city/state would not persist in the first time for certain customers. (8497)
• Fix noticeContext declaration in the Shipping calculator. (8495)
• Update Product Details block so it inherits more styles from the theme. (8494)
• Fix: Adjust Catalog Sorting colors in dark themes. (8483)
• Remove opinionated styles from Button component on block themes that define button styles. (8478)
• Fix individual border controls not showing in the editor for Featured Product and Featured Category blocks. (8472)
• Fix potential console warnings when certain Checkout Blocks are disabled. (8471)
• Prevent saved cards from appearing that belong to gateways that are not enabled. (8461)
• Fix error: “Undefined property $area” error on the BlockTemplatesController. (8443)
• Fixed an issue where warnings relating to payment method script dependencies were shown when editing pages with Elementor. (8428)
• Performance – Prevent extra API hydration in the editor when using All Products block. (8413)
• Product Price: Fix typography styles in the editor. (8398)
• Fix spacing and display issues for Store Breadcrumbs, Catalog Sorting and Product Result Counts blocks. (8391)
• Fix Product categories, Product Tags & Keyword filter not working in Products block. (8377)

Technical debt

• Rename the checkout events. (8381)