Try box shadow, border, and notice for a template part editing indicators. #23406
Conversation
|
Size Change: +753 B (0%) Total Size: 1.16 MB
ℹ️ View Unchanged
|
|
Note - This idea would most likely require a function to determine the color/opacity of the shadow based on the current background color in the editor. 🤔 Otherwise this idea really won't work well for a variety of themes. |
|
I feel like this kind of thing might be "good enough" to start iterating on 🤔 Maybe also with a border or something |
Agree on both. I pulled in changes from master now that it has width alignments, a renaming toolbar, and a border when the actualy template part block is selected (although we may want to have that border whenever inner blocks are selected as well?). Template Part selected: Inner block selected: At first glance Im not exactly sure where that border is being applied, but it may look nice to have it applied with inner blocks selected as well. |
Addison-Stavlo
changed the title
|
Tried this out locally. Feels pretty nice, thanks for working on it!! I have some thoughts:
|
By default the blue border is applied when the block is selected. The changes added here make it also applied when the children in the template part are selected, is this what feels off? i.e. the template part shouldn't have a blue border when we have selected one of its inner blocks? I feel like the box shadow looked really naked without the border, but it will be simpler to leave it 'as-is' and may feel less naked if we are also adding the spotlight mode to the box shadow.
Yeah, it seems like the block inserter there is picking up the hover state. I not sure how to get around this. 🤔
I think currently the notice options are to have the notice either at the top of the editor or on the snackbar. With the snackbar it seems to disappear after some time by default, I wonder if there is an option to disable this behavior.
Yeah, I think whatever visibility and notifications we settle on would make sense for post-content as well? It is the same in that it is a separate entity whose changes will be applied to everywhere it is used. Perhaps some other blocks as well? If it gets to a certain point maybe we should consider making some sort of hook or HOC to enable this functionality as opposed to writing it into every block. 🤔 although im not sure if there would be enough blocks needing this behavior to warrant that? |
|
Re the blue border, I think the idea is to have the blue block border be related to the block you are specifically editing. I think when selecting a child block, you are specifically editing that child block rather than the template part, so IMO the template part border should be slightly different when a child block is selected vs when itself is selected. (for example, i think the designs here have a gray border when a child block is focused) Maybe even a lighter blue color to indicate that it's still related to what you're editing, but not the specific thing you're editing? 🤔
Oof, that's unfortunate :(
It almost feels like this isn't a normal notice but just some info about the block being edited 🤔 Maybe we should build it separately rather than using the notice lib?
+1 for sure. In my mind, the distinction is an "inner block controller" should get this treatment. Maybe not something like the nav block or site title block. Post content and template part would both be examples of inner block controllers though |
Oh! I missed that (or misinterpreted it). Updated!
I wonder if we do something like add/remove an Although im not noticing it working for blocks that use that in the site editor? 🤔
Yeah, I think that might make sense. |
|
I think that hover class is supposed to show up. I think some changes in this PR must remove it, because I noticed that it was working in #24394. 👀 |
noahtallen
force-pushed
the
try/template-part-editing-visibility
branch
from
4002313
to
96754ad
Compare
|
btw @Addison-Stavlo I rebased this on |
|
The |
|
noticed a little bug. when first loading, the focus mode was still applied:
just posting the screenshot here for discussion: Template part block focused I'm kinda seeing four different areas of UI which feel as if they could be combined into the same area. in clockwise order:
|
|
#24450 moves the block title to the toolbar, which is a good way to help make things more consistent |
I have been thinking about this more and am flip flopping a bit on my opinion. We probably should be using the notices package as much as we can. If the snackbar notice is not visible enough, we should add options to the notices package to allow for snackbar notices that do not dismiss automatically after X seconds or to increase their visibility in other ways. Notices are build with accessibility, screen reader, and other concerns in mind. It helps to utilize the package because as time goes on and notices are improved or iterated upon, our template part notice would receive these upgrades and remain consistent with the rest of Gutenberg. Building specific in-block notices seems like it could create a bit more pain down the line when they need to be updated and kept consistent, especially if we need to allow similar notices for other entity specific blocks. Another thing to consider is that the snackbar is a tried and true place to show notices. Attaching them to the top or bottom of a block will become problematic as they won't be visible in various circumstances. If we scroll down to the footer and start editing the top blocks in it, the notice attached beneath it may remain off the screen and unseen. Similar issues with large template parts that may have larger height than the editor height (like maybe with post-content blocks later as they may need a similar notice). While the snackbar will always be visible in the editor. Ex - editing the header on mobile: Or the footer in desktop browser: |
Right, the setting persists beyond reload so if we have a Template Part selected when we close/reload the editor it remains active. So we could check for it and turn it off on editor load (in the same place you were experimenting with enabling select mode) 3a622df |
The initial implementation of template part notice reused the notice component from the component library and notice logic from core/notices. After more discussion, we decided to try an alternative, custom implementation where the notice is attached to the template part block itself.
jeyip
force-pushed
the
try/template-part-editing-visibility
branch
from
ce41a5f
to
0cda5aa
Compare
jeyip
force-pushed
the
try/template-part-editing-visibility
branch
from
0cda5aa
to
79e8ca4
Compare
Description
This explores adding a semi-transparent box-shadow to a template part in the editor when it is selected for editing.
This is an alternative to the suggested "Spotlight Mode" behavior for template part editing. Since that mode is already implemented on the individual block level, a box shadow may apply a similar style that is still distinctly different from and plays well with the spotlight mode.
While slightly rough and lacking on its own, this shadow may work well with other indicators that are being explored such as the renaming toolbar.
How has this been tested?
Screenshots
Before:
After:
1. Information about the change being persistent 2. Border visible when editing inner blocks 3. Overlay/scrim over rest of content when editing template partTypes of changes
Checklist: