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 with no defined block gap doesn't render properly in the editor #54994

Closed
properlypurple opened this issue Oct 3, 2023 · 2 comments
Labels
[Block] Navigation Affects the Navigation Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended

Comments

@properlypurple
Copy link
Contributor

Description

If a theme defines a navigation block without any block gap defined, it should inherit the default block gap, and render that in the editor and the frontend. Since Gutenberg 16.7.0, the gap doesn't render in the editor.

Step-by-step reproduction instructions

  1. Start with a fresh site on the 2023 theme, without the Gutenberg plugin
  2. Go to Appearance > Editor, and observe the navigation
  3. Install and activate Gutenberg 16.7.
  4. Go back to Appearance > Editor and observe the navigation.

Screenshots, screen recording, code snippet

In versions before 16.7.0, this css is being applied to the navigation in the editor

.wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-dialog {
  gap: inherit;
}

And

.editor-styles-wrapper {
  --wp--style--block-gap: 1.5rem;
}

These are not present in Gutenberg 16.7.0. The frontend is unaffected in both cases.

Screenshot with Gutnberg 16.6
image

Screenshot with Gutenberg 16.7
image


Please note that this is not observable if the theme specifies a custom block gap for the navigation block like this

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"},"style":{"spacing":{"blockGap":"1.5rem"}}} /-->

Environment info

  • WP 6.3.1
  • Gutenberg 16.7.0

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

@properlypurple properlypurple added [Type] Bug An existing feature does not function as intended [Block] Navigation Affects the Navigation Block CSS Styling Related to editor and front end styles, CSS-specific issues. labels Oct 3, 2023
@properlypurple properlypurple changed the title Navigation block with no defined block gap, doesn't render properly in the editor Navigation block with no defined block gap doesn't render properly in the editor Oct 3, 2023
@Mamaduka
Copy link
Member

Mamaduka commented Oct 3, 2023

I think a similar issue was fixed today. See #54891 and #54992.

@properlypurple
Copy link
Contributor Author

Looks like it's the same issue. I'll close this one. Thank you @Mamaduka !

Dupicate of #54891

@properlypurple properlypurple closed this as not planned Won't fix, can't repro, duplicate, stale Oct 3, 2023
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 CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

2 participants