Try: Add header & footer patterns #31610
Closed
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
kjellr
added
[Type] Enhancement
|
Size Change: 0 B Total Size: 1.86 MB ℹ️ View Unchanged
|
kjellr
force-pushed
the
try/add-header-footer-patterns
branch
from
6631d4a
to
a7f0352
Compare
Just noting that I gave this a try but was hindered by the bug described in #31845. |
|
I've added in some responsive menus. These patterns are generally looking ok, though they fall apart quiet a bit on mobile still. The responsive menus help, but these will be in a much better place if we can land #31816. For example, for this pattern:
... the responsive menu kicks in just fine, but the column its in wraps on mobile:
This is an issue for many of the header patterns. Other patterns will need some additional changes:
By the way, @ntsekouras, do you know if there is something I can do get these patterns to appear here? Or is that just not ready yet?
|
|
Here's a quick visual snapshot of the status of these across breakpoints. You'll notice that they really start to fall apart pretty quick. Headers
Footers
|
It's not implemented yet. |
|
This PR is still blocked until we have a solution to #31248 (comment). I have an idea in #32778 that might provide an easy fix for this, but not sure yet. #19909 (comment) is also still an issue, but it's a slightly more acceptable bug in my opinion. But in the meantime, I polished these a little bit more and also tried them out in a variety of block themes. From that testing, I decided it would make sense to provide a few more variations of the simplest headers. Here's the full set that's in here today: Headers
Footers
|
|
Another update: I've adjusted these patterns to use the new "do not stack on mobile" setting for the columns block. It generally works as expected, but the results still aren't great. To get it to work nicely, I think we'd need:
Really though, a better solution might be to not use columns here in the first place. These items (Site Title and Menu) should just behave like flexbox children, taking up the space they need at any breakpoint, while still staying in a horizontal row. @jasmussen I know you've talked with me about maybe expanding the Navigation block to house other standard header elements to achieve this, but is there an issue for it already? Update: Looks like there's an issue exploring this sort of thing for the Group block: #24473 Anyway, here's a snapshot of the current state on mobile for some of these header patterns:
|
4 tasks
There wasn't an issue, but there should be, so I created it here: #33278 — please add to it if I missed anything, you can feel free to edit it. I want to suggest that in addition to allowing more blocks inside navigation, the Group/flex feature you linked will be a big help. I also still want to explore grid-based no-query responsiveness, as shown at the bottom of this codepen: https://codepen.io/joen/pen/wvJMdGr |
|
Closing due to inactivity. 🕐 |
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.
A PR to add the patterns from #31231 (comment).
Todo
Screenshots
Headers:
Footers: