Thursday, 7 December, 2017 UTC


There are a number of bug fixes — some CSS, some JavaScript, and even some accessibility improvements — but there are three big things I want to highlight in this update.
Replaced Font Awesome icons
When I first wrote Cover, I bundled Font Awesome with it. When I rewrote the theme as Cover2, I kept the icons, but I used the SVGs directly, instead of using the icon font. This was directly influenced in large part by Chris Coyier’s article on SVGs vs icon fonts as well as my own experiences with icon fonts. That decision has served me well, I think. The code in Cover2 that handles the SVG sprite is taken directly from Twenty Seventeen (yay open source) and adapted to Font Awesome icons.
Last year for Christmas, my sister gave me a year’s Nucleo subscription. (I’m sure it was the weirdest thing she’s ever heard of for a present.) I decided to incorporate those icons into Cover2, as a replacement for Font Awesome. The most obvious changes are in the search and hamburger (the ≡ icon) icons, but I’ve also replaced the category and tag icons, as well as all the different post format icons.
Honestly, the thing that really tipped the scales for me was this update:
Introducing a new icon category: Interactive Icons
— NucleoApp (@nucleoapp) November 7, 2017
I had been using Morpheus SVG to transition the animation from hamburger to close icon, but it wasn’t great. So when I replaced Font Awesome with Nucleo, I used their new interactive icons to animate the hamburger and search icons. (As a result, I’ve also removed Morpheus SVG.)
Mini-nav sub-items
In rewriting the Cover theme, I got rid of a lot of what I considered “fluff.” Gone are featured images in the post listing views (search results, author/category/tag archives, etc.), staggered grid post listings (think Pinterest-style masonry blocks), search overlay widgets, footer widgets, and the social icon menu.
I did add something, though: a new menu location next to the hamburger and search icons, which I called the mini-nav. Cover2 is a blog theme, and to that end, it wants to direct the reader’s attention to the content. Navigation should get out of the way. There are exceptions to every rule, however, and so I added the mini-nav for the few things you might still want your reader to notice. For me and my blog, it’s my daughter’s page — catching you up on everything she’s gone through over the past nine years — and the landing page for my theme.
I check my site’s stats every so often, and in doing so, I sometimes notice incoming links from other blogs using Cover or Cover2. One such site was using the mini-nav, but not how I intended it to be used. I only ever intended it to be a single level — no sub-menus. There was a bug, however; the JavaScript that I wrote to build the sub-menu toggle icons was also building them for the mini-nav. You could click the toggle all you wanted, but you’d never see the menu pop out.
No sub-menu. Cue sad trombone.
I could have just fixed the bug, since that’s technically what it was. But obviously someone wanted to display a sub-menu there, so I decided to extend that functionality.
Phew. That was a lot of typing just to say, “you can have sub-menus in the mini-nav now.”
Preparing for Gutenberg
If you don’t follow WordPress development, this next bit might be news to you. But if you run a WordPress website, you’re going to find out sooner or later.
You’re welcome.
As of this writing, WordPress is on version 4.9. Come version 5.0, a brand new post editor called Gutenberg is going to replace the good old post editor you’ve come to know and love. Or hate, or use as little as possible. I don’t know your life.
Gutenberg is meant, among other things, to rid WordPress of “shortcode soup,” instead giving users a WYSIWYG (“what you see is what you get,” pronounced “wizzy-wig”) experience. You want a gallery? You insert and see an image gallery in the editor, and that’s exactly what you’ll see in the final post. Images, YouTube embeds, blockquotes, whatever.
There are a number of default styles that Gutenberg comes with — it’s a plugin now, but it’ll be bundled into WP core when 5.0 drops — but theme authors are encouraged to fit their themes to match. This version of Cover2 does exactly that. Posts written with Gutenberg should have zero difference in style with a post written in the old editor.
If the theme supports it, Gutenberg styles also allow for breaking content out of the column width. This is something Cover2 is written for: I originally wrote Cover and Cover2 for use with the Aesop Story Engine plugin, and full-width components have been supported from the get-go.