Try: Enabling all alignments for the site title and navigation blocks #32778
Conversation
kjellr
added
[Type] Enhancement
|
It means so much that this PR comes from you, knowing you have done so much work with the navigation block and navigation block patterns. In principle and in short, it seems fine to me to enable this, even if the primary con is a big one: floats. Before I give the green check, I wanted to run through some higher level questions around the longer term building of navigation. Discussing a separate issue on markup, Matías goes through a few good example patterns and how to build them in this comment. The primary take-away for me, and the reason why I've been pursuing a 1:1 placeholder-to-content design in #32512, is that the navigation block isn't just about a list of navigation items, but more about enabling what we might refer to as the key interface for browsing your website, which in most cases includes a site logo or site title (or both). Your example of a site logo and a burger menu on the right is a powerful one to inform how things are built: is the logo part of the navigation block, and if so, how do we define what goes in the burger menu? Another example is this one:
It seems like I should be able to select the "About" menu item, click the right arrow twice, to move it between "Recipes" and "Contact", and inversely, select the "Recipes" item and press left to move it to where the "About" item was. That suggests a single navigation block, rather than two nav blocks and a logo. All that leads me to the question: if navigation as a big encompassing site navigation block, more than just a list of links, is where we're going, does it help or confuse to add alignments? Or is it fine either way? |
Good question! I'm not totally sure, but I expect it might still be helpful to have the additional alignment controls. I like the idea of having the option to include common header elements in the Nav block (Maybe just Site Logo, Site Title, Site Description to start. I wonder if someone can make a quick PR to try that out? I do expect that it will get complicated. Like for example, take this mockup:
That's nice and simple — everything's just in a row, and I know we could do that with the current Nav block controls. But what if I wanted to also display the site tagline under the site title:
How would I do that? Would I group the site title and tagline, and have that group centered together? 🤔 I think we might end up needing to expand the spacing controls in order to make a wider range of layouts possible. Maybe these alignment options are part of that? Or maybe we rig up some sort of CSS-grid-based UI that makes this all really flexible. Either way, I don't think it'll hurt to have these alignment options available, since they all use standard classes they'll presumably continue to work if we make changes later on. (I hope? 😅) |
|
Solid points. Before:
After:
Riad was working on this for a time, but we need to group block level items together. I think that's still a pending todo for the navigation block, and unrelated, but came to mind now. Left and right aligned look as they should:
But centered is, well, misleading since it doesn't also justify centered. Any thoughts on what, if anything, we do here?
|
Yeah, that's not great. Try now — I've added styles like the image block has to get center alignments properly working. (It uses
I only implemented that for the nav block for now, but I can do the site title block as well if it's working well. In any case, this does conflict with the justification controls. That's definitely a hesitation I have with this PR. 😕 |
|
Size Change: +1.55 kB (0%) Total Size: 1.04 MB
ℹ️ View Unchanged
|
|
Thanks again for working on this. Left and center:
I especially like how the burger menu is also centered there, very nice and a good reason to add this. I discovered an issue that's not your fault with this branch:
I will look at that separately 🙈 Right opens up a bit of a question again, though. Notice how I have a dropdown menu:
By default, dropdown menus open from left to right. For it to open from right to left, you have to justify the menu right. We could theoretically hook into that existing CSS so that it opens leftwards, just like it does for justified right. Want to take a stab? Otherwise I can look it up and push. It might also be time to open a separate ticket about automating the direction of opening menus, but I had hoped to postpone that to a mega-menu phase 2 for the block. |
Should be all set as of 403a58b:
I also added the styles necessary to get
|
There was a problem hiding this comment.
This needs a rebase, but is working well for me, thank you for the extra mile on the menu opener:
I remain slightly skeptical overall on how useful these alignments will be in the long view. But at the same time, there doesn't seem to be a great value in limiting them. Floats are difficult to work with, but I can imagine if we find different layout opportunities, left and right might be more useful at that time. So I'm happy to try this.
|
After trying this more, I'm not sure it's actually going to solve many problems for #31610. When an item is floated, it doesn't obey any vertical alignment rules (According to the CSS spec, "A floating box must be placed as high as possible."). 😞 This means it's near-impossible to ensure that for example, a site logo and the navigation block will be properly aligned with each other:
I don't see a way around that right now, so I think it makes more sense to just put the focus back on #19909 (comment) and #31248 (comment) as the solution to these issues. I could see these floats being useful for some other super-weird use cases, but since they cause some confusion when combined with justification options, I think it makes sense to just close this PR for now. We can always re-open in the future if we find a stronger need for these options. It was worth a try! |
|
Thank you for exploring this with such care.
I think there we might also be able to explore some built-in low-configuration responsiveness to this. For the particular header/stacks to one column solution you link to, I actually explored a grid-based solution in https://codepen.io/joen/pen/wvJMdGr:
|
This PR tries enabling all alignments for site title and navigation blocks. This would provide a lot more flexibility for header and footer layouts. At the moment, #31610 is blocked because there's no way to create a properly responsive header layout like this one with our current block options:
The closest you can get is by using the columns block, but that causes issues on mobile due to the issue described in #31248 (comment). An alternate solution would be to use left/right floats to accomplish the same thing. With this PR active, creating that layout becomes trivial:
Benefits:
Cons:
Only works inside of a Group block right now, as per Left and right alignments missing in the block editor when running FSE themes #30568.