Labre Blocks – A Modified Quadrat Based Block Theme

Quadrat is a child theme of Blockbase experimental block-based theme created by Automattic theme team. The Blockbase parental theme is envisioned as the Underscore (_S) starter theme for block-based themes. However, it’s still in very early stage of its development iterations and many essential features are not yet developed or fully developed.

In the Automattic’s theme GitHub repo, at the time of writing this post, there are four Blockbase child themes – Mayland blocks, Quadrat, Seedlet blocks and Skatepark. Except the Skatepark, the other three child themes are available in WordPress theme directory.

Using Qadrat Blocks

Since its release in mid July, I have been playing with Quadrat and Blockbase themes for possible use in my personal site. I have been primarily testing the theme and doing some modification with VSC editor using Firefox browser.

In this multi-part learning posts series, I have been documenting my learning notes how I am customizing the Qudrat theme. This series is still work-in-progress.

Why Labre Blocks?

In short, it’s little bit of a cheating. Unlike in classic themes, there is no well documented methods to create child-themes of block-based themes but discussions are underway.

Therefore, to preserve my modifications from future updates of Quadrat and Blockbase, I thought to change the theme name from quadrat to labreblocks. Major disadvantage of this cheat is that I have to check change log from each updates and manually update my Labre blocks theme.

A Few Known Issues

During my initial test, I discovered the following issues. Because this is my longer term learning project and as I test new features (eg. patterns) other issues might be discovered, as expected at experimental state.

  • With 5.8 updates, the blockbase_fonts_url function seems to have broken. Fonts section in Blockbase as well as its child themes does not work.
  • Before the 5.8 updates, the clamp() function was working for as front size value, but the update it doesn’t work either.
  • One other issue I had noted together with FontFamily was use of clamp() function defining custom layout contentWidth and fontSize in theme.json.

There might also be many other issues that I am unaware of, or I have not yet test. There is a temporary work around for using google fonts, but defining custom layout object value with clamp() function appears to be related to GB as with the fonts URL.

Related Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively.

Please note that this post is cross-posted in Just Write site, which is powered by WordPress & Labre Block Theme.