• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

We’re currently booked and will entertain new work from non-clients in mid-July 2022.

Questions? Call 254.340.0086 or send an email to [email protected].

Elodin Design

WordPress Design & Development

  • About
    • About Jon
    • Why ‘Elodin Design’
  • Websites
  • Services
  • Process
  • Blog
  • Repos
  • Contact

The Limitations of Gutenberg

January 11, 2019 by Jon Schroeder Leave a Comment

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.

What it looks like to be writing this post

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:

This is my title

… 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.

Enter my new semi-page builder

If I’d like text with a background behind it, even grouped together, my new plugin (I’m calling it Gutenberg Sections for now) can do that, with all of the sort-of standard options that you’d expect from that.

… 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)

Two-column sections

For example, there’s no reasonable way at present to take text like this, drop it next to an image or a video, then vertically center the whole thing.

Checkerboards

Because sometimes it’s nice to pull images all the way to the edge of the screen while keeping content centered in both directions.

Featured Items

A layout allowing for us to feature some bullet points in a more attractive way.

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Thing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

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.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About the blog

I’ve always been exceptionally bad at actually sitting down and writing blog entries, so do me a favor – please feel free to comment or drop me a line if you have something you’d like me to write about (or just to say hello).

Browse by category

  • Advanced Custom Fields
  • Gutenberg
  • Perspective
  • Tutorials & how-to guides
  • Updates

Centered and full-justified text on the internet

How to add contextual styling in the Gutenberg editor

User interface is really important

How to connect Gravity Forms with Salesforce web-to-lead using Gravity Forms’ Webhooks addon

Reviewing SpinupWP and why I closed my account

Ready to get started?

There’s no pressure. If you’re interested in building a site, please feel free to reach out – and I’ll talk through your project with you and give you some pointers even if we don’t end up working together.

Reach out

Elodin Design, Inc. (formerly Red Blue Concepts)
Website design & development · Custom WordPress theme and plugin development
3305 Fox Hollow Circle, Waco, TX 76708 · (254) 340-0086
Copyright © 2022 · All rights reserved.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT