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

Try: Remove dashed outlines for child and parent blocks. #18105

Merged
merged 1 commit into from Dec 2, 2019

Conversation

@jasmussen
Copy link
Contributor

jasmussen commented Oct 25, 2019

This PR reverts past efforts by myself and Kjell to make parent/child block interactions easier. This is not because that effort was not necessary, it is more necessary than ever, but it was because it did not work as well as we had intended. In actual practice the added padding and dashed outlines added confusion and additional UI complexity, where it was meant to do the opposite.

Instead, there is an incoming breadcrumbs toolbar intended to alleviate the same problem. Tracked here: #17089, I would encourage you test the PR here: #17838. With this breadcrumb toolbar present, the current state of what you're editing becomes visible in a more more clear (text indication) way, with consistent buttons (breadcrumbes) to select parent blocks, without hunting pixels.

Additional efforts such as those being explored in #17088 can help as well.

Before:

before

After:

after

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Oct 25, 2019

I'm not a fan of this. I think the dashed outlines are still helpful even with the breadcrumb bar added, since they give a general sense of not just the immediate hierarchy, but also siblings at the same level. Here's an example of what I mean:

image

It's clear how many levels of nesting I'm at and which blocks are in the same column/columns/group. You lose this useful visual information if you only have the breadcrumb bar.

@youknowriad youknowriad force-pushed the try/remove-dotted-lines branch from 616a408 to 3919aca Nov 28, 2019
@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Nov 28, 2019

With the new Breadcrumb and the select tool merged, I think this makes a lot of sense. The layout is closer to the frontend this way and there's no feeling of jumpiness when you navigate your post.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Nov 29, 2019

With the introduction of the select tool, my opinion has changed. I no longer oppose this change. I think that the combination of the select tool, the breadcrumb bar, and the Block navigation menu are enough to traverse nested blocks without having to add padding to InnerBlocks areas, especially considering future improvements such as the ones proposed in #18014 and #18132.

This PR reverts past efforts by myself and Kjell to make parent/child block interactions easier. This is not because that effort was not necessary, it is more necessary than ever, but it was because it did not work as well as we had intended. In actual practice the added padding and dashed outlines added confusion and additional UI complexity, where it was meant to do the opposite.

Instead, there is an incoming breadcrumbs toolbar intended to alleviate the same problem. Tracked here: #17089, I would encourage you test the PR here: #17838. With this breadcrumb toolbar present, the current state of what you're editing becomes visible in a more more clear (text indication) way, with consistent buttons (breadcrumbes) to select parent blocks, without hunting pixels.

Additional efforts such as those being explored in #17088 can help as well.
@jasmussen jasmussen force-pushed the try/remove-dotted-lines branch from 3919aca to a7d240e Dec 2, 2019
@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 2, 2019

Thanks for the reviews.

I believe along with the arguments laid out, some improvements to hover styles and tweaks to navigation/selection mode, this will feel even more appropriate, and it removes a great deal of CSS written to just target a few blocks.

Rebased and will merge if the checks pass.

@jasmussen jasmussen merged commit a734b89 into master Dec 2, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@jasmussen jasmussen deleted the try/remove-dotted-lines branch Dec 2, 2019
@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.