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

Seedlet: Fix navigation block styles in editor #5199

Merged
merged 6 commits into from
Dec 22, 2021
Merged

Conversation

mikachan
Copy link
Member

Changes proposed in this Pull Request:

This PR removes some background and margin properties from the navigation container in the editor for Seedlet. This fixes a bug where the navigation block looks different between the front end and the editor when a background is applied to the block.

It also fixes the following:

  • fixes an issue with the link hover color sometimes being the same color as the background
  • removes a bottom border / underline from the default navigation block

Before:

Editor Front end
image image

After:

Editor Front end
image image

Related issue(s):

Fixes #3684

@mikachan mikachan self-assigned this Dec 15, 2021
@@ -16,23 +20,33 @@
}
}

.wp-block-navigation-item {
> a {
border: 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this going to play nicely with #5195 ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm.. possibly, although it looks like the navigation may need to override the text-decoration styles instead of the border.

@scruffian
Copy link
Member

This works in my testing, but I'm not that keen on adding the extra CSS. What happens if we leave it out?

@scruffian
Copy link
Member

If I remove the extra CSS it looks pretty different to the frontend:
Screenshot 2021-12-20 at 10 43 15

I wonder if we can fix this in the block?

@mikachan
Copy link
Member Author

I wonder if we can fix this in the block?

Ah yeah, I was thinking this was very Seedlet-specific. I'll try playing around with the block now!

@mikachan
Copy link
Member Author

Opened a GB PR to hopefully fix the spacing issue here: WordPress/gutenberg#37587

@mikachan mikachan merged commit 58617b3 into trunk Dec 22, 2021
@mikachan mikachan deleted the fix/seedlet-nav-editor branch December 22, 2021 16:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Seedlet: Navigation Block layout is different on editor and front-end
2 participants