Block navigation items distorted

[swissspidy]

Bug Description

Items are currently not aligned in the block navigation, probably due to some change in upstream Gutenberg CSS.

Expected Behaviour

All items in the block navigation should be full width. Upstream CSS changes should ideally not affect our custom block navigation.

Steps to reproduce

1. Create a new page.
2. Add a text block
3. Add a CTA block
4. Notice difference

Screenshots

Additional context

• WordPress version: 5.3 RC 1
• Plugin version: develop
• Gutenberg plugin version (if applicable): 6.7
• AMP plugin template mode:
• PHP version:
• OS:
• Browser: [e.g. chrome, safari]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• All items in the block navigation should be as wide as the CTA item, and not just 2/3rd wide.

Implementation brief

• Make sure padding and margin is as intended for the block navigation list.
• Do this.

QA testing instructions

• Make sure you are using Gutenberg version 6.7.
• Add a text block to a story page.
• Add a CTA block to a story page.
• Verify that the two block titles are aligned in the block navigator.

Demo

• https://youtu.be/Q8oW2u66wcI

Changelog entry

• Improved Gutenberg compatibility

[barklund]

The surrounding UL has gotten some extra spacing:

.editor-styles-wrapper ol,
.editor-styles-wrapper ul {
  padding: inherit;
  padding-left: 1.3em;
  margin-left: 1.3em;
}

I don't know where it comes from, it's just part of a <style> directly added to the DOM. All rules with similar defaults for .editor-styles-wrapper element.

[swissspidy]

@barklund FYI, this explains where those inline styles come from: https://developer.wordpress.org/block-editor/developers/themes/theme-support/#editor-styles

Although I thought we are removing any theme styles from the stories editor 🤔
I'll try to check tomorrow where this is coming from, out of curiosity

We should be able to fix the styles by changing https://github.com/ampproject/amp-wp/blob/5e4ac3befd3ad548fc88ea27feecb23c77656b87/assets/src/stories-editor/components/block-navigation/edit.css accordingly.

[barklund]

@swissspidy, I have done as you suggested and it seems to work.

Should we make it more idiot-proof (resetting more potential custom editor stylings from theme) or is this sufficient?

[swissspidy]

Looks like the culprit is WordPress/gutenberg#17958 and the offending CSS is defined here:

https://github.com/WordPress/gutenberg/blob/2ea41bf03762cd9874e066c5456181d168fddeaf/packages/editor/src/editor-styles.scss#L103-L120

I think your proposed fix is fine for now 👍

[csossi]

Verified in QA