WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 6 months ago

Last modified 5 months ago

#49613 closed defect (bug) (fixed)

Twenty Nineteen: Editor style interferes with navigation menu.

Reported by: Joen Owned by: ianbelanger
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: good-first-bug has-patch
Focuses: css Cc:

Description

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.

Attachments (3)

how it should be.png (21.4 KB) - added by Joen 7 months ago.
How it should look
how it is.png (22.8 KB) - added by Joen 7 months ago.
How it is
49613.diff (851 bytes) - added by kjellr 6 months ago.

Download all attachments as: .zip

Change History (15)

@Joen
7 months ago

How it should look

@Joen
7 months ago

How it is

#1 @ianbelanger
7 months ago

  • Focuses css added
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from TwentyNineteen: Editor style interferes with navigation menu. to Twenty Nineteen: Editor style interferes with navigation menu.
  • Version trunk deleted

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.

#2 @Joen
7 months ago

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.

#3 @ianbelanger
7 months ago

  • Keywords good-first-bug added
  • Milestone changed from Future Release to 5.5

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

@kjellr
6 months ago

#4 @kjellr
6 months ago

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:

http://cldup.com/UajVjdLKAF.png

After:

http://cldup.com/6GmBoYK35d.png

#5 @Joen
6 months ago

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!

#6 @kjellr
6 months ago

  • Keywords has-patch added; needs-patch removed

#7 @ianbelanger
6 months ago

  • Owner set to ianbelanger
  • Status changed from new to reviewing

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

#8 @ianbelanger
6 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 47587:

Bundled Themes: Twenty Nineteen editor style interferes with navigation menu block.

Update editor styles to prepare for changes coming to the editor in 5.5. Currently the issue is only present when using the latest version of the Gutenberg plugin.

Props kjellr, Joen.
Fixes #49613.

#9 @ianbelanger
6 months ago

  • Keywords fixed-major added
  • Milestone changed from 5.5 to 5.4.1
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#10 @ianbelanger
6 months ago

  • Keywords fixed-major removed
  • Milestone changed from 5.4.1 to 5.5
  • Resolution set to fixed
  • Status changed from reopened to closed

Closing as fixed since this does not need to be backported because the issue will only exist in 5.5 or later versions.

#11 @ianbelanger
6 months ago

  • Milestone changed from 5.5 to 5.4.2

#12 @SergeyBiryukov
5 months ago

  • Milestone changed from 5.4.2 to 5.5
Note: See TracTickets for help on using tickets.