Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Site navigation when full site editing #19204
Problem to solve
How can a user navigate to another post or page when editing their site in Gutenberg?
Some rough ideas
These are by no means fully worked out ideas, but I think they are a good starting point. I intentionally made the mockups lower fidelity as I'm interested in the base concept/flow more than the details (at least initially).
Figma file (feel free to comment or iterate on it)
Idea 1 - Page selector
I started by adding the title of the page as a dropdown in the top bar. I think the weakest part of this design is that it takes up space in the top bar.
Then, if clicked, will expose UI nearly identical to the block picker (for familiarity and reusability):
This would allow a user to search for a page much like searching for a block OR they could see every page. I'm not sure it would be great for a site with thousands of posts/pages.
An additional benefit here is it could be a gateway into creating/editing layouts. (has not been designed yet)
Idea 2 - meta box
This iteration would expose a meta box in the Inspector (sidebar) when in full site editing mode. The meta box would essentially contain all posts and pages similar to the previous mockup (though I only put pages in this particular wireframe).
I don't feel this one is as strong as it relies on the sidebar.
Idea 3 - hotkey navigation
This idea could be used with really any direction we go as far is visual interface. It makes sense to add hotkey navigation. Perhaps by holding down a specific key while clicking on a link would take you directly to that page.
Idea 4 - Expose a clickable link
If you are familiar with Google Docs, this concept should be familiar. In Google Docs, if you click a link, a popover shows up with editing controls and a clickable link. We could do something similar. Here's how it looks in Google Docs:
Idea # 1 feels like the better route for me as well. Although having this positioned top-center is pretty extreme. As "modes" become more of a thing, would it make sense to bring it closer in vicinity to those controls?
While I like Idea # 2, it doesn't feel right in the sidebar under the "Document" tab. Maybe it's its own slideout sidebar. I don't want to overdo this slideout thing though either.
I like Matías idea for a "Navigate Site" tool, because for each of the tools avaiable, we also attach a mode switch, and in this mode switch you could click anything, without having to create extra, often different, affordances for every single followable link.
By different affordances I mean we have a lot of different interfaces in the canvas that link places, enough that we might need different buttons to take you to that destination, if we are to follow the pattern from Google Docs.
Adding a button to a generic URL dialog is not a bad interface, but it's just not everywhere. A "Navigation tool" might not be the most perfectly intuitive solution (let's keep thinking) — but at least it provides a single interface for clicking any link, and knowing whether it will open a new tab, or navigate to the template in question.