Spinning this out of #9628 as a concise idea to explore.
In order to help users visualize the structure and relationship of nested blocks, we should consider adding a second set of borders around parent and child blocks when they're selected. Combined with some additional padding, this will help users navigate between these blocks as well.
Rough mockups:
Exact color/treatment of the borders will be explored in PR. But in general, when a parent block is selected, we'd add padding and a light border to its children blocks:
When a child block is selected, we'd add padding and a light border border to the parent block:
There's a simplified demo here: https://codepen.io/kjellr/pen/jdEJQb?editors=0110
(via #9628 (comment))
Development considerations:
Exploration around the padding aspect of this was explored by @mapk in #14148. This was closed because there's currently no way for CSS to conditionally target the parent of a selected child block. Therefore, the padding would currently need to be added at all times, which means that those blocks would no longer appear like they do on the front end.
In order to build this in correctly, we need to add a has-child-selected class (or something similar) to the parent block when a child is selected. I'm happy to run with this one if someone can help by kicking things off with a PR to add that classname to parent blocks.
Spinning this out of #9628 as a concise idea to explore.
In order to help users visualize the structure and relationship of nested blocks, we should consider adding a second set of borders around parent and child blocks when they're selected. Combined with some additional padding, this will help users navigate between these blocks as well.
Rough mockups:
Exact color/treatment of the borders will be explored in PR. But in general, when a parent block is selected, we'd add padding and a light border to its children blocks:
When a child block is selected, we'd add padding and a light border border to the parent block:
There's a simplified demo here: https://codepen.io/kjellr/pen/jdEJQb?editors=0110
(via #9628 (comment))
Development considerations:
Exploration around the padding aspect of this was explored by @mapk in #14148. This was closed because there's currently no way for CSS to conditionally target the parent of a selected child block. Therefore, the padding would currently need to be added at all times, which means that those blocks would no longer appear like they do on the front end.
In order to build this in correctly, we need to add a
has-child-selectedclass (or something similar) to the parent block when a child is selected. I'm happy to run with this one if someone can help by kicking things off with a PR to add that classname to parent blocks.