WordPress Watch:

WooCommerce 3.7 and Gutenberg 6.3 updates

The past week was all about two big plugins releasing important updates. Both WooCommerce and Gutenberg got significant improvements. Gutenberg saw another accessibility improvement and WooCommerce now has even more integration with, well, Gutenberg 😄. Let’s dive in and see what’s what!

WooCommerce introduces more Block Editor integration

WooCommerce 3.7 was released last week and it brings deeper integration with our new Block Editor. While WooCommerce already provided the option to use a Featured Category, Featured Product, and Best Selling Category blocks, for instance, this version added three more blocks:

  • Product Categories List block; this block allows you to show product categories in a list or dropdown.
  • Featured Category block; this block lets you select one or multiple categories to feature on your site, and it displays the category and a link to its category archive page to customers.
  • Products by Tag(s) block; this block gives you the option to feature a selection of products linked to a specific tag or set of tags.

Of course, the rest of the plugin also saw overall refinements. You can now, for example, find all WooCommerce Blocks more easily when you click on the plus symbol to create a new block by typing “WooCommerce”.  Read up on what these integrations look like in the WooCommerce 3.7 introduction post.

Gutenberg version 6.3

One of the areas where the Block editor still needs improvement is the accessibility of the editor. The block user interface introduces navigation from within the block itself, as well as from one block to another, which can be complex. This makes it very challenging for screen reader users to navigate the content of their posts. Gutenberg 6.3 fixes this with what they call a Navigation Mode. Or in their words:

To address that issue, we’re introducing the Navigation Mode. By default the editor is loaded in this mode, it allows you to move from block to block using a single Tab press. You can also use the arrow keys to navigate between blocks. Once you reach the block you want to edit, you can enter the Edit Mode by hitting the Enter key. The Escape key allows you to move back to the Navigation Mode.

Riad Benguella

This is a great start to make the editor more accessible for many different types of users. You can read more about why accessibility matters here.

As with the WooCommerce update mentioned above, this new Gutenberg release also comes with smaller improvements. Things like support for text alignments in table block columns, and border color support for the separator block. As usual, you can find out more about what’s new in Gutenberg 6.3 in their release post.

Bonus links

WordPress Watch series

WordPress Watch series

Remkus keeps you in the loop of all things WordPress. News about WordPress releases, events, new plugins, community news and more ... don't miss anything!

Make Yoast SEO & Woo work together smoothly

  • Make your products stand out in Google
  • Get more buyers to your online store
  • Make products easier to find on your site
  • Have a cleaner XML sitemap & more
More info

9 Responses to WooCommerce 3.7 and Gutenberg 6.3 updates

  1. William
    William  • 2 months ago

    Great words of advice Remkus! So true and very sad to see so many not doing the things you are recommending.

    • Remkus de Vries

      Thanks, William!

  2. smart sniper
    smart sniper  • 3 months ago

    very good info…

    • Remkus de Vries

      Glad you like it!

  3. Astrotalk
    Astrotalk  • 3 months ago

    What an awesome feature added in the WooCommerce 3.7. Keep updating, we really appreciate your work.

    • Remkus de Vries

      Thank you!

  4. arman
    arman  • 3 months ago

    when we can use gutenberg editor everywhere ?!
    like product page , or other custom post type
    especially when i want to add new product i like to use gutenberg instead of old editor

    • Remkus de Vries

      Custom Post Types need to “told” that they need to use the Block Editor (Gutenberg) in their declaration, their code. You can find out more about how that works in this post.