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 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

@jasmussen jasmussen added the General Interface Parts of the UI which don't fall neatly under other labels. label Oct 25, 2019
@jasmussen jasmussen requested a review from mtias October 25, 2019 10:19
@jasmussen jasmussen self-assigned this Oct 25, 2019
@ZebulanStanphill
Copy link
Member

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
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants