Gutenberg: quirks to be aware of, code snippets, & a free download for testing on your site

I’m really excited for Gutenberg. Seriously, really excited.

The Gutenberg editor promises to compete with services that have previously been so much easier to use. It empowers new users to start their own blog by presenting a more intuitive workflow. It gives a visual interface to existing, underutilized functionality. Change comes with struggle, but once we make it through, we’ll be better off for it. 🙂

Gutenberg sucks!

That’s not to say Gutenberg isn’t a pain in our a**. After all, Once Coupled develops themes – we already have dozens of clients asking us what to do about Gutenberg and will end up with dozens more asking us to check that their custom themes are compatible.

I can’t even imagine the work it has created for plugin authors! They’re faced with rewriting their previously-complete plugins in order to make them Gutenberg compatible.

Gutenberg is awesome!

I still think Gutenberg is cool, though! Think about it – Gutenberg has had a lot of thought put into it. Curious? Check out their GitHub repo. Here’s just one thread where a long discussion has occurred on how different quote styles should be presented. All that discussion about a single, hyper-specific decision.

Sure, there are 1,000 open issues right now… but there are 3,800 closed issues. That’s 3,800 discussions on every little aspect of how to make Gutenberg as thoughtful, compatible, and powerful as possible. That’s cool! #nerdout

Gutenberg is happening

Here’s the other thing: Gutenberg is happening! So anything other than excitement at this point is just setting yourself up for disappointment. Gutenberg is a fact, and we can either choose to fear it or to embrace it.

At Once Coupled, we have Monday morning meetings where we go around and share something positive that’s happened. One day, mine will be that Gutenberg is out and we didn’t crash and burn. 🙂

Gutenberg is testable

Perhaps the greatest benefit of all this Gutenberg talk is that it’s given us plenty of time to prepare. In fact, we’ve been given this awesome opportunity to test out Gutenberg before it’s officially released – which means we can prepare our sites by:

1. Testing Gutenberg
2. Making changes to our themes & workflow now
3. Ensuring our site has regular backups, should they be needed

With that in mind, let’s talk about #1 and #2.

Quirks to be aware of

Don’t use Gutenberg for published posts

Right now, we’re in a “Try Gutenberg” phase – not a “Use Gutenberg” phase. If you need to deactivate Gutenberg, you’ll notice that some blocks don’t work, including your recipe cards.

If that happens to use, switch to the “text” editor and look for the following snippets to replace:

Tasty Recipes

This:
<!-- wp:wp-tasty/tasty-recipe {"id":7935,"lastUpdated":1535971493454} /-->
with:
[ tasty-recipe id="7935" ] (without spaces)

WP Recipe Maker

This:
<!-- wp:wp-recipe-maker/recipe {"id":7936,"updated":1535972440895} /-->
with:
[ wprm-recipe id="7936" ] (without spaces)

Updating posts when using Sucuri

When using Sucuri, post updates may be automatically blocked and therefore fail. To resolve, you’ll need to whitelist your IP address. Since IP addresses can change periodically or based on your location/connection, you may need to do this from time to time.

You can whitelist your current IP by logging into Sucuri or using the following URL formula:

https://waf.sucuri.net/api?&k=[API_KEY]&s=[API_SECRET]&a=whitelist

Your API key and secret can be found in your Sucuri account and, sometimes, in your WordPress plugin (if you’re using it).

Code snippets

CSS by block

File

If the file download button doesn’t have white text or displays an underline:

Image

If images don’t display at full-width:

List

If lists show white space when nesting:

Embeds

If you want to center embeds:

Or if you want full-width embeds:

Code

If your code doesn’t look like code:

Preformatted Text

If preformatted text isn’t typewriter-style:

If preformatted text, code blocks, and/or verses don’t wrap (meaning the text extends past the content area/causes horizontal scroll on mobile):

Table

For tables that need a little white space:

Verse

For verses (that weird, new block that doesn’t make any sense to me):

Button

Generic button hover styles that should work with any button colors/theme:

Columns

To add horizontal space between columns:

Separator

To make the short line break… short:

Categories

If nested categories need white space removed and the above list styles aren’t enough:

All blocks

All the above CSS in one handy place:

Quick-start: Import a draft

Want to give Gutenberg a try? Great: after activating, all of your old posts will continue work as normal, since they’re not using blocks yet. That is, simply activating Gutenberg doesn’t do anything to your existing posts – it only gives you a tool for writing new posts.

Once you’re done trying it out, you can deactivate the Gutenberg plugin again with no consequences (just don’t publish your Gutenberg post – see above). Trying Gutenberg doesn’t mean that you have to make any immediate changes, it just shows you the experience.

The only downside, actually, is the time you spend adding every block, playing with the settings, and trying to figure out how the block is supposed to look/work.

Additional Resources

• How to Prepare Your Blog for Gutenberg
• WordPress Gutenberg: A Step-by-Step Tutorial (for Bloggers)

Questions? Problems?

Having any issues with styling or found other quirks of note? Leave us a note and we’ll update this post where helpful for all readers. 🙂