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: Support gap via theme.json #34525

Closed
Tracked by #35521
jasmussen opened this issue Sep 3, 2021 · 3 comments · Fixed by #35277
Closed
Tracked by #35521

Navigation: Support gap via theme.json #34525

jasmussen opened this issue Sep 3, 2021 · 3 comments · Fixed by #35277
Assignees
Labels
[Block] Navigation Affects the Navigation Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress

Comments

@jasmussen
Copy link
Contributor

What problem does this address?

#32366 adds a theme.json mechanism to provide a a blockGap value to space out items in a container. Spacing using gap has the benefit of letting you not worry about the first or last elements in a container, or complex nth-child margins in containers that wrap.

#32367 refactored the Navigation block to already use gap CSS to space items out.

What is your proposed solution?

As a next step, it would be nice to connect the block with theme.json, so that the block becomes a flex container with a custom gap value, such as this:

"core/navigation": {
	"spacing": {
		"blockGap": "2em"
	}
}

#33991 also provided a UI for the gap control, which would benefit here as well.

@jasmussen jasmussen added [Block] Navigation Affects the Navigation Block Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Sep 3, 2021
@ramonjd
Copy link
Member

ramonjd commented Sep 30, 2021

I took a quick look at this.

The gap inline style will be applied to the containing <nav /> of the block by default.

The flex container is a child of the block container.

Screen Shot 2021-09-30 at 8 37 43 pm

We could use __experimentalSkipSerialization to apply the styles to the inner flex container. There's a precedent for this. See for example the Search Block #30227.

There's a growing list of blocks now that need a way to apply block support styles to inner children.

As I understand it, the issue lies in the fact that, even if we use __experimentalSkipSerialization, styles generated from the theme.json or Global Styles can’t target the appropriate elements. So changing the value of blockGap in Global Styles won't do anything. See for example this reported issue #34216

There are ongoing discussions about ways to implement a solution for this very challenge:

#33255
#32417

@jasmussen
Copy link
Contributor Author

Thanks for looking! There's an additional discussion about which container is to handle properties of navigation elements here, which might or might not be relevant, but would likely be good reading: #34496 (comment)

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 1, 2021
@ramonjd
Copy link
Member

ramonjd commented Oct 1, 2021

Thanks for looking! There's an additional discussion about which container is to handle properties of navigation elements here, which might or might not be relevant, but would likely be good reading: #34496 (comment)

Thanks for linking to that discussion!

Inspired by the current work around the Buttons Block, which faces similar challenges, I've applied the CSS var to the corresponding containers in #35277

It works okay, but I haven't yet put it through its paces. :)

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 [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants