Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dotted lines to the blocks (ui improvement) #10488

Closed
remediosaraya opened this issue Oct 10, 2018 · 2 comments
Closed

Add dotted lines to the blocks (ui improvement) #10488

remediosaraya opened this issue Oct 10, 2018 · 2 comments
Labels
Needs Design Feedback Needs general design feedback.

Comments

@remediosaraya
Copy link

Problem
I find that new users or even users with previous experience with WordPress (include builders) find hard understand and get familiar with the block concept. Change between blocks, use nesting blocks, columns, find if a block is full with or boxed and where exactly touch to modify content even with the line as soon is active (:hover) is kind of tricky. Usually require on new users more than one time or click to get on the right place. Also on the mobile view with less space on the screen and no :hover selector seems to be complicate.

screen shot 2018-10-10 at 1 57 46 pm

Similar problems have been mentioned before, but my suggestion is more UI general on Gutenberg:
#9628 (tools for selecting child/parent blocks)
#6459. (Show block breadcrumbs for selected block)

Solution
Add a single line to the css: .edit-post-visual-editor .editor-block-list__block { border: dashed 1px #ccc;}provides a visual stimulus that reinforces the cognitive performance, so that the user understands a little better each block, its differences, properties and even in the future how to apply new parameters to the CSS model box or advanced functions. This feature could be activated or deactivated on the general configuration (maybe using a icon), so users who are more familiar with the experience and do not require this feature, could precind from its use (@melchoyce mentioned that this work is suggested on phase 2). On the other hand in the mobile interface it reinforces the separation of blocks or identification of them even without having the hover property of the selectors.

Screenshots with dashed lines
screen shot 2018-10-10 at 1 27 18 pm
screen shot 2018-10-10 at 1 20 45 pm
screen shot 2018-10-10 at 1 35 41 pm

@designsimply designsimply added Needs Design Feedback Needs general design feedback. [Type] Feedback Issues that relate purely to feedback on a feature that isn't necessarily actionable labels Oct 16, 2018
@karmatosed
Copy link
Member

I think better visibility and outlines on blocks is something which could be considered in phase 2. I have some concerns though over using dotted lines being a problem as a visual pattern and for some causing line movement. Let's label this for the future and take from there.

@karmatosed karmatosed added Future and removed [Type] Feedback Issues that relate purely to feedback on a feature that isn't necessarily actionable labels Oct 18, 2018
@karmatosed
Copy link
Member

For now, I am going to close this up. We have a few issues around making the nested blocks more discoverable and I think in phase two that will improve. After that we can look at what could be next.

I personally think still the above would be a difficult visual pattern but exploring alternatives would be great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

No branches or pull requests

3 participants