Skip to content

Refine selected block borders #1802

@iamthomasbishop

Description

@iamthomasbishop

While working on InnerBlocks, we decided to try a new style for borders to highlight the difference between nested and non-nested blocks. I must say, after playing w/ blocks that use this method, it feels right for all blocks, so I'm proposing that we extend to use this across the board.

Essentially what we did was move the left/right borders in towards the center so that there were slight optical margins on the left/right sides of the block. The two approaches look like this in practice (both are in use at the moment):

image

Note that all blocks (other than special cases w/ columns, etc) span 100% of the content container, but we used a mix of margin and padding to define the border so that there is an optical inset. So instead of using 12px/16px as the padding on all blocks (and no margin), we use something like 12px/12px, and then there is a 1px border and 3px margins on left/right of the block (don't quote me on these exact values because I can't recall what we're using in the code). This might help to illustrate the difference:

image

There are a few wins we get by doing this:

  • Above all, it's much clearer which block is selected
  • 12/12 padding inside blocks feels more balanced
  • Right now, we have a couple of different styles for (parent) block borders depending on device size — this would consolidate into a single style
  • As we start getting into more complex layout and nesting, this should make the UI feel more natural, because elements won't feel as much like they're "bumping" against each other

// cc @lukewalczak @jbinda @pinarol @hypest — any thoughts?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions