This is the third post about redesigning my website now. I did a major re-write and re-design in 2010, and then again in 2021. I have been thinking about redesigning again for over a year, after the release of WordPress 5.9, which added full-site editing (FSE) also known as the “Site Editor”. This takes the Gutenberg block framework to a new level – instead of just composing posts and pages of blocks, the whole site is composed of blocks, which means that creating headers, footers, sidebars, and the like can now be done without any coding knowledge whatsoever. However, unlike many other WYSISWYG (what you see is what you get) type website editors, WordPress still has a powerful plugin system, which is pretty much limitless.
There was one big barrier from me simply switching to a block theme though – I discovered that all of my Collapsing plugins did not work with block themes. Though I have not actively developed these plugins for some time, I have mostly kept them working, and they are the way that I got into WordPress development in the first place, so I didn’t want to give them up. Plus, now that my site has been around for over 15 years, having a collapsible archive list is more important to me than it ever has been. Over the past year or so I gradually found time to learn about Gutenberg development and start converting all my plugins. I actually spent most of New Year’s Eve working on this. Once I had one plugin mostly done, it got much easier to work on the other things. During the process I also tried to clean up the code a little bit, though it is still pretty messy. That is not too surprising given how little I knew about programming in 2006, and how much has changed since then. I also have made a number of fixes to make the code compatible with PHP 8.1. and 8.2.
I am excited to announce that I now have Gutenberg-based versions of the Collapsing Archives, Collapsing Categories, and Collapsing Pages plugins available. I have not updated them to the stable version yet, because I anticipate that there are still some bugs to fix. If you would like to help beta test, that would be great. WP 6.2 is coming out next week, and I plan to release them then.
Ultimately for this change, I did not want to re-design my site at all. I wanted to replicate what I already had, but using the new Twenty Twenty Three theme. I mostly succeeded at that, but not quite. I set up a staging site to test all the changes, and once I got it pretty much the way I wanted, I then exported the theme from the site editor, and then tried switching to it on the live site. It broke. Not a white screen of death, but pretty broken. I looked at the site editor, and noticed that several of my template parts were missing, with notices that they had been deleted. I reverted back to the old theme and investigated further.
One thing which is still not 100% clear to me is whether or not I should use a child theme with block themes. I did a bit of research, and it seemed to me like this is still the best way to go. In particular, I wanted to have a custom screenshot to make it easy for me to find my theme in the theme chooser. I then realized that when I exported the theme, the template parts had a path including the path of my theme. That is why the template parts broke. I simply updated that with a little UNIX foo and was good to go.
rg -l twentytwentythree -g '*.html' | xargs -IXXX sed -i 's/twentytwentythree/robfelty-twentytwentythree/g' XXXrg is the RipGrep program, which recursively searches all files in a given directory. Using the -g option I restricted to only .html files, since I know those are the template files which had the issue. Using the -l option only prints out the filenames. Then I pipe those filenames into xargs which executes a command for each one. Using the -I option to xargs lets me specify the filename in the command I want to run, which is sed – the stream editor. Thus XXX is a placeholder variable representing the file. Using the -I option to sed stands for “in-place”, meaning that I want to modify the file directly, instead of creating a new file (it basically creates a temporary file and then moves it afterwards, but automatically). And all I did was substitute any occurrences of “twentytwentythree” with “robfelty-twentytwentythree”.
The one major thing I don’t like about the new design yet is the lack of a “sticky” header. I read that there is a new option to do this (only available via the Gutenberg plugin as of the time I write this), but it didn’t quite work how I would expect it. What I would really love is to have a big header which scrolls away a bit and leaves my top nav bar, like the 2017 WP theme does.