Twenty Nineteen: Editor style interferes with navigation menu.

[Joen]

This issue is only present in the latest master version of the Gutenberg plugin.

The following rule is present in the TwentyNineteen editor style:

.wp-block .wp-block {
	width: 100%;
}

This rule was created, if I recall correctly, to adjust the dimensions of nested blocks, and override another rule that set the width of top level blocks to a complex calc rule.

As of ​https://github.com/WordPress/gutenberg/pull/20729, however, this rule now unintentionally targets navigation menu items, which should show up horizontally in a flow. Specifically, the width of the .wp-block-navigation-link must be auto, or it won't work.

Suggest refactoring the rule above to only target top level blocks in different manner, or use the same rule but apply width: initial; instead, if possible.

[Joen]

How it should look

[Joen]

How it is

[ianbelanger]

Thanks for reporting this @Joen. Do you know when this is planning to be merged into core? Just so we can be ready for it when the time comes.

[Joen]

The change is likely to land in the plugin for next weeks release. But it is extremely unlikely to be an issue in core until version 5.5.

[ianbelanger]

Great! Thanks for the quick response. I'll mark it for 5.5.

[kjellr]

Thanks, @Joen. 49613.diff​ changes that rule to initial instead of 100%, and it appears to work fine. Tested with a bunch of Group, Cover, and Columns blocks, and haven't noticed any issues.

Before:

After:

[Joen]

That patch looks beautiful to me Kjell, thank you! I also verified that the purpose it initially served — to style only top level blocks but not sublevel blocks — works, insofar as nested blocks still look right. Ship it!

[ianbelanger]

Thanks @kjellr and @Joen, I'll get this reviewed and committed.