Design Share #57 (May 20-May 31)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #56 (May 6-May 17)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #55 (Apr 22-May 3)

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.


Continue reading

#design, #design-share

Design Share #54 (Apr 8-Apr 26)

Continue reading

#design, #design-share

The new grid experience, feedback needed

@saxonafletcher has recently shared in Slack #design the work being done in the grid. Below are his comments as he needs design input to proceed.

Need some collective design input in regards to the new grid experience, specifically the manual mode which lets you set number of columns and rows.

Grid items can be placed in either a manual position (e.g. column 1 and row 2) or an auto position that adapts depending on what else is in the grid (e.g. pushed further down if new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is added before).

The current experience attempts to handle both these by using a “pin” action which you can think of as “locking in place”. It means that it will never move even if more items are placed before it. It also means you can create overlapping items.

One of the goals of this work is to create a more intuitive layout experience that just feels natural and is fun. Think drawing on paper. However, we also don’t want to lose the benefits that grid provide when it comes to how items adapt as the grid grows.

Ideally this can all be done on canvas vs having to set col and row start in inspector.

We are working towards:

  • Creating grid items via clicking or dragging empty cells
  • Dragging between grid cells removes col and row start and just changes the order of the grid items
  • Dragging on a cell/s adds col and row start (pins)

The PR is here if you want to play.

A few options:

  • In manual mode, all grid items have a set position by default
  • When creating/editing the grid parent, we let you create areas that you can add blocks to, this would be on top of the normal grid
  • Try a different sort of approach to the pin e.g. “position: manual” like examples attached

Could we indicate whether an item has a set position or not purely on canvas? I really want us to nail this experience and have the most intuitive layout tool around without sacrificing structure. 

Leave your comments, recommendations and questions below.

#design

Design Share: Mar 25-Apr 5

Continue reading

#design, #design-share

Design Share: Mar 11-Mar 22

Continue reading

#design, #design-share

Design Share: Feb 26-Mar 8

Continue reading

#design, #design-share

Design Share: Feb 12-Feb 23

Continue reading

#design, #design-share

Design Share: Jan 29-Feb 9

Continue reading

#design, #design-share