Navigation overlays: Social Icons block gap is being zeroed out (margin-top: 0;)

[bgardner]

Description

When adding the Social Icons block in a Navigation Overlay template part, the blockGap is being zeroed out on the front end. This is likely caused by the following CSS, which is targeting the Navigation UL, and inadvertently also hitting the ul.wp-block-social-links:

.wp-block-navigation ul  {
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
}

Step-by-step reproduction instructions

1. Go to Header template part, edit Navigation, create Navigation Overlay part.
2. Add content to the Navigation Overlay, including Social Icons block.
3. Save changes. Go to front end, simulate mobile view, trigger responsive menu icon.
4. View front end Social Icons with zero blockGap being applied.

Screenshots, screen recording, code snippet

Site editor view:

Front end view:

Environment info

WordPress 7.0 RC2, TT5 theme active, Gutenberg not active.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[adithya-naik]

I am working on this.

[adithya-naik]

But I am not facing the issue

[bgardner]

@adithya-naik Is that content inside the Navigation Overlay template part?

[adithya-naik]

@adithya-naik Is that content inside the Navigation Overlay template part?

NO @bgardner , Actually Iam unable to reproduce it exactly as yours

[adithya-naik]

you said : "Go to Header template part, create Navigation Overlay part."

But see,Iam unable to find Header and I dont know how to make it Navigation Overlay

[bgardner]

@adithya-naik My apologies, I just updated the OP. You need to create a Navigation Overlay through editing the Navigaitom block. There's a setting in the sidebar where this can be created. See screen below:

[dpmehta]

@bgardner I am not able to find option which you mentioned that is "OVERLAY TEMPLATE", i have shared screenshot below can you please share more details or what am i missing ?

[karthikeya-io]

I am not able to find option which you mentioned that is "OVERLAY TEMPLATE",

To use custom overlays for navigation, you should be on WP 7.0 or have Gutenberg active. Maybe you are on WP 6.9 without Gutenberg. You can create a custom overlay template from the navigation block sidebar settings.

You can also test the overlays here: Playground

I can reproduce this issue. It happens due to the following CSS applied to all ul elements inside the navigation:

gutenberg/packages/block-library/src/navigation/style.scss

Lines 16 to 25 in d4f3ec5

	.wp-block-navigation {
	position: relative;
	// Normalize list styles.
	ul {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 0;
	}

Maybe we can fix this by applying margin: 0 to the navigation ul element like this, but it prevents it from applying to inner ul elements. Looking for other opinions on this.

ul.wp-block-navigation__container {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
		padding-left: 0;
	}

[bgardner]

Any chance you can submit a PR for that @karthikeya-io?