Thoughts about Gutenberg from a WordPress Product Developer’s Perspective

Thoughts about Gutenberg from a WordPress Product Developer’s Perspective

Listen to this article:

Voiced by Amazon Polly

Ever since WordCamp US, I’ve started writing and publishing Gutenberg blocks on WordPress.org as part of my GutenKit CoBlocks project. I wanted to share, and reflect upon, a few quick-fire thoughts I had after some solid conversations about Gutenberg with other WordPress folks.

Edit: GutenKit has since been renamed to CoBlocks: serving Gutenberg page building content blocks for content marketers & publishers. ?

So here they are:

  • It will be interesting to see exactly how Gutenberg and WordPress themes will interface. I personally lean towards as much objective styling as possible, without forcing structural limitations, or interfering with subjective styles.
  • Will we see more WordPress plugins that add blocks for any WordPress theme to style, or more WordPress themes that add specific blocks to itself?
  • Gutenberg block philosophy requires a fundamental change in how we as developers view the ominous options verses decisions mindset. It’s not about our decisions anymore. It’s about our users’ choices.
  • I wrote this post within the current “Classic” editor. After experimenting with Gutenberg for the last couple of months, it feels like I’m composing this article with both hands tied behind my back. Now I appreciate Gutenberg on a whole different level. ?
  • The purpose of Gutenberg is to empower people to create content – not force styling and layouts on users. All subjective design choices should ultimately be left to the user.
  • It’s time to start thinking of Gutenberg outside the context of standard blog posts. Gutenberg is so much bigger than that.
  • It’s important that we’re consider the average WordPress user when we’re developing blocks. Not the average professional developer.
  • It would be so much easier for WordPress themes to style Gutenberg blocks accurately if the borders that display around focused blocks were removed (thus removing the padding that the UI requires when borders are added).Otherwise, theme developers will have to hack away at each block’s margin and padding to try and get things to display one-to-one. Or developers just won’t even try (which is honestly much more likely).
  • Will the “Gutenberg” name stick around when it lands? Probably not.
  • Agencies and freelancers are legitimately concerned about how Gutenberg will affect their past client’s websites. We need to make more of an effort to educate and inform those folk of the available options.
  • Don’t deploy scare tactics your clients with an “upcoming massive change that will most definitly break your site in half“. Gutenberg is a positive change. Change is hard – nobody is denying that – but your attitude affects how hard that change will be.
  • If Gutenberg wins, we all win. It’s about making WordPress more relevant – for everyone.
  1. I’m using Elementor page builder for my theme which is based on WYSIWYG philosophy. Now, how Gutenberg compete with this? because although we can create “layout” with Gutenberg it lacks WYSIWYG “styling”.

    1. Gutenberg will indeed lack WYSIWYG, unless theme developers work in that custom styling (which I wrote about here). It’s not easy, but it’s do-able. Also, layouts will become a possibility once nested blocks are introduced.

      Elementor, and other similar page builders, are more robust than what the new editor aims to become (at least for now), though I suspect the lines will become blurred within a couple years or so.

  2. Took a look at your Gutenberg blocks on WordPress.org “Click to Tweet Block, Spacer Block, Pricing Table Block, Portfolio Block, ..”

    Thansk for your work but please follow rule #4 “Code must be (mostly) human readable” of WordPress.org / Detailed Plugin Guidelines and add non-minified versions of .js to these plugins as “WordPress code is intended for anyone to be able to learn from, edit, and adapt”.

    1. Hi there!

      I’m building the blocks using the exact methodology that the Gutenberg plugin has employed. And I do have each block up on a public GitHub repository for folks interested in the development side of things.

      The non-minified build scripts are hardly human readable, as they’re built from each block’s ES6 files, then minified. You really can’t learn much from those specifically, though the full package on GitHub is where you can. I’ve included details for getting started as well. ?

      1. Thanks for your explaination, still wondering how other blocks plugins like “Blocks for Gutenberg. Advanced Gutenberg, Maps Block for Gutenberg powered by Google Maps, ..” are able to provide non-minified readable versions of .js code.

        1. The Advanced Gutenberg plugin doesn’t actually consist of any blocks – it changes how the blocks are displayed.

          The Blocks for Gutenberg plugin is hardly a block. It’s obviously an incomplete block meant to hold the ‘blocks-for-guteneberg’ slug on the directory.

          The Google Maps for Gutenberg plugin does include the block’s javascript, written in classic JavaScript, not modern.

          Like I said, I do have the plugins’ source code up on GitHub, with instructions on how to get each block’s development environment up and running. ?

  3. Hi Rich

    Any idea how to compile your src/ folder with babel ( phpstorm )

    compiling from the terminal can be a hassle

Leave a Reply

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

Up Next:

Add Space Between Gutenberg Blocks with the GutenKit Spacer Block

Add Space Between Gutenberg Blocks with the GutenKit Spacer Block