The Limitations of Gutenberg

So, I’m actually really enjoying the editing experience in Gutenberg. It’s really, really well done, especially considering what a mess the process looked from the outside.

Many of the elements are really well-implemented, and while I’m writing, the interface really truly gets out of the way. I like it for generic content (you know, text and images).

So here’s my issue.

What happens when I want to do anything remotely complicated? If I’d like to, say, put a background behind some text, I can do that (not an image, but fine):

Here’s a background behind text

If I’d like to put a background behind a heading, that’s fine, too, and with many more options, using the pretty-cool cover block:

… but then it breaks down. When I’m building a site for somebody, I’m going to have lots of layout challenges that can’t be resolved with the sorts of preset tools Gutenberg offers. I can’t reasonably build new, real, Gutenberg blocks for each one, because building new Gutenberg blocks in React is incredibly time-intensive, and there’s not enough ROI for a client to pay for that sort of development time.

And I don’t really want a full page-builder either. If I install a full page builder, then every time a user does anything, they’ll inevitably break the site on mobile.

So I’m building something in-between, an addon for ACF (implemented like this) that will automatically register Gutenberg blocks to do all of the things I like to do and allow for me to add standardized options for many of the blocks. A shout-out here as well to Bill Erickson, whose adoption of ACF as a semi-page-builder helped get me started down this path about two years ago.

… so far, I’ve only built the most commonly-used of these blocks (all of them have background image and background video capabilities, along with smart defaults to, for example, turn text white if there’s a background image).

• Fullwidth (a generic wrapper block with options and a TinyMCE editor). Page-height support. See above
• Two column (because for how good Gutenberg is, the columns functionality truly sucks). You can add optional content both above and below this one. See below
• Checkerboard (an image extending to the edge of the screen next to text) See below
• Featured items (set the number of columns, add optional text above above and below, and feature as many items as you’d like, complete with images). See below
• Video background: just like the fullwidth section but with background video capabilities (all sections now have these capabilities)

And there are some planned sections:

• Checkerboard (half/half images and text. I call this a checkerboard, but I have no idea what the design pattern is really called. But I use it all the time). Done
• Featured items (text above, then support for linked images, headings, brief descriptions, and buttons). Number of columns will be adjustable. Done
• Slick slider (will allow for full-height support).
• Background slider (only the background moves). Considering giving all sections these capabilities

So, if you’ve made it this far and are interested in trying this out for yourself, give me a shout in the comments or use my contact form.

I’d love to hear what you think and get your ideas.