Help! I’m Behind on Gutenberg!

WordPress DC, May 2019

Beth Soderberg | @bethsoderberg | bethsoderberg.com

bit.ly/wpdcmay2019

Are you?

Gutenberg will be 5 months old on May 6th.

Expected behavior of a 5 month old:

  • does not understand object permanence
  • grasping objects with both hands
  • babbling noises
  • rolls over - maybe
  • sits unsupported - maybe
  • might sleep through the night

Be nice to yourself.

You still have the opportunity to grow with Gutenberg.

Photo by BunnyJ at Morguefile.com

That said...

Photo by Koan at Morguefile.com

Photo by thesuccess at Morguefile.com

Photo by Luis Miguel Bugallo Sánchez (Lmbuga) at Wikimedia Commons

What is Gutenberg?

The Gutenberg project's original goal:

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

It is a new editor experience.

New Concept: Blocks

With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.

New Concept: Block Categories

New Concept: Reusable Block

New Concept: Block Templates

Empowerment of Users

Without being an expert developer, you can build your own custom posts and pages.

Modern Experience for Developers

Built with modern technology.
Designed for compatibility.

If you need a reminder of why we're doing this...

Watch the user testing section of Matt Mullenweg's State of the Word 2018.

Start watching at time stamp 3:40.

How can such a vision happen without dismantling, rebuilding, fragmenting, or breaking the WordPress ship that for over a decade has been carrying the thoughts, joys, and livelihoods of millions of people and more than a quarter of the web?

Matias Ventura, Gutenberg, or the Ship of Theseus, October 9, 2017

...Many of us will have to learn something new, but we’ll be embracing the next generation of the web [...] we’ll be drastically elevating what’s possible in WordPress. If we believe in this future, our job then becomes to start this process as soon as we can, write documentation and tutorials, and provide good migration paths.

Joen Asmussen, Learn Something Difficult, July 25, 2019

How can we learn difficult things?

Feynman Technique

  1. Identify a concept
  2. Explain the concept
  3. Study the gaps
  4. Simplify explanation of the concept

Note: repeat steps 2 and 3 until understanding has sunk in.

More on this from Mat Ford.

What do you need to know?

Content Managers

Figure out what the new parts of the interface are.

Learn how to move blocks around and access their settings.

Familiarize with the standard blocks and their capabilities.

Start looking at plugins that might fill in gaps in the blocks you need.

Figure out what the impact is on plugins you already use.

Don't experiment live.

Read the support documentation on the editor.

Resource for training on the editor:
Go Gutenberg.

Project managers

Learn how to use the new editor.

Learn how to explain what Gutenberg is and is not.

Learn about how an existing site can be made "Gutenberg-Compatible".

Experiment with estimates and new ways of defining scope.

Read about Gutenberg regularly, e.g. on WPTavern

Designers

Figure out how component-based design fits in with Gutenberg.

Learn how Gutenberg templates correspond to design patterns.

Learn about Gutenberg custom color palettes.

Review the Designer Documentation section of the Gutenberg Handbook.

Developers

Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.

Learn how to build and style a custom block.

Learn how to migrate existing features to blocks and/or backward compatibility.

Learn how to make block templates.

Learn how to modernize themes to make them Gutenberg-friendly.

Figure out what to do with shortcodes, meta-boxes, and Custom Post Types.

Learn how Gutenberg stores data.

Learn about internationalization practices for Gutenberg.

Read up on Gutenberg and accessibility.

Learn as much JavaScript as you need to.

A Case Study: Me

Blossom n Bloom Photography

Photo by diannehope at Morguefile.com

Public domain image from Alexandria (Va.). Office Of City Engineer, Wikimedia Commons

Photo by @getshifter on Twitter

Photo by Erean at Morguefile.com

Photo by thelesleyshow at Morguefile.com

Public domain image from Anatomy of the Human Body by Henry Gray, Wikimedia Commons

My Plan

Resume attending WordCamps.

Watch Gutenberg Talks on WordPress.tv

Give this talk.

Attend the Gutenberg sessions today:

Prepare existing sites for WordPress 5.0 with the Classic Editor Plugin

Develop process for testing Gutenberg on existing sites.

Build my first Gutenberg-capable site with a safe client.

Modernize my base theme using the Gutenberg Starter Theme

Make time to study deeply.

Ignore learning more about CSS Grid and Flexbox for a bit.

Read the Gutenberg handbook!

Read the core P2 stuff about the editor backwards.

Go back and read what people wrote.

Go through the Gutenberg Courses from Zac Gordon and Joe Casabona.

Explore Core.

Lurk in Slack.

Specifically the #core-editor channel: WordPress core editor development and design. Weekly meetings held Wednesdays at 13:00 UTC.

Also the #core channel: WordPress core development. New Contributor meetings on the 2nd and 4th Wednesdays at 19:00 UTC.

Sign up here!

Please tell me your ideas!

I challenge you to make your own plan.

Identify your gaps and ways to bridge them.

Create a "syllabus" of what you will learn.

Schedule time for learning into your calendar.

Be kind.

You are always more important than WordPress.

Thank you!

Beth Soderberg | @bethsoderberg | bethsoderberg.com

bit.ly/wpdcmay2019