Off canvas menu editing: adds list view to navigation block #44534
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
draganescu
requested review from
jasmussen
and removed request for
tellthemachines
draganescu
added
[Type] Enhancement
|
Size Change: +5.35 kB (0%) Total Size: 1.29 MB
ℹ️ View Unchanged
|
talldan
reviewed
Sep 29, 2022
|
Thank you for working on this! 🎉 Even in this state: click-through and list view management, it feels like the potential is there. Here's a GIF:
A few notes:
I'm missing the "Create new item" button, which is going to be the next tricky step to solve. The basic idea is to let you build the entire menu, including sorting, moving into submenus, etc., in this panel alone. I imagine a simple way to start is that this would insert a Page Link with the dropdown open, this one:
Would that be possible/feasible? |
draganescu
requested review from
tellthemachines
and removed request for
tellthemachines
draganescu
force-pushed
the
try/navigation-list-view
branch
2 times, most recently
from
82e4762
to
b8a8cc8
Compare
The overlay appears only on hover at the moment, because once the parent is selected all the child-blocks can be manipulated. If we pursued something like #43608, then the overlay would persist upon selection as well. |
|
Good points, thanks for responding. The main issue to solve here is to ensure a great navigation building experience that lets you use the inspector interface with the main navigation block selected, to build out your entire menu. The tricky balance to find here, is one of not directly locking the canvas view from being edited there, but nudging towards the ergonomics of the list view. Perhaps something like the recently landed "content lock" can be employed here? (Here are some GIFs) — I know that's designed for patterns, but can that be turned on by default for navigation? |
|
templateLock:contentOnly would theoretically allow folks to change link labels and destinations, but not re-order, add, or delete. I'm not sure that's a great fit for navigation, but I suppose it depends on which on-canvas actions we want to allow. Perhaps something like #43608 could work. IE:
|
We'd still have the full "Modify" action (which btw can move to the ellipsis), and we would pair it with the inspector interface for building and adding to the menu. |
|
I suppose we can try it, but I think it might be strange if it's possible to edit menu labels, but not add links or move things around 🤔 A full-lock-with-easy-unlock feels like a better approach to me, similar to what we've explored for template parts. |
This would work in the list view no? I don't have a strong opinion, honestly. What I believe to be key here is: a) building your navigation block in the canvas needs work still b mainly works if you don't lose your place every time you select different menu items in the canvas. |
|
Based on followup in the original issue this PR will move forward with attempting a customization of the list view to support opting out of canvas selection of blocks. We can merge it then just like that. I will make it a gutenberg experiment from the start considering how many iterations will take before the off canvas editing is really good enough UX. |
draganescu
force-pushed
the
try/navigation-list-view
branch
from
0e53ba0
to
2e15920
Compare
|
I'll try to move this forward in an experimental way where I copy the items I change so that iterations can land independently of trunk versions. For instance I'll see if making a copy of ListView in the nav block works and the same for other things that don't work out of the box for the requirements of off canvas editing. |
draganescu
changed the title
draganescu
force-pushed
the
try/navigation-list-view
branch
from
a589aaa
to
5e546c8
Compare
|
What's the best way to test this? I'm not seeing any changes in the nav inspector just diving in now. I remain convinced that this sliding inspector editing interface for child blocks be immensely useful for the navigation block, potentially letting us reach a point of usability that reduces the pressure on all the separate rough edges the project has uncovered. Not just that, but it will also be useful for social links, buttons, content-only editing containers, and more. It has such potential, let me know any way we can help push this forward! CC: @WordPress/gutenberg-design |
@jasmussen go to Gutenberg > Experiments and check this experiment on.
I am too since eons ago #13690 (comment) I've been dreaming of a structured way to manage menus :D |
Co-authored-by: Joen A. <1204802+jasmussen@users.noreply.github.com>
… enable faster iteration.
draganescu
force-pushed
the
try/navigation-list-view
branch
from
38635b4
to
f1de0fe
Compare
- referenced menu not existing - uncontrolled blocks menu - referenced menu OK Readds some CSS for the manage menus link in the advanced area.
georgeh
reviewed
Nov 2, 2022
| onClick={ | ||
| selectBlockInCanvas | ||
| ? selectEditorBlock | ||
| : () => {} |
There was a problem hiding this comment.
This seems to stop the block from getting selected @jasmussen's comment (and maybe fixes #45440?)
Suggested change
| : () => {} | |
| : ( event ) => { event.preventDefault() } |
|
Although this is approved I will close it and follow up with four PRs: to make it easier to keep track of what it was done:
|
This was referenced Nov 3, 2022
4 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Part of #42257
Closes #45444
Adds a list view to the navigation block inspector.
Why?
Using and locating nested items that are hidden in navigation submenus is difficult.
How?
Copies the implementation in the site editor navigation sidebar which uses a block editor provider to allow the list view to not lose selection to the block in the canvas.
Testing Instructions
Screenshots or screencast
navigation-off-canvas-editing-selector-moved.mp4
Todo / known issues
Add an "Add menu item" item to the end of the list view (asked if this should be a list view item in general)Fix spacing of manage menus (asked for mockup in design issue)