updated: 6/13/19 jump to update
When I look at YouTube videos about Gutenberg, or check out plugin downloads for some related add-ons, the numbers of views or installations can be only in the 100’s or 1000’s.
IT IS THE EDITOR NOW!
I’m confused, but that’s ok. I like using Gutenberg. I just have to figure out how to make awesome things with it. So…today, which is Memorial Day, at the start of a crunched week, I’m going to try to convert a theme to be Gutenberg “ready” or whatever.
I just want to say though, I’m just trying to work this all out. I have no idea what I’m doing and I’m not an expert. But I’ll reference some people that seem to be.
But also, Gutenberg is a moving target! Things change quickly, and I’ve seen blog posts from when it was in beta that are way out of date but are still some of the top posts about Gutenberg. It’s a lot to keep up with this quickly evolving block editor.
Gutenbergify-ing my favorite starter theme.
I started using the JointsWP WordPress starter theme years ago, because I was working as a WordPress freelancer and I was getting stuck editing other people’s themes from theme stores over and over again, and often…at least back then… they weren’t necessarily built for customization.
(lots of crazy css overrides, at the minimum) aka nightmare
It was also the dawn of “responsive” web design, and I wanted to be sure I could handle a column layout that collapses down to a single column for mobile…so when I went looking for a starter theme for making my own sites, and break out of the freelance hell that is editing themeforest themes circa 2012 or so, it brought me to looking at two css frameworks to decide between:
Bootstrap (at the time, Twitter Bootstrap) and Zurb’s Foundation
I went with Foundation, which I found in the form of the theme JointsWP. JointsWP was originally a combination of a starter theme called Bones + the Foundation css library (Bones. Joints. Get it?).
ASIDE: Foundation over Bootstrap?
Back Then! Reasons (for me):
- Remember, this was years ago, and JointsWP was just the tightest package. A lot of the Bootstrap WordPress themes seemed like smaller, incomplete projects when I was checking around at the time. Some weren’t up to date, had pending features, or had a lot of stuff hidden behind a premium version (w/ a bunch of stuff I didn’t want). JointsWP just had the right package for me to learn and grow into. Again, this was year ago.
- At the time (from memory), Bootstrap was using LESS as a preprocessor and Foundation was using SASS. I read every article I could comparing the two for a night to understand the differences, and chose SASS to be the one I wanted to learn (eventually / currently Bootstrap uses SASS, i think. Not sure, but not originally. But again, I’m not sure of that either.) I read SASS for Web Designers by Dan Cederholm from A Book Apart on a flight and it made me feel confident enough to use Foundation, and by extension SASS, as much as possible. I plan to study the more advanced nuances of SASS hopefully in the next few weeks just to level up in that area, so expect a post about that. Also Foundation seemed easier to me because rem seemed like an easy calculation for me to make starting from 16pt body font.
In 2019, should I be using a theme with Foundation?
This will be answered in time. What do you think?
There seems to be a lot of overlap with Gutenberg when it comes to the components / blocks – but Gutenberg is for editing posts and pages only right now (and custom post types). So do I need Foundation?
Maybe Bootstrap is better to know now? Adoption seems way more widespread. And there are css frameworks based off of Google’s Material design system, I think. And Tailwind css seems to have a lot of fans. Is it the time to venture into other areas and learn new things after all of these years?
UPDATE 6/13! Just saw Jeremy Englert twitter this:
Guess I need to learn a new framework!?
JointsWP 6.0 is coming! Multiple frameworks!?
Maybe this will solve my conundrum – there is a JointsWP 6.0 in the works (Github Discussions: JointsWP 6: Base Theme Style Discussion, JointsWP 6: Supporting Multiple Frameworks, JointsWP 6: Updates & Call for Contributors). As you can tell by those link titles, multiple frameworks!
But, there are starter themes that are light out of the box and Gutenberg ready. Should I use those instead?
Look at the most popular themes in the WordPress Theme Repository. I see themes near the top that people often use with theme builders and Gutenberg: OceanWP, Astra, Hestia, and Neve.
I have not used these themes to any extent, and several of them hide features behind a premium purchase, but these sites and elementor etc are popular for a reason. Would I be more into just being a site builder for a while instead? Isn’t that what Gutenberg is going to become anyway?
There are also more developer focused Gutenberg ready starter themes out there – but I just don’t have the time to do the research. So I’ll circle back to this in a couple of weeks.
In the end, I still have to figure out my workflow. So I’m sticking with what I know, and hopefully getting my skills up to contribute or help promote JointsWP 6 when that hits.
So How To Get a Theme Ready for Gutenberg?
Ok…this is where the work starts. The other catch to this is, I want to my Gutenberg-itized JointsWP starter theme to also have a matching design system built in Figma, and I’ll be working on that in parallel (I just wrote a blog post called “Why Figma?”).
Morten Rand-Hendriksen has this tutorial on Lynda.com called WordPress Content Blocks: Working with Themes, which shows how he updated his theme from like 2015 to be Gutenberg ready. Definitely worth your time if you have a way to watch it (I have a free membership to Lynda through my library! Awesome, socialism!).
That series is kind of the blueprint I’m following. However, his changes apply to HIS old theme that had to support a lot of legacy code and users.. I’m starting from scratch in 2019! So I’m going to mirror this, but also research how everyone else is doing these same things in their themes, so expect a lot of other references and resources.
Another resource – if you want to get super official – here’s Gutenberg Handbook – Theme Support section itself. It covers a lot of the same ground are they are awesome supplements to each other.
Get your (my) CSS Skills Up
Do you know what calc() means? vw? transform?
I saw all of those repeatedly when I was researching how people were using the .wide and .full classes that Gutenberg allows WordPress themes to take advantage of.
There are a myriad of ways to use css to “bust out of the container”, as they say, and make a full width image span the length of the page while staying in the document flow and technically being in the container.
What? I will make another post about this. But getting my css skills up including being NASTY at css grid and flexbox is a priority right now. The deeper I get into css, the more I love the possibilities for styling blocks.
So I mentioned the Gutenberg handbook above, as well as Morten Rand-Hendriksen Lynda courses, those are GREAT and I will probably be referencing them more in the next few posts.
I also learned a ton from:
ThemeShaper is a blog by Automattic’s “Theme Division”. They’ve dropped a few bangers on here, presented in reverse chronological order.
- The Promise of Gutenberg: Themes as More Design, Less Baggage(11/10/2017)
- Styling Themes for Gutenberg (2/15/2018)
- Designing Themes with Gutenberg Blocks and Sketch (3/7/2018)
- Designing a Gutenberg-Powered Theme: Music (6/4/2018)
- Blocks, templates, and styles: architecture for a Gutenberg world (1/17/2019)
- A schema for Gutenberg blocks (1/29/2019)
- Customizing Gutenberg blocks with block styles (2/15/2019)
I’ve read through these a couple of times. I’m actually going through again as I write this. I think this set of posts is an invaluable look at how the design process can work with blocks for someone trying to figure it all out.
Bill Erickson’s Gutenberg Theme Development Series
I pretty much always have this series open in a browser tab right now.
There are several examples right from Bill’s themes and work sprinkled in, and most of the posts have been updated in February (whereas many of the posts about Gutenberg are about the Beta versions last year).
This is an amazing guide. If you view Bill’s site on a laptop or bigger, it will have this menu on the side that guides you through his posts.
Alessandro Castellani aka “alecadd” – Create Custom Gutenberg Blocks Youtube Playlist
Another playlist I know I’ll be referencing into the next couple of weeks.
Next Step: Figma-tizing
Time to dive into Figma, into my code editor (PHPStorm), and figure out how to build this design system, and hopefully get some sites up. Because honestly, publishing stuff is what I want to be doing with my time. But I know that learning WordPress deeply is my path to making sustainable website businesses.