search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.47k stars 4.18k forks source link

Spacer Block: Visual Indication the Block is In Use #30777

Open deborah86 opened 3 years ago

deborah86 commented 3 years ago

What problem does this address?

I am frustrated because when I use patterns, there is no visual indication a space block has been used. the only way I am able to see this is by looking at the post outline.

What is your proposed solution?

Have a visual indicator showing a spacer block has been added to the editor. Maybe a faint box that indicates it is present but not part of the main content.

carolinan commented 3 years ago

The hover style can also be difficult to see on colored and dark backgrounds.

paaljoachim commented 3 years ago

I am adding some additional information. Here is an example from the customizer. Where I used a spacer in the top. (One can not see the spacer in use, but might believe it is just an empty space.)

Screen Shot 2021-08-30 at 22 50 28

luminuu commented 2 years ago

I just came across something similar on Twitter, thinking of it it would be nice to see or have an option to enable seeing that spacer blocks are in use. I agree with @carolinan however, that depending on the chosen background color, a fixed color used for this could be hardly visible or invisible.

An idea could be to check out if a visible color could be calculated with some CSS magic or use mix-blend-mode with any given background color.

paaljoachim commented 2 years ago

Just earlier today I added a spacer to a site. Deselecting the spacer looks like this:

It can not be seen. Screenshot 2022-08-16 at 13 22 54

Selecting the spacer I saw this: Screenshot 2022-08-16 at 13 22 58

As the spacer creates space and is in general invisible when not selected. It would be helpful in some way to be able to understand/see that there is a spacer on the page. I believe that @jasmussen Joen and perhaps also @jameskoster have had some thoughts about this earlier.

jameskoster commented 2 years ago

It would be good to fix the hover state first and foremost. Displaying spacers otherwise feels like a step away from wysiwyg, I'm not convinced we should go that direction.