Try a toolbar for the block navigator #21372
Conversation
talldan
added
[Type] Enhancement
talldan
requested review from
draganescu,
adamziel,
karmatosed,
mtias,
noisysocks and
tellthemachines
|
Size Change: +477 B (0%) Total Size: 846 kB
ℹ️ View Unchanged
|
|
I love this idea! |
|
I think this has merit, it'd be a sensible place to have an "Edit" label that would make the attributes editable (labels). What it makes me think, though, is that it seems it could possibly just replicate the child block toolbar items entirely (the link, submenu creation, etc). |
ZebulanStanphill
added
the
Needs Accessibility Feedback
packages/block-editor/src/components/block-navigation/toolbar.js
Outdated
Show resolved
Hide resolved
packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
Outdated
Show resolved
Hide resolved
|
@talldan I don't seem able to test the latest version of this, but happy to see if this is me. I just get a splash of the screen then it goes away. If you can get it working, happy to review a video. |
noisysocks
added
the
[Priority] High
|
@karmatosed It might be related to this issue - #21633 The panel looks open while it's actually collapsed. |
|
@talldan I sadly don't get a panel to open, just white screen. Are you able to run this in gutenberg.run as I also can't there? It very much might be me or browser-based. I would love to test for you though. |
talldan
force-pushed
the
try/alternate-navigator-movers
branch
from
6683673 to
dffd978
Compare
|
@karmatosed You do need to create a menu using the existing menu page first before going into the experimental page. At the moment the experimental page doesn't have an implementation for creating menus. I just rebased the branch, and it does seem to be working ok. |
Co-Authored-By: Zebulan Stanphill <[email protected]>
talldan
force-pushed
the
try/alternate-navigator-movers
branch
from
f346b1f to
d5318ac
Compare
noisysocks
removed
the
[Priority] High
|
@talldan just looking at the video, one thing that strikes me is a disconnect from the item being moved. This could get worse as the tree grows with items. I think having movers beside would, in this case, be more ideal because of that. I know there was an issue to bring that within the block navigator and I maybe think doing that would be useful. That said, perhaps if there is a limit on the height of the navigator area, it wouldn't be a growing problem. I am wary though of this having different interactions to the navigator interface in other situations. #18014 specifically is one I think worth noting here of a way to have the movers in the actual interface. |
|
@karmatosed Yeah, I can definitely see that. I can definitely try to make some progress on #18014, though it has been difficult so far getting that to work for screen reader/keyboard only users. One thing that concerns me is that there are quite a few different block-related actions that are proposed for the navigator and I'm not completely clear how they all fit together. So far there's editing (#20748), deleting (#10984) and a few others like being able to move blocks in and out of nested content (something that seems to be impossible for keyboard only users in the block editor as a whole). So that's one thing I had in mind when considering this toolbar. |
Maybe this is something we can collaborate on and get a solution for? Looping in @enriquesanchez too maybe get eyes on that too. |
@karmatosed @talldan Happy to help. I just tested #18014 and I'm now aware of the challenges on that PR. Leaving comments over there to keep the conversation focused on the PR. |
|
I took it for a spin and it works pretty well (aside of the keyboard navigation issues already mentioned in previous comments). One thing I noticed is that clicking on a menu item in "Navigation structure" moves the focus over to "Navigation menu". This is because we |
|
Closing this as it seems as though keeping the block UI inline in the navigator is the preferred design - see #22089 for details. |
|
Huh, I just discovered this PR after independently creating the following GIF:
FWIW, I think this is a very interesting option and something I'd like to see us explore again. |
Description
#18014 attempted to introduce inline block movers for the Block Navigator, but this proved to be quite difficult.
This PR tries a different approach, introducing a mini-toolbar for the navigator (currently added to the Navigation Menu Page) with a few actions - Move, Duplicate, Delete (we'll need some icons for the last two, for now I've gone with a couple that are available).
This approach is a bit simpler, since it's a separate component that doesn't involve changing the navigation list itself. It's also a bit more scalable, the toolbar has more space for other buttons. It might also be an option to remove the block appenders from the list and use a toolbar button instead.
At the moment the toolbar is fairly basic, but there are a few improvements that could be made:
How has this been tested?
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: