WooCommerce goes FSE with Wizzie

Yesterday, I started to develop my first experimental Full Site Editing (FSE) child theme. It’s called Wizzie, and it’s a child theme of Fizzie.

  • The primary purpose of Wizzie is to support WooCommerce.
  • Its secondary purpose is to display information about WooCommerce, which is why it’s a child theme of Fizzie.

Background

I’d been asked by WooCommerce London to give a talk on something WooCommerce related so I thought I’d try integrating WooCommerce into a Full Site Editing ( FSE ), aka block based, theme.

In Automattic’s theme’s repository, there are two experimental block based child themes: Mayland Blocks and Quadrat. Both of them use Blockbase as their template. Whilst it appears that neither of these themes make use of the parent theme’s templates or template parts, their presence encouraged me to start to develop my own experimental child theme.

I found a way to override template part rendering and within half a day, the other half being taken up by WordCamp Europe, I was able to create the child theme that I’m using right now to write this blog post.

Requirements

The requirements for the Wizzie theme are being developed as Issues in the theme’s repository. bobbingwide/wizzie.

The intial requirements were:

  1. FSE theme for woocommerce.wp-a2z.org
  2. Child theme of Fizzie
  3. Integrated with WooCommerce
  4. Delivers a number of additional custom templates and template parts to support WooCommerce shopping.
  5. Uses WooCommerce blocks from WooCommerce 5.4.0 ( or higher ) and/or WooCommerce Blocks ( woo-gutenberg-products-block ) 5.3.0 or higher.

I have 5 days in which to develop the theme, suitable for presenting to the WordCamp London meetup on the 16th June.

Current position

The solution to date is a working child theme that doesn’t yet have any templates, template parts nor patterns of its own. Initially it didn’t have a Site Logo, so I’m dealing with that now.

Site Logo block

One reason I started writing this blog post was to set the Site Logo, so here goes.

I’ve got two different images to choose from. 64×64 and 256×256.

I’ve picked the 64×64 version of the image.

And I’ve chosen square, not rounded since that’s how I’ve done it in the Fizzie theme.