I work everyday with users on WordPress.com. Implementing Gutenberg into such a large project is vastly different than implementing it alongside an individual website.
When working on personal projects, any issue can become a major issue pretty easily. I can see why some of the community isn’t too thrilled with the changeover.
I know that a lot of the angst over Gutenberg involved implementing the new editor into older themes and existing content. What would break? Will plugins or custom post types be supported?
I admit, I rolled my eyes at first. The new editor does have a lot going for it, such as a standardization of rich content, but could it really be that difficult to shim an older theme into the new editor?
The Project
Back in 2017, just before I began working for Automattic, I worked for my parent’s catering company. I wore many hats, from bartender to marketer, and even sought to redesign our WordPress website.
The project seemed simple enough:
- Pick a quality theme geared for restaurants and food service
- Pull over our content and format it for the new layout
- Redirect domain and old permalinks to the new site
And it was! It took me a good amount of time over the course of a month or two to put together the material and make it into something great.
I chose to go with the theme Osteria by Pixelgrade, as I knew they built pretty great themes for WordPress.com.
Osteria uses a couple of custom plugins built by Pixelgrade for their themes. These plugins consisted of:
- Customify – A Theme Customizer Booster
- PixCodes – WordPress shortcodes plugin everywhere. Loaded with shortcodes, awesomeness and more.
- Pixelgrade Care – We care about giving you the best experience with your Pixelgrade theme.
- PixTypes – Custom post types and meta-boxes needed by your themes.
And of course, one plugin I learned to loathe:
- Gridable – A simple and intuitive tool for organizing your content into columns and rows.
To be perfectly honest, a lot of these plugins provided great value.
Customify made the customizer experience wonderful and feature rich.
Pixelgrade Care is a great solution to manage your theme subscription and also provides a list of changes you can make on the theme.
PixTypes provided some interesting meta box options that let you customize the themes parallax headers to your liking.
But two plugins stood out as not particularly…good.
PixCodes is indeed feature rich, providing lots of great icons and the like, but in my mind the byline ‘Loaded with shortcodes, awesomeness and more’ puts a major exclamation point on the reason why Gutenberg was devised in the first place.
Gridable, well, is simply not good at all. I found it constantly buggy and very unintuitive.
But all of that being said, I do really like Osteria a lot! I think the style and emotion of the theme is spot on, and it wasn’t bulky or cumbersome to use.
Enter Gutenberg
As 2018 flew by, the site was delayed and yet to launch. I was eager to see what Pixelgrade would do with the new block editor, and thought “wow, all of these cool layouts in Osteria would work great as gutenblocks.”
But then as the launch of WordPress 5.0 approached, I came across this:
In terms of theme compatibility, our portfolio is split in two:
themes that used the regular editing experience without any custom fields; these themes have already been updated to be compatible with the Gutenberg editor and the transition should be painless.The themes in this category are Patch, Hive, Gema, Noto, Vasco, Julia, Felt, Jason, and Silk.
Hmm. Not a great start.
Themes that use custom editing experiences with multiple custom fields and meta boxes; these themes will be much harder to be made compatible and we will tackle them to the best of our abilities; some of them have such a custom workflow that the best option for them is to stick with the classic editor as too many things might break when switching.The themes in this category are Rosa, Osteria, Listable, Fargo, Noah, Timber, Mies, Pile, Heap, Border, Lens, and Bucket.
Crap. One downside to the fast rollout of the new editor is that a lot of studios simply did not have the resources nor time to make all of their themes compatible.
So I was faced with a decision, scrap Osteria or Gutenify it. I chose the latter.
Into the code…
The first thing I needed to take a look at was how would I remove Gridable. By disabling Gridable, I essentially would lose all of the layout on my Homepage, Events, Venues, and Proposals pages, basically four out of five main pages on the site.
But the good news was that this plugin was not required to layout the theme. I broke the new project into three steps:
- Find a block plugin to extend the default ‘columns block’.
- Replicate the column and row layout laid out by Gridable.
- Create new CSS classes and pull in theme styling to recreate the look of the old layout
I will admit, there was a fair amount of work to make this conversion, but as I got further into the project things began to feel good.
Ideally, using the core editor to generate content should help with the performance of the site. Less plugins, less resource demand. Also, Gutenberg does create pretty decent frontend code.
Taking this approach futureproofed my site.
Step One – A new plugin
Gridable was decidely not very useful. After working with Kadence Blocks on my new blog rebrand, I decided to try out CoBlocks to see how they compared.
CoBlocks is developed by Rich Tabor, and is a very intuitive block library. Many developers are creating ‘block suites’ that offer a lot of block functionality right out of the box.
For now, I’ve mostly stuck to the row block, as it provides a much more interactive column layout than the default column block.
Using CoBlocks I was able to replicate, and in most instances surpass, the functionality of Gridable without much trouble. I especially like that I can add CSS classes to every block right from the block sidebar.
Lastly, I found reusable blocks incredibly useful, as you’ll see below.
Venue Layout
One of the nicest layouts is in Osteria is the Functions section, which I used to show off the list of venues we frequent. This required creating two different reusable blocks: Venue Panel Left and Venue Panel Right
As you can see, the blue lines denote the CoBlocks rows and columns. I assigned the row a class, such as ‘venue-panel-right’ under Advanced, then assigned the image its own class for further CSS styling.
Once I had the two panel alignments fleshed out in blocks, I simply clicked on the row block and saved it as a reusable block.
Now I can reuse this layout for a limitless number of changing venue halls – great!
More to come….
