Category: Design

Grid Block Concept

The WordPress editor is a great writing tool. I’d love to see it become a great layout and design tool, as well. A big part of layout and design is having a grid. The WordPress editor provides a Columns block, but its limited; You can only choose columns and there is no control for spacing. What if there was a Grid block that provided a very easy way to create complex layouts using blocks?

Use your pointer to click and drag to create areas you can add blocks too. You can resize and move these **blocks areas**, even overlapping areas to create visually interesting layouts.

With accessibility always on my mind, I explore how this functionality could be utilized with just a keyboard:

Using just your keyboard you can move around the grid and create block areas.

Design WordPress

In-Between Inserter

It can be hard to know where you’re adding blocks in the WordPress editor. Hopefully we can make it a little easier by adding some guidance to the in-between add button.

Move your pointer above or below any block and wait a second… an add button will appear with a blue line letting you know *where* you’re about to add your block.

Design WordPress Work

Block Editor, Publishing Sheet

Post author By shaunandrews
Post date November 27, 2019
No Comments on Block Editor, Publishing Sheet

A design from August 2018 showing a sheet-like overlay for the publishing confirmation step in Gutenberg, the WordPress block editor.

Design WordPress Work

WordPress.com Signup to Editor Transition

Post author By shaunandrews
Post date November 27, 2019
No Comments on WordPress.com Signup to Editor Transition

A concept video showing a transition from the WordPress.com signup experience to the block editor.

Design WordPress Work

Navigation Block, Simple Color Controls

Post author By shaunandrews
Post date November 26, 2019
No Comments on Navigation Block, Simple Color Controls

A design to allow the Navigation block in the WordPress block editor to offer simple color customizations.

Design WordPress Work

Navigation Block, Iteration Two

Post author By shaunandrews
Post date November 26, 2019
No Comments on Navigation Block, Iteration Two

A design from early November 2019 for the in-progress Navigation block for the WordPress block editor, Gutenberg.

Design WordPress Work

Navigation Block, Child Block Exploration

Post author By shaunandrews
Post date November 25, 2019
No Comments on Navigation Block, Child Block Exploration

A very early concept exploring interactions with nested blocks using the WordPress Block Editor.

Design WordPress Work

Link Inserter, Iteration Four

Post author By shaunandrews
Post date November 25, 2019
No Comments on Link Inserter, Iteration Four

One of the final design iterations for Gutenberg’s link instertion interface. Coming to a WordPress near you.

Design WordPress Work

Block Patterns, Mode Switching, and Block Area Explorations, Iteration One

Post author By shaunandrews
Post date November 22, 2019
No Comments on Block Patterns, Mode Switching, and Block Area Explorations, Iteration One

Lots of random ideas around Block Patterns, view modes, and Block Areas in Gutenberg, the WordPress block editor.

Design WordPress Work

Block Highlighting and Selection Explorations, Iteration One

Post author By shaunandrews
Post date November 22, 2019
No Comments on Block Highlighting and Selection Explorations, Iteration One

Some random explorations around highlighting and selecting elements within Gutenberg, the WordPress block editor.