Categories
Design WordPress Work wp-admin

A Welcomed Detour

Took a little detour today and tried to help with some improvements to the media uploader in WordPress, specifically a new button that will let you quickly copy the URL for a file that you just uploaded.

This is related to the following WordPress Core issue: Add a copy-link button at the media upload page

Categories
Design Gutenberg WordPress Work

A quick guide for building a WordPress block pattern

As we progress on building a directory for WordPress block patterns, I thought it would be helpful to put together a guide for building patterns. Here’s a first sketch at this guide, which I think can probably live at wordpress.org/patterns/guide:

What do you think — does this help, and does it cover the basics? What else should this document contain?

Categories
Design Gutenberg Work

Sidebars, Popovers, and Modals

Recently, I’ve noticed the need to move from sidebars, to popovers, to modals. For example, in the WordPress block editor you can add blocks from a small and quick popover called the Quick Library, or from the larger Sidebar Libary. And, there’s been a few designs floating around that use a modal to browse patterns.

I wondered if there was a way to ease the transition between these different UI’s and came up with this animation.

Categories
Design WordPress Work

Canvas Width

I’m working on designs for the brand new Patterns section for WordPress.org. This new section of the site will allow anyone to create and submit patterns — a collection of WordPress blocks — that can be shared and used by any WordPress site.

One aspect of build a great pattern is understanding how your design adapts to various widths. And I don’t just mean device widths, like a tablet or phone — but also container widths. In the world of the block editor, you can place patterns within wide pages or narrow columns, and your pattern must adapt accordingly.

Here’s how a Width tool could work when designing and building a pattern…

Categories
Design WordPress Work

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?

dUse 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.
Categories
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.
Categories
Design WordPress Work

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.

Categories
Design WordPress Work

WordPress.com Signup to Editor Transition

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

Categories
Design WordPress Work

Navigation Block, Simple Color Controls

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

Categories
Design WordPress Work

Navigation Block, Iteration Two

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