Issue Selecting Column/Columns and finding Spacers

[riemerta6]

I have noticed that it is tough to select a column or the group of columns without a little bit of guesswork. Similarly, with spacers, It's hard to know where they all are quick. Sometimes smaller spacers (20px) can get lost in the content.

A possible solution would be to have a bit of styling on these elements in the editor so they are easier to see the boundaries but don't get in the way of the content. Here's an example of what I've done. Open to other ideas!

div[data-type="core/columns"],
div[data-type="core/column"] {
    border: 2px solid #ececec80;
}

div[data-type="core/spacer"] {
    background-color: #ececec80;
}

[designsimply]

Thank you for testing Gutenberg at this stage and for including screenshots!

My feeling is that we'll want to be careful with any shading techniques like that which might confuse some people to think that it is part of the final content. I think this is why the boundaries for blocks only show up on hover (and not at all when in Unified Toolbar or Spotlight Mode).

@jasmussen I know that you have done some recent work on the Columns block in #10541 and I was wondering if you might be able to have a look at this suggestion to see what you think?

[jasmussen]

In Gutenberg 4.1 which comes out very soon, there will be a new tool for selecting columns. It's a button in the top bar next to the Document Outline button, that will show all nested blocks and provide an easier way to select them. You can see some mockups in #9628.

That ticket is now closed, though perhaps we should reopen it, and close this instead. I agree it would be nice to make it easier to select columns and parents, and that ticket provides a few additional options for doing so.

[riemerta]

What about easily seeing spacers? I've run into the problem of losing small ones that are 10px or 30px when I start moving things around.

[mtias]

The same tool should also expose spacers.

[karmatosed]

I agree for now let's close this, we can always reopen that ticket.