Hi, I'm Brandon.

What is Gutenberg?

Treating our content as a composition of blocks.

Post Title
Paragraph
Gallery
Quote
Paragraph

Composition: Wireframe

A picture of the post editor containing a paragraph, a gallery, a quote, and another paragraph. — Composition: Editor

A picture of the rendered post containing a paragraph, a gallery, a quote, and another paragraph. — Composition: View

Today, our content is divided into special cases.

Media
Embeds
Shortcodes
Featured images
Excerpts
Widgets

These are all different languages.

What if we use a single language?

A language of blocks.

Why does this matter?

Focus

Simply use blocks.
Fewer context switches.
Custom blocks more robust than shortcodes.
Reducing use of custom HTML.

Blocks help us say what we mean.

Meaning

Blocks explicitly reflect the type of content.
- Better for maintenance.
- Easier to leverage in software.
Free form HTML easily loses meaning.

Blocks are the idea.

Where is Gutenberg today?

The Editor

Document structure

Heading
Subhead

Text

Paragraph
List
Quote
Pull quote
Verse

Graphics

Image
Cover image
Gallery

Media

Audio
Video
Embeds
- Twitter
- Youtube
- TED
- Many others

A block for embedding YouTube videos — YouTube Embed block

Format and layout

Preformatted
Code
Text columns
Tables

Supporting

Custom HTML
Classic
Separator
Read more

A block for custom HTML — Custom HTML block

These are some of our building blocks.

Writing

Insert, edit, move, and remove blocks.
Post content is saved as valid HTML.

Adopting

Pre-existing posts are converted.

Feature highlights

A picture of the autocomplete feature — Autocomplete

Reusable block saving — Reusable Blocks: Saving

Reusable block selection — Reusable Blocks: Selecting

Reusable block inserted — Reusable Blocks: Inserted

A picture of the navigable document outline — A Navigable Document Outline

Where is the community taking it?

First step

Minimum viable product (MVP)
Merge proposal
WordPress 5.0

Follow with

Full site customization
Exploring foundations
- Page layout
- Post type layout

A picture of a layout selection prototype — Prototype: Layout Selection

A picture of a layout placeholders — Prototype: Placeholders

A picture of a filling out a layout — Prototype: Filling In Details

Outcomes and opportunity.

Shortcodes

We can use blocks instead.
Shortcode block available.

Themes

Existing themes continue to work.
Themes can leverage Gutenberg features.

Post formats

Expressive blocks reduce our need.
Continue to exist for backwards compatibility.

Meta boxes

Supporting self-contained meta boxes.
Handling incompatibilities
- Mark meta boxes as incompatible.
- Auto reverts to classic editor.

Widgets

Eventually replaced by blocks.

Menus

Will eventually become blocks.

Opportunities

Custom blocks.
Themes that leverage Gutenberg features.
Improving experiences for agencies and customers.
Find new ways to leverage the meaning of blocks.
Education.

How can I help?

Contributing

Testing
Design
Development
Internationalization
Support

Resources

Thank you!

happycode.net/talks/2018-wcphx