A glitch theme, built with Blockbase.

Last week I spent a little time putting Blockbase to the test. There was some exploration into the text and images gathering dust using CSS and SVG filters, and I thought it would be fun to explore pulling them off in a highly thought-out block theme.

In the past when I’ve used a theme like this, I’ve usually started with something like emptytheme Generator in the WordPress theme-experiment repository. It only provides the files you need to create a block theme, so it’s a good minimal way to get started.

This time, I used Blockbase. However it does not yet include a quick generator script like emptytheme does, is one of the functions. Instead, I just created a child theme like I normally would: adding style.css, functions.php, And index.php files. I have also copied child-theme.json The file is from an in-progress quadrat theme, because I knew it would get me started.

my work in child-theme.json Was very brief – I just changed some variables and used blockbase’s compiler script once. Then I copied and pasted the block style effects from the plugin I mentioned above.

Once all this was done, I jumped into custom templating. I just made two templates, plus a custom header showing a video loop of me waving at the camera (but filtered into oblivion using the tools at photomosh.com). I used the “Wrapped and Stretched Photocopy” block style on the text of the header and the “Photocopy” style on the selected images. Combined together, this created a highly stylized look and feel, reminiscent (for better or worse) of the old days of Flash animation:

It all works great in the editor too! I encountered a problem loading my SVG filters in the site editor’s iframe, due to a combination of Gutenberg limitations and browser bugs, but other than that, things looked exactly like the frontend:

filter did The posts work great in the editor though so I can show you how it’s supposed to work by loading the headers there:

In the end, the filter bug isn’t really the fault of the subject, and I’m sure I can solve it if I were to devote some more time to this exploration.

The topic is obviously a bit overkill, but that was really the point of the experiment! I’m surprised that I was able to fold the work of my previous block styles into such a distinctive, full-featured theme with minimal effort.

Overall, I found that the benefit of using Blockbase was the peace of mind. than to start anew or use emptytheme, Blockbase made sure I had a fully-functional block theme right away. It already included additional templates for pages like 404 and search, and it was packed with little CSS improvements for things that full-site editing doesn’t quite support yet.

This eliminated a lot of extra hectic work, and allowed me to try and focus on the aspect of theme-creation that’s most exciting to me: the design and creativity of the theme.

The code for the topic is over here in case anyone would like to poke around:

https://github.com/Automattic/themes/tree/try/glitchy-theme-experiment/glitchy

I look forward to seeing Blockbase spark building on many more themes!