It took me a while to start experimenting with the new (future) WordPress editor currently named Gutenberg and available as a plugin. I had heard a lot about it, both good and bad. I wanted to form my own opinion on it, but I didn’t want to dive in too early and be disappointed with something that wasn’t ready for prime time.
A great chat with Brian Gardner got me thinking that I should start paying attention to it sooner rather than later. So, here I am to document some first impressions and thoughts on it as a whole.
I started out editing a page with some existing content. How the heck do I add a block? Took me a little bit to find the “Add block” icon in the upper left corner. The UI in general takes a bit to get used to. I’m still trying to figure it out, but I think once you start using it it starts making more sense.
I tried just adding an image block and I was puzzled as to why it landed at the bottom of my content. I found the arrows on the left of the block to move it up and then more confusion as why it was now at the top of my content when what I really wanted was to have it between a couple paragraphs. I then realized I had to convert the existing content into blocks so that I could insert things wherever I wanted. Ok, that makes sense. I think.
It’s also very easy to accidentally add blocks that you have to immediately remove. That happened way more than I’d like to admit.
Lastly, markup is a mess after deactivating the plugin leaving tons of <!– wp:paragraph –> <!– wp:heading –> <!– wp:separator –> tags everywhere, but in reality, when the new WordPress editor is merged with core in v5.0, there will not be a plugin to deactivate. Hopefully there will be at least some way to opt-out of using it in favor of the classic editor, but I’m not sure yet how that will be handled.
One basic thing I wanted to start with was adding support for wide images into a theme I’m working on. I found Bill Erickson’s post: Getting your theme ready for Gutenberg which has been tremendously helpful.
I realized quickly that wide images and sidebars do not play well together. You can make them work by fine-tuning your styles for various layouts, but it’s also another reason to ditch the sidebar and keep things super simple if you can.
There is certainly going to be work involved to get styles for wide and full images to work correctly in your theme. I’ve seen a lot of different tutorials offer varying approaches, so I still need to do some experimenting to determine the best way to go about it.
Next, and with impeccable timing, Brian Gardner published a post: Add Theme Color Palette to the WordPress Editor (since removed) which helped me add support for specific theme colors to be added to the editor as well as any custom link or accent colors set in the Customizer.
Styling of other elements
I also played around with adding styles for things like the separator block (horizontal rule, basically), blockquote, pullquote, citation, block button, etc. That’s about as far as I got, but I’ll be spending some more time experimenting and learning about the styles that might need to be added to the stylesheet. You could of course leave things default and let Gutenberg dictate the styling, but why would you?
What’s in a name?
It’s been talked about a lot and I agree that referring to the new WordPress editor as “Gutenberg” once it’s been merged in with core doesn’t make any sense. It won’t mean anything to most users. Plus, they just don’t care. Look, it’s going to just be the updated WordPress editor, end of story. I don’t think we necessarily need to differentiate too much between the “new” editor and the “legacy” or “classic” editor. Maybe for a bit after it’s release, but at some point it will just be “the editor”. Let’s not overthink it too much, but let’s of course consider that calling it Gutenberg beyond WordPress 5.0 is probably not the best way to go.
Recap of resources I mentioned, plus some additional tutorials to help you with learning more about Gutenberg and how to integrate it into your theme…