Navigation Block: add block gap support #35277
Merged
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
ramonjd
added
[Status] In Progress
|
Size Change: +160 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
jasmussen
reviewed
Oct 1, 2021
|
Very nice, thank you! Here's a gif of it working: One of the original use cases was a space-betweene'd pattern with a site logo in the middle. Works great:
In general for the new ToolsPanel, I think the value it has is that it an curate the controls inside, which also means it should, with few exceptions, never be empty. The idea is, if there are 10 controls available (a la typography), we can show the 4 most valuable ones and ensure there's still access to the remaining ones. If there's only a single control available, we'll almost always want to just show it by default. What do you think? |
Yes, the rename is included in the PR for the Columns block gap. |
Definitely. Great point. 👍
👍 Sounds good. Just like the start of a new year, it will take me a few days to reprogram my 🧠 to write it correctly 😆 |
There was a problem hiding this comment.
This is working well!
To clarify, with Check that the default value of --wp--style--block-gap is 25px and that it is applied to the Social Links Block container. did you mean is isn't applied to Social Links? Given the setting above is specific to the Navigation block. Fwiw I tested and it doesn't apply to Social Links 😅
I also tested with a really old theme that doesn't set a value for --wp--style--block-gap and the fallback value is working correctly ✅
I put that in there just to make sure people were paying attention Seriously, thanks for testing and spotting that copy paste error (from #35236) I've updated the test description. It should indeed refer to the Navigation block, not the Social Links block. |
tellthemachines
approved these changes
Oct 12, 2021
…ex container surrounding nav items and page list items. The calculation is to (try to) maintain the original proportional differences between row and column gaps.
Ensuring that spacing gap controls are shown by default in the otherwise empty Dimensions panel.
ramonjd
force-pushed
the
add/navigation-block-gap-support
branch
from
477069f
to
addede3
Compare
|
Quick rebase before merging to be able to test social icons gap spacing within a navigation block.
👍 |
|
Thanks for working on this! I'm seeing in trunk some issues with a missing gap, notably in TT1 blocks: It appears that the CSS variable fallback isn't working as expected for me, perhaps because the
I happed upon this excellent fallback strategy post recently, in case it's useful for a followup. |
|
Oh, maybe I'm wrong. Maybe the problem here is that the gap is set to zero when the nav block has a background. This could be related to the fact that in previous iterations, menu items have padding — zero padding but a margin when there's no background, 0.5em padding and no margin when there is a background. |
|
As a followup, I'm looking into a fix. It appears there are two issues going on — both that the fallback value isn't used, but also that the padding appears to have been zeroed out. |
7 tasks
|
Created #35752 as a followup. I think I got everyone done, but I had to simplify the selector a bit. Happy to tweak based on your feedback. |
|
Thanks for the follow up on this one!
Very timely, appreciate the link. |
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.
Description
#33991 has made block gap support available 🎉
Here we're applying block spacing support to the Navigation Block. More specifically, to the inner flex container surrounding nav items and page list items.
The calculation is to (try to) maintain the original proportional differences between row and column gaps.
Resolves #34525
Testing
This might take a while, so grab a drink, get comfortable. Some lo-fi beats often help me, or heavy metal, depending on the weather.
Enable block gap/spacing support in your theme.json under "settings", e.g.,
Have some posts and pages ready for testing your nav! Also if there are any default
blockGapspacing values in yourtheme.json( e.g.,"spacing": { "blockGap": "24px" }) remove them for now so we can check the CSS defaults.Insert a Navigation Block, start with an empty menu and add post/page items.
In the Dimensions Panel in the controls sidebar, adjust the block spacing value.
Repeat the above steps and add a Navigation block, selecting Add all pages.
Check that the block spacing value is applied to the menu items in the editor and for the saved post on the frontend.
Remove all
blockGapvalues. Delete them from the input rather than setting to0.Add background colors to your Navigation Blocks.
Check that the block defaults match those defaults in the CSS.
Now, in your theme.json, add the following to the "styles" object:
Check that the default value of
--wp--style--block-gapis25pxand that it is applied to the Navigation container.Enable responsive menu in the controls sidebar:
Ensure that the block spacing still applies to the menus in wider-width screens (not the overlay)
Screenshots
Types of changes
Adds block spacing support to the navigation block
Checklist:
*.native.jsfiles for terms that need renaming or removal).