Attempt to create a child theme of Fizzie integrated with WooCommerce

bobbingwide commented 3 years ago

For blocks.wp-a2z.org I've developed a Full Site Editing theme called Fizzie, which replaces the Genesis-a2z child theme used on other subdomains of wp-a2z.org.

Now I want to attempt two things, both of which are WooCommerce based:

To create an FSE child theme of an FSE theme with WooCommerce theme support.
To create an FSE child theme of a standard WooCommerce theme such as Storefront.

Wizzie is intended to satisfy the first requirement, and Forefront* the second.

Oh, it seems that WooCommerce already had a theme called Forefront, which has been retired. Maybe I should call it Fourfront and pretend it's my fourth FSE theme. Perhaps I should call it Storefront Blocks.

Requirements

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

Proposed solution

[x] Implement wizzie as a child them of fizzie
[ ] Custom templates and template parts summarised in table below
[ ] Minimum styling
[x] Refer to Automattic's experimental FSE child themes for what's needed in an FSE child theme
[ ] Start from style.css and find out what really is needed.
[x] Implement in woocommerce.wp.a2z ( local development env)
[ ] Update documentation for blocks from WooCommerce and WooCommerce Blocks
[x] Clone to woocommerce.wp-a2z.org

Additional / override templates / template parts needed in wizzie

Template / part	File name	Contents
template	front-page.html	Make it look like an online shop ssimilar to the Storefront demo
custom template	page-checkout.html	Just the checkout
custom template	page-cart.html	Just the shopping cart
custom template	page-shop.html	Just the shop page
custom template	page-my-account.html	Just the My account shortcode
template	single-product.html	same as page-cart.html ?
template	category-product_cat

Notes

See https://developer.woocommerce.com/2021/06/08/woocommerce-5-4-released/ for slightly confusing notes about WooCommerce blocks.

WooCommerce Blocks 5.1.0: The package update includes 5.0.0 and 5.1.0. Please note that most content included in Blocks updates is not present in WooCommerce unless the WooCommerce Blocks feature plugin is active.

I may need to implement some of the PRs raised against WooCommerce in order to be able to load HTML templates and template parts when add_theme_support( 'woocommerce' ) is defined.

https://github.com/woocommerce/woocommerce/pull/30013/files

bobbingwide commented 3 years ago

With just style.css and nothing else in the child theme visiting the site produced

Warning: filemtime(): stat failed for C:\apache\htdocs\wp-a2z/wp-content/themes/wizzie/category.css
 in C:\apache\htdocs\wordpress\wp-content\themes\fizzie\functions.php on line 105
Template part has been deleted or is unavailable: header 
Template part has been deleted or is unavailable: page-content 
Template part has been deleted or is unavailable: search 
Template part has been deleted or is unavailable: page-footer 
Template part has been deleted or is unavailable: footer 
Template part has been deleted or is unavailable: footer-menu

The first message is because the Fizzie tries to locate category.css from the directory returned from get_stylesheet_directory(). Now that Fizzie is being used a parent theme ( the template theme for wizzie) then we need to change the (Fizzie) code to use get_template_directory() and get_template_directory_uri().

The subsequent messages are most likely due to Fizzie's templates and template parts hardcoding the theme attribute to the wp:template-part blocks.

bobbingwide commented 3 years ago

To resolve the problem loading category.css I needed to change Fizzie

To resolve the Template part has been deleted messages I added functions.php copied from Fizzie, significantly reduced to:

enqueue Fizzie's style.css file
apply a block override to the template-part block

The template-part block override implements support for loading the template parts from the child theme ( get_stylesheet_directory() ) then the parent theme ( get_parent_directory() ), if no custom version is found in the database.

I also eliminated the call to _gutenberg_inject_theme_attribute_in_content(). I need to check if this was actually necessary.

bobbingwide commented 3 years ago

I may need to implement some of the PRs raised against WooCommerce in order to be able to load HTML templates and template parts when add_theme_support( 'woocommerce' ) is defined.

bobbingwide / wizzie