Feature Fest is your 6-day crash course to train your team (or future team) and finally glow up 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:
- Testing Gutenberg
- Making changes to our themes & workflow now
- 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
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. 🙂
pssst.. Check out our sister brands!
Leave a Reply