Trials and tribulations with WordPress Block Themes and Full Site Editing

Where do I begin? For years I have resisted and rejected everything stemming from the Gutenberg project. I felt it was the wrong direction for WordPress. I felt the WordPress core team doesn’t understand how people who make a living building WordPress sites really use it. I felt they were digging in their heels on the idea of WordPress as a blogging platform, as if that were as relevant today as it was 15 years ago, and that they were in absolute denial over the fact that the most dedicated users of WordPress are actually professional website designers and developers who use it not as a blogging platform, but as a general-purpose CMS.

Of course, my feelings on the matter are utterly irrelevant, because I am not an active member of the core team development community. The people who actually build WordPress are the ones who decide what it is. I am the one who is incorrect, even if I believe the decisions they are making are the wrong ones for the health of the platform.

Then again, I’m a pragmatist, not an idealist. As much as I disliked details about the implementation of Gutenberg, I certainly did not disagree with the idea of a block-based approach to web design. I’ve been calling it “Modular Design” and I’ve been a proponent of it since well before the Gutenberg project existed. And as flawed as I felt Gutenberg’s implementation was, even in its early beta form it was way better than the shit sandwich that is every other “page builder” type plugin. (Elementor, WP Bakery, Divi, Beaver Builder, etc.)

An unsolvable problem is that there is no way for a visual web page design interface to both be simple to use and extremely flexible for all possible design ideas. HTML/CSS offers nearly unlimited possibilities for the appearance of every element on a web page. But taking full advantage of that flexibility still relies on being able to write code.

Every visual tool that exists for web page design must balance design flexibility against interface usability. The more a tool offers flexible design options, the more overwhelmingly complicated the designer interface will be. An interface has to be “opinionated” (in the common parlance) in order to be usable. It has to limit the options presented to the user, and have certain decisions baked in.

Page builders are a disaster in this regard. Without exception they have leaned towards maximum flexibility, resulting in cumbersome, overwhelming interfaces that are often harder to learn than writing code. I have been lamenting for years that so many people are so desperately fearful of learning to code, for fear that they’ll “mess something up,” not realizing that a) the GUI tools they use are harder to understand than code is, and b) they’re even more fragile if you “mess something up.” Unlike with writing code, if you colossally hose up your design in a page builder, you almost certainly can’t just Command-Z your way back to how it was.

Now, where was I?

Ah yes, Gutenberg, the Block Editor, Block Themes and now the emerging Full Site Editing in WordPress 5.9 and beyond. At last, WordPress has a full visual editor for everything!

Uh… no.

For the past several years I have been building WordPress sites using my own custom-built base theme, which has relied extensively on Advanced Custom Fields, and in particular its Flexible Content fields. But some elements of this theme are getting a bit long in the tooth and need to be rewritten (especially the CSS for the header and footer), and I have been wanting to ditch the Flexible Content fields and embrace the Block Editor for page content.

So, why not go all the way and create a brand new Block Theme that fully embraces Full Site Editing? I know it’s technically still in “beta,” but it debuted in the WordPress core in 5.9, so it must be fairly close to “ready for prime time,” right?

Uh… no. (Again.)

It really doesn’t help that you can hardly find any discussion of Full Site Editing that doesn’t breathlessly proclaim its unequivocal greatness. FSE gaslighting is everywhere.

Full Site Editing is an intriguing idea, and there are parts of its interface that look quite nice and appealing. But it is so, so far from being complete that it is a) egregious that they’re calling it “beta” and b) absolutely inexcusable that it is not only rolling out in core, with an “Edit site” link showing up in the admin bar for any site admin to fuck with (and I use that blunt term because it’s the only way I can convey how reckless an addition I think it is at this point), but that it shuts off the Customizer by default unless your theme or plugins specifically enable it.

To say I am feeling let down by FSE is an understatement. But, fine. I don’t need it. Just tell me how I should build my block theme in the meantime, because, you know, I’m actually building sites right now and not just tinkering around while I wait for the core team to finish.

Good luck with that.

I have now been working for the better part of two weeks on building my new theme, and I have been constantly struggling with so, so many aspects of this. It’s not just an evolution of WordPress, it’s really a completely different system that is taking over what used to be WordPress, using entirely different tools. And the documentation I’ve found so far has been scattershot and utterly lacking. (Carolina Nymark’s excellent Full Site Editing website notwithstanding… that’s the only thing that has helped me get this off the ground at all.)

My biggest problem is that the things that I need and feel are important in a theme seem so far removed from the things the core team has focused its attention on. There’s so much seemingly unnecessary convolution in parts of the system that I never even use (author archives? really?), and so little of it aligns with any aspects of how I usually go about designing and building a site.

I found myself falling into a trap of creating a bunch of Advanced Custom Fields option pages, until I finally realized that I was not accomplishing my goal of embracing the Block Theme philosophy, and I was not really getting anywhere. Eventually I realized that some of it is my own bad habits, and I needed to take a step back.

Rather than building a colossal theme with tons of configuration tools (most of which will probably only ever be used by me), I need to use the knowledge I’ve gained over the past several years of working with clients on my existing theme.

Speaking of my existing theme, it consists of five main components, most of which rely heavily on ACF:

  1. Flexible Content fields for block-style page editing
  2. Options pages with site-wide configuration
  3. Special-purpose/reusable content blocks (banners, modal overlays)
  4. Customizer settings
  5. A “tweaks” plugin for site-specific design, functionality, CPTs, etc.

Reinventing my tools in a new block theme, I’m finally recognizing that I need to differentiate the aspects of the theme my clients actually use from the aspects that are really only for me in configuring the site. The clients only really touch #1 and #3 from that list. #2 and #4 are tools I created with an idealized view that clients would be able to customize their own sites, but over time it has become apparent that I’m the only person who ever uses them. And #5 really underscores the fallacies and flaws in this approach: it’s a catch-all of CSS that’s too complex for the Customizer, along with functionality that truly does belong in a plugin, but a lot of it should more properly be in a child theme, except I couldn’t use a child theme because I depend so much on files in the acf-json folder that won’t get loaded if there’s a child theme.

Moving away from ACF as a content editing tool (though I won’t do away with it entirely — it’s great for things like an options page where clients can plug in their phone number, hours of operation, etc., plus I plan to use it to create custom blocks without having to learn React) will eliminate some of the issues that came with building so much of the theme around it.

And, more importantly, recognizing that I was using a lot of ACF for settings that only I ever touch, I realized I do not need to make those settings, like color palettes, fonts, etc., editable in the admin interface. And as it happens, those are exactly the kinds of settings that go into the theme.json file of a block theme.

It’s taken me nearly two weeks of tinkering, following dead end paths, mulling things over, staring into space, waking up in the middle of the night, and moments of nearly jumping out of my skin with stress, to finally realize what maybe should have been obvious: that I just need to create a parent theme with my general configuration, and child themes with each client’s unique colors, fonts, etc., and put all of the stuff that only I ever touch into the code instead of the admin interface.

It can be hard to see the forest for the trees sometimes, and I’ve definitely been struggling against that over these past two weeks. But it doesn’t change the fact that FSE is not ready. What it does do though is answer the question, Who is Full Site Editing for? It is not for me, and probably never will be. But that doesn’t matter for my work, after all.

The Raspberry Pi Arcade Project, Part 3: Get Raspbian

Now that you have your Raspberry Pi and assorted accessories, it’s time to get it up and running. The Raspberry Pi doesn’t have a hard drive… that’s what the SD card is for. The Raspberry Pi includes an ARM CPU, so in principle any operating system that has been ported to the ARM architecture should be able to run on it.

In practice… I’m already in over my head trying to explain CPU architectures. But you don’t need to know anything about that to get your Raspberry Pi running. Several “flavors” of Linux have been ported and modified specifically to work well with the Raspberry Pi but the gold standard is Raspbian, a variant of the popular Debian distro, and the preferred choice for starting out on the Raspberry Pi. If you really know what you’re doing and have very specific requirements, other OSes may be preferable over Raspbian, but if you just want to get your Raspberry Pi up and running with a stable, easy-to-use Linux, Raspbian is the way to go.

Get Raspbian

The first step in setting up Raspbian is to download it. This of course assumes you have another computer to download the disk image to. Any Windows, Mac or Linux PC should do. The key is having a PC with an SD card slot, because you’ll need to use it to get Raspbian onto the SD card.

If you don’t have a PC with an SD card slot, or you just don’t want to mess around with it, you can buy an SD card preloaded with Raspbian for not much more than the cost of the card itself. Note that the preloaded SD cards are probably only going to be 4 GB however, not the 16 GB card I recommended in Part 2 of this series.

Assuming you’re going to install Raspbian yourself, the first thing you need to do is download it. This download link includes a few other options for different OSes that will also work on the Raspberry Pi, so if you are inclined to ignore my advice, check them out!

Install Raspbian on Your SD Card

Once you have Raspbian downloaded, you’ll need to install it on your SD card. The process for doing this varies depending on whether you’re on Windows, or using a UNIX-based OS like Mac OS X or Linux. More detailed Windows instructions are available on the download page I linked to above. Being a die-hard Mac user, I am going to describe the Mac/Linux process, which I recommend doing at the command line.

1. Insert the SD card into your SD card slot.
This should be fairly self-explanatory. On most MacBook Pro’s the SD card slot is on the side near all of the other ports; on other Macs like my Mac mini, it’s in the back. Not all Macs have an SD card slot, e.g. the MacBook Air. If your computer doesn’t have an SD card reader, USB add-ons are available.

2. Open Terminal and become a superuser.
If you’ve never used Terminal before… well, to be honest, if you’ve never used Terminal before, this whole project is going to be a bit of a challenge. But solider on! Terminal is located in your /Applications/Utilities folder. It’s your way to access the command line on the Mac. You’re going to be doing some things that require root (“superuser”) access. The “safer” way to do this is to prepend any of those commands with sudo but I prefer not to mess around with that. Type sudo -s Enter to enter superuser mode. Note the command prompt will change from $ to #. Now you can do some real damage. Consider yourself warned. (And do not, under any circumstances, type rm -Rf / ever. For real.) Proceed at your own risk, or just prepend commands with sudo along the way if the system says you don’t have permission.

3. Identify your SD card in the filesystem.
In Terminal, type df Enter. You’ll get a list of all of the disks (“volumes”) on your Mac. You’re looking for the SD card. The name it displays in the Finder will be shown in the far right column, “Mounted on”. But you need to know what its name is in the “Filesystem”, the far left column. On my Mac mini it comes up as /dev/disk2s1. You don’t need to worry about the s1 part; that’s the partition. We just need the disk number, e.g. /dev/disk2. Make note of this for future reference. Now you need to unmount the volume so you’ll be able to write to it. Take a look at the disk name under “Mounted on” (starting with /Volumes/). Type umount -f [disk name] Enter, replacing [disk name] with exactly what was listed under “Mounted on.” Important: if there are any spaces, you’ll need to edit the name and put that portion, between slashes, in quotation marks. For example, if the name is /Volumes/My Awesome SD Card you’ll need to type umount -f /Volumes/"My Awesome SD Card" instead. And if this doesn’t work, check here for another tip on unmounting the volume.

4. Identify your Raspbian disk image.
Now you want to switch to the directory where your downloaded Raspbian disk image is. This is likely to be the Downloads folder in your home directory. If so, then in Terminal you’ll type cd ~/Downloads Enter. Then type ls -al Enter to see a list of the files in this directory. You’re looking for one with a .img file extension. In my case it’s 2013-02-09-wheezy-raspbian.img. If you don’t see that, but you see something similar with a .zip extension, you just need to unzip it. Type unzip [filename] Enter (using the real filename, of course) and then type ls -al Enter again, and you should see another file with the same name but ending in .img. That’s the one.

5. Write the image to the SD card.
Now that you know the name of your Raspbian disk image and the disk you’re writing to, you can run the dd command to copy the image over. This command includes a lot of different options for setting the block size, etc. The kinds of technical details about computers most of us haven’t thought about since the early days of MS-DOS, if ever. In my experience these settings don’t appear to matter here, however, as I was able to prepare my SD cards with only the basic parameters of if (input file) and of (output file). Here’s the command I would use in my exact situation. Adjust your if and of according to your results of steps 3 and 4 above.

dd if=2013-02-09-wheezy-raspbian.img of=/dev/disk2

Then hit Enter and… wait.

And wait.

And wait.

This is the command line. You will get no feedback that any progress has been made, or that anything is happening at all. So just leave Terminal open and go about your business. Some substantial amount of time later (in the realm of a half hour, in my experience), the process will have completed, and you’ll get your command prompt again. That’s how you know it’s done. Now, go back to the comfortable confines of the Finder and see if the SD card is showing up as a mounted volume. If it is, eject it. Now you can take out the SD card and insert it into your Raspberry Pi. You’re ready to power up!

Next time… powering up your Raspberry Pi with Raspbian for the first time.

Update (11/29/2022): This is mainly for my own future reference, but you can get a status update during the long wait by pressing Ctrl-T.