Changelog

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

Notable Changes

Updated Shopper Notices

In this release, we introduce new components and styling for buyer notices, featuring Snackbar lists and Notice banners with shared components. These new styles give a uniform look and feel across all WooCommerce Blocks.

In addition to this, if your store uses either the Cart Block or Checkout Block on the main cart and checkout pages, these styles will also transfer to all other WooCommerce notices, e.g. the ones in the “My Account” area. These new styles should take precedence over any existing theme styles due to the new markup and CSS being applied.

The basic HTML structure of the new notices is as follows:

<div class="wc-block-components-notice-banner is-error">
     <svg />
     <div class="wc-block-components-notice-banner__content">MESSAGE</div>
</div>

There are different styles based on the notice status which include error, success, info, default, warning.

If you’re not using the Cart or Checkout Blocks (if you’re still using the shortcode based cart and checkout for example), existing notices rendered by WooCommerce will not be affected.

Here’s a preview of how each type of notice looks:

Themes that use customised notices will not have their styles respected after this update. The new notices use new CSS class-names and markup, so any existing styles will not apply. We’ve avoided using legacy class names to avoid conflicts and to ensure that there is consistent styling across all notice types. 

Themes can target the new selectors after this release, in which case the main CSS selector is .wc-block-components-notice-banner.

Documentation is available:

• NoticeBanner component documentation
• Snackbar Notice documentation

Cart and Checkout blocks are now wide-aligned by default when added to a page

We made a change to the Cart and Checkout blocks, so that they have a wide alignment by default. This helps to ensure the blocks display correctly when using some block themes. Previously, they would be narrow, and appear in a single column even on wide devices. To revert to how they were, select the main Cart or Checkout block, select the “align” button, and choose “None”.

New additionalCartCheckoutInnerBlockTypes filter

In this release we added a new filter, additionalCartCheckoutInnerBlockTypes which allows additional block types to be added to the Cart and Checkout inner blocks areas. We included an example of how to use it in the available filters documentation.

An example of how this can be used, is if you have created a custom block, and want merchants to have the option to insert it in the Cart/Checkout block, using this filter would let them choose it.

You may also supply core block names to this filter. For example, if you want to allow merchants to include the core/table block below the address form, this is possible too!

registerCheckoutFilters( 'my-custom-plugin', {
	additionalCartCheckoutInnerBlockTypes: ( value, extensions, { block } ) => {
        value.push( 'core/table' );
		return value;
	},
} );

Styling options for product blocks

Product SKU, Product Price, and Product Image now support more styling options in terms of color, dimension, and typography and have support for Global Styles.

New blocks

• Product Reviews block: Displays the reviews for a given product. It can be inserted inside the Single Product template.

Changelog

Enhancements

• Filter by Price: Simplify the interface by removing the decimals. (8975)
• Moved editor-only placeholders to the block inspector to improve the appearance of the checkout block in the post editor. (8957)
• Enhance Product SKU block styling capabilities with additional support for color, typography & spacing. (8913)
• Enhance Product Price block styling capabilities with additional support for background color, line height, font family, letter spacing, and padding. (8906)
• Enable users to migrate to the blockified Single Product template. (8902)
• Set Cart and Checkout blocks to have the wide alignment by default when first added to a page. (8899)
• Add padding support for Product Image block. (8895)
• Added the “Products Review” block. (8857)
• New styles for error, info, and success notices across notices created by blocks. Additionally, existing notices in core receive new styles when Cart and Checkout Blocks are in use. (8659)
• Add additionalCartCheckoutInnerBlockTypes checkout filter to allow additional block types to be inserted into the Cart and Checkout blocks in the editor. (8650)
• Product Rating: Normalize the height of rating icons and the add review link. (8399)
• Show the collection address in the shipping section of the Checkout sidebar when using a Local Pickup method. (8305)

Bug Fixes

• Prevent the shipping/billing address forms from breaking when entering postcodes for specific countries. (8987)
• Product Archive Compatibility Layer: Fix duplicated content. (8915)
• Product Archive compatibility layer: Fix the woocommerce_after_shop_loop_item_title hook positioning. (8911)
• Fix image placeholder for the Product Image Gallery block that was not fitting inside its wrapper component. (8901)
• Add Cart and Checkout blocks to the Style Book. (8888)
• Fix duplicated “Shipping Method” Block on the front-end. (8861)
• Replace the Notice component with the Skeleton component for the Add to Cart Form block. (8842)

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)