Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation block: Add a way to control spacing #23294

Closed
alaczek opened this issue Jun 19, 2020 · 7 comments
Closed

Navigation block: Add a way to control spacing #23294

alaczek opened this issue Jun 19, 2020 · 7 comments
Labels
[Block] Navigation Affects the Navigation Block Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.

Comments

@alaczek
Copy link

alaczek commented Jun 19, 2020

Site headers and footers often require tight control over spacing (typically a combination of padding, margin, and line-height) to achieve the desired look. Ideally, we'd have some way of controlling both vertical and horizontal spacing.

Vertical Spacing
Vertical spacing comes into play in many popular header design patterns, where navigation is displayed on the same line as site title and /or tagline:

image

image

image

Horizontal spacing
Control over spacing between nav menu items is an important aspect of a site header design. It would enable us to create designs like these (hat tip to @iamtakashi for these):

image

image

image

@annezazu annezazu added [Block] Navigation Affects the Navigation Block [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Type] Enhancement A suggestion for improvement. labels Jun 22, 2020
@annezazu annezazu added this to Inbox in Navigation editor via automation Jun 22, 2020
@draganescu draganescu moved this from Inbox to Design in Navigation editor Jul 8, 2020
@talldan talldan added the Needs Design Needs design efforts. label Jul 8, 2020
@draganescu
Copy link
Contributor

draganescu commented Jul 10, 2020

This issue has been discussed on Slack in the weekly Navigation Sync meeting. The resolution was Needs Design because it's a matter of how the overall editor experience is in relation to controls for padding and margins for blocks.

Recently, the cover block has had padding controls (spacing) added. Should we reuse that for the navigation block?

@draganescu draganescu removed the [Feature] List View Menu item in the top toolbar to select blocks from a list of links. label Jul 14, 2020
@draganescu draganescu removed this from Design in Navigation editor Jul 15, 2020
@apeatling
Copy link
Contributor

Recently, the cover block has had padding controls (spacing) added. Should we reuse that for the navigation block?

I think the same controls should be used. Ideally all padding and margin controls are universal.

@shaunandrews shaunandrews added this to Inbox in Navigation editor via automation Aug 18, 2020
@draganescu
Copy link
Contributor

Howdy @shaunandrews, I will remove this from the Navigation project as it is not a requirement of the editor.

@draganescu draganescu removed this from Inbox in Navigation editor Aug 19, 2020
@jasmussen
Copy link
Contributor

You can now use space-between to control horizontal spacing:

Screenshot 2021-01-26 at 09 38 12

Would adding a line-height control, perhaps both to navigation and site logo / site title blocks help accomplish the vertical spacing issue?

@priethor
Copy link
Contributor

Adding the line-height control would definitely help achieve many design patterns like the ones listed in the opening post in a more friendly way than adding vertical spacer controls before and after the navigation block. I think it's something worth adding.

@shaunandrews
Copy link
Contributor

With the new space-between option, and the incoming updates to the spacer block (#29133) I think we're pretty close to resolving this issue.

@jasmussen
Copy link
Contributor

Since #29133 is merged, I'm closing this one. Please reopen, or open a new issue, if an aspect was missing.

Screenshot 2021-03-15 at 12 40 29

Screenshot 2021-03-15 at 12 40 54

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

8 participants