Navigation: add new patterns #35063
Navigation: add new patterns #35063
Conversation
… for better looking navigation patterns.
gwwar
added
[Block] Navigation
|
Size Change: +8 B (0%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
|
This is cool, two big ingredients in this one, both new patterns for the navigation block, and the ability to preset labels without URLs in patterns:
The patterns are useful if very basic, I do wonder what level we need these to reach before shipping. On the other hand, it's very easy to replace an existing pattern with an upgraded one, without having to worry about deprecations. Could we ship these in the plugin only, somehow, until we feel satisfied with the designs? That way I could potentially upgrade them without blocking your work here. The ability to set a label, but not a URL, I'm a fan of. The benefit to this approach is that at least there's a wavy underline indicating that this item links nowhere, click it to address that. Already now you can insert patterns with buttons that link nowhere, with no indication thereof:
At least the wavy underline is some indication that this item is missing a link. So in that vein, I think that a) it's important we can create visually impressive patterns, even with preset labels, and b) the wavy underline can be a start, and then we can see how to upgrade/adjust if we find it insufficient. Some ideas I've seen to support this is to provide chip or dot indicators in the list view to indicate, "this item is missing a link", and to surface blocks with missing links as part of the pre-publish flow. In such an environment, the wavy underline would be an in-canvas extra affordance, not the only affordance.
Now that we can include site logo and title in the navigation, in addition to social links and search, I think it's a fine thing to do. Especially if we can keep these plugin only as we refine them. I would very much love to pair with you on bringing these home, and this list of patterns from @mtias might be useful inspiration. CC: @kjellr if you have any thoughts, or designs we could leverage, in lieu of #31231. Also wanted to point to #30170 (comment) as mockups for enhancing the building experience of these. |
I think a category makes sense, and when #28739 is implemented, we could show or hide the Navigation category patterns depending on the context. I agree with @jasmussen; with the recent improvements he mentioned, the block gap support, and the design tools enhancements to Site Title, Site Logo, and Social Links blocks, some of the linked patterns can already be implemented. |
|
One pattern that is within reach is 4 menu items, space between, and a rounded style Site Logo in the middle. Something a la this: But for that to be a useful pattern, it would have to be the actual Site Logo block, which also means the pattern would be less compelling if a site logo hasn't been set. Can we pre-populate the Site Logo block with an image? Or can we show the pattern only if a Site Logo has been set? |
Although hiding the pattern could be easier, displaying the pattern even if the user didn't set a Site Logo is a good way to showcase such a block/feature. I believe patterns can act as a demonstration and help users discover blocks such as the Site Logo block, and this approach would open more design possibilities than hiding the patterns altogether. |
Definitely happy to pair with you on these @jasmussen ✨ I wasn't sure how experimental we could get with patterns outside of themes so I started with just some basic examples. I think even just trying to build these should be a good exercise in seeing if we're still missing functionality / any misc bugs that arise.
I can look into options today. We will need to gate display of the pattern based on theme since we only register the site blocks when we detect a block based theme. (Maybe we can pass an image to the preview code only).
Did you mean one of the theme plugins or Gutenberg? One thing I can do is pull out the label change and land that first to unblock any pattern work. |
|
Gutenberg plugin for now. I'm waffling a bit though, these patterns are more functional shortcuts that artistic expressions, at least for now, and maybe that's ok? It's something to think about 🤔 |
|
I think we can still make these look good, it's definitely more of a challenge when they may be dropped in any theme |
|
To clarify a bit more: my instinct is that it would be a more inspiring experience if when you browse the pattern interface, that you see opinionated patterns that look exactly like those concepts Matias shared, i.e. with color and logos and everything. Almost as if you design a website, then cut it into sections. This is where the Site Logo becomes a challenge because it's just a clunky placeholder when inserted. If we could prefill it with a logo of sorts, I wonder if that would make for a better experience. It would at the very least provide a more exciting preview. |
gwwar
changed the title
|
I pulled out the label change in navigation-link to #35094 |
|
The patterns here seem pretty relevant to this old PR. It even includes the one @jasmussen mentioned above. I don't have bandwidth to refresh this week, but I think the blockers we were seeing before should be mostly gone now that flex/gap functionality is available. |
|
That's awesome, Kjell. In your version, is this pattern one or two navigation blocks, and is the image a site logo or just an image block? One thing recent changes enable is to use the site logo directly between two menu items. The site-logo is still a headscratcher, though. |
|
@kjellr @jasmussen should we close out this one and prefer #31610? I can help rebase that branch |
It was two navigation items because at the time it wasn't possible to put the site logo a nav block. But using one navigation block is way better. 😄
I'm not sure — that one was specifically for the template part block, though there's a lot of overlap for navigation. |
|
I added an initial mockup to how we can improve the site logo placeholder in #35096 (comment). Of note, the site logo placeholder should take the style from the block, as well as dimensions, even in the initial state. The rounded aspect is already possible, even if it isn't reflected in the placeholder: But as far as I can tell, the dimensions are not possible to set in that state yet. |
|
Are there any plans to refresh this? |
|
No, there aren't. I'll going to close it. Header patterns should go in the pattern directory moving forward. Just waiting on a resolution here: WordPress/pattern-directory#395 |
A small part of #34041 and #33091
Changes here allow us to use a label as placeholder text instead of "Select Page". This makes patterns more visually interesting and lets users more quickly pick out useful patterns.
Since folks may find multiple ways of things, I also added a few simple patterns to demonstrate features of the navigation block that might not be apparent to folks at first glance.
Let me know if there's a better spot for these.
CleanShot.2021-09-22.at.14.30.38.mp4
Feedback/Questions