Primer on Gutenberg

Back Story on Gutenberg

More Information

The definitive information is over here on the main WordPress project page. But I thought it useful to go backwards a little bit.

Note that this is only a compilation of posts I’ve been collecting for the Automattic-world — so it’s a mere teeny tiny slice of Gutenberg activity out there. I’ve been at Automattic now for two years, and it’s been fun to watch this open source project grow. Many, many, many non-Automattic folks have been a part of the Gutenberg journey, and I’m grateful to have gotten to be super close to what I could see bubbling up from both Automattic and non-Automattic contributors along the way. As we say at Automattic, “Open source is the most important idea of our generation”** — and from where I stand, it’s certainly the truth!

2017

In August of 2017, the rationale post on Matt Mullenweg’s blog is quite definitive.

Prior to that we heard from Matías Ventura in May 2017 about how the new blocks architecture was going to work:

with the invitation made to visit the Github repository and to join the Slack channel.

And shortly thereafter in June 2017, there was a post by designer Joen Asmussen that started to describe the “Blueprint of a Block.”

with another post in July 2017 by Mel Choyce that further clarified blocks in a few sketches together with XWP’s Joshua Wold.

Later in the year in October 2017 there was post by Matías Ventura entitled, “Gutenberg, or the ship of Theseus.” Matías introduces a few key concepts:

• Optimizing for the user. Backwards compatibility is introduced as a key design constraint of Gutenberg.
• Introducing guides and placeholders. This is by far my most favorite feature of Gutenberg — it increases affordances.
• Enhancing the idea of templates. The vision here is about an entire page of blocks that are easily pre-set.
• Design that allows freedom. The key customers have been the developer community who’ve required flexibility above all.
• Discovery of blocks. Given that there’s so much optionality in WordPress, a means to search it better is built-in.
• Multiple layers to start. It’s possible to use the original editor (“classic”) without adopting the new Gutenberg system.
• Granularity that is flexible. There’s an underlying architecture that enables more tailored access to subcomponents.
• Code and experience combined. Much of the Gutenberg block system brings unheard of capabilities for developers.
• Going beyond the post. Gutenberg has been created to extend the lifetime of WordPress another 15 years, if not longer.

And at the annual major WordPress event in the US, Matt Mullenweg walked us all through the state of Gutenberg:

2018

In April 2018, Miguel Fonseca offers his thinking on “The Language of Gutenberg” and presents the evolved four principles:

• Backwards compatibility. There needs to be a path backwards.
• Portability. Nothing will vanish out of your control.
• No commitment. Everything is reversible.
• Incremental development. It will take time to evolve Gutenberg.

May 2018 marks when frontend guru and CodePen Co-founder Chris Coyier kicked-off 7-part series on CSS Tricks with the “Learning Gutenberg” series led by noted speaker/developers Lara Schenck and Andy Bell.

1. Series Introduction on CSS Tricks
2. What is Gutenberg, Anyway? on CSS Tricks
3. A Primer with create-guten-block on CSS Tricks
4. Modern JavaScript Syntax on CSS Tricks
5. React 101 on CSS Tricks
6. Setting up a Custom webpack on CSS Tricks
7. A Custom “Card” Block on CSS Tricks

In July of 2018, Tammie Lister presents at WordCamp Europe on “Gutenberg Design Patterns”:

And in August 2018, Gary Pendergast speaks to more of the WHY of Gutenberg in “The Long View” to get us all ready for the impending official release. He lays out the key ingredients for why Gutenberg is “the base for the next 15 years of WordPress” and his passion says it all:

“I’ve been been working on WordPress for years, and I plan on doing it for many years to come. I want to help everyone make it through this transition smoothly, so we can keep building our free and open internet, together.”

Lastly and to be clear, this is only a compilation of posts I know through the Automattic-world — so it’s a mere slice of Gutenberg activity. But I thought it useful for myself to pull these posts all together. And it has certainly been so! —JM