Gutenberg Editor Mockups

These mockups are all subject to change and feedback.

If you would like to contribute, please read this section, and grab the Sketch file so you don't have to start from scratch:

Download, Updated Mar. 15th.

Basic Blocks

Text

Neutral state. Hover and click to see alternate states.

Text, Neutral Text, Hover Text, Selected

Image

Empty state. Hover to see alternate state.

Empty Image Empty Image, Hover

Neutral state. Hover and click to see alternate states.

Image, Neutral Image, Hover Image, Selected

Captioning state.

Image, Caption

Quote

Empty state. Hover to see alternate state.

Empty Quote Empty Quote, Hover

Neutral state. Hover and click to see alternate states.

Quote, Neutral Quote, Hover Quote, Selected

Captioning state.

Quote, Citation

Neutral state. Hover and click to see alternate states.

Quote 2, Neutral Quote 2, Hover Quote 2, Selected

Heading

Neutral state. Hover and click to see alternate states.

Heading, Neutral Heading, Hover Heading, Selected

Embed

Empty state. Hover to see alternate state.

Empty Embed, Neutral Empty Embed, Hover

Neutral state. Hover and click to see alternate states.

Embed, Neutral Embed, Hover Embed, Selected

Captioning state.

Embed, Caption

Neutral state. Hover and click to see alternate states.

Gallery, Neutral Gallery, Hover Gallery, Selected

Image in gallery selected.

Gallery, Selected Image

Captioning image in gallery.

Gallery, Caption

Hero Image

Empty state. Hover to see alternate states.

Hero, Empty Neutral Hero, Empty Hover

Neutral state. Hover and click to see alternate states.

Hero, Neutral Hero, Hover Hero, Selected

Captioning state

Hero, Captioning

Full width state

Hero, Full width

Basic UI controls

Hovering the border of a block shows the move hand. Drag and drop to rearrange. The up/down arrows also work.

Drag and drop

As soon as you put the cursor inside a top level block, an inserter shows up at the end of your document. Click it to insert content, or invoke it by typing / when the caret is on a new line.

Insert content at the end

Or, make a linebreak between two paragraphs to surface the inserter on the side where the up/down block mover arrows sit. This lets you insert content between elements.

Insert content between

Inserter

Inserter

Block Switcher

Type Switcher

UI Blueprints & Labels

UI Blueprint
Block Blueprint

Admin UI Concept

Admin UI
Admin UI, Inserter
Admin UI, Inspector
Admin UI, Text Editor
Admin UI, Split-screen Preview

Admin UI concept with every metabox enabled. Click the configure button at the top of the sidebar to pick which metaboxes to show. API built metaboxes show up in the sidebar, PHP built ones show up below the editor in "Extended Settings".

Admin UI, with every metabox, collapsed
Admin UI, with every metabox, expanded

Mobile UI Concept

Mobile

↑ Back to top