Activating Gutenberg messed backend styling

[milindmore22]

Bug Description

Activating Gutenberg messed AMP settings page styling a little bit

Expected Behaviour

Activating any plugin should not have effects on settings

Steps to reproduce

1. Install and Activate AMP and Gutenberg plugin
2. Visit the AMP settings page
3. See Template Mode toggle.

Screenshots

Additional context

• WordPress version: 5.7.2
• Plugin version: 2.1.1
• Gutenberg plugin version (if applicable): 10.6.0
• AMP plugin template mode: Transtional Mode
• PHP version: 7.4
• OS: Mac Os
• Browser: Chrome
• Device: Macbook Air

---

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

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

Thanks. I saw this too but I wasn't sure if it was a problem with my Gutenberg build or it was a new issue.

[pierlon]

Might be because we're bundling the CSS from @wordpress/components for the settings page. Investigating...

[westonruter]

There is a difference in styling is due to a missing CSS rule in Gutenberg (gutenberg/build/components/style.css) which is present in core (wp-includes/css/dist/components/style.css):

[pierlon]

Currently working on migrating used styles from wp-components into the plugin so we don't need to rely on it. If that's the only style rule missing we could add it and go ahead with that in the interim.

[westonruter]

Present in Gutenberg 10.5.4: https://github.com/WordPress/gutenberg/blob/v10.5.4/packages/components/src/visually-hidden/style.scss
And present in 10.6.1: https://github.com/WordPress/gutenberg/blob/v10.6.1/packages/components/src/visually-hidden/style.scss
But this file is missing in v10.6.0. Nevertheless, the styles are still broken in v10.6.1.

It looks like this problem was introduced in WordPress/gutenberg#31244.

[pierlon]

It looks like this problem was introduced in WordPress/gutenberg#31244.

That PR has just been reverted via WordPress/gutenberg#31882. I'll continue the work on migrating the styles into the appropriate Gutenberg components but I think this issue can be punted to the next release for now.

[pierlon]

I can confirm that the Settings screen is back to normal for now (when on 67f2cf8 and WordPress/gutenberg@b5f6955):

[westonruter]

Confirmed. Fixed in Gutenberg v10.6.1.

[westonruter]

@pierlon this is being fixed in what you're doing to fix #6490?

[pierlon]

Oh yes that would resolve this issue as well. I'll create a separate PR with those changes then as they've become mutually exclusive to the actual issue I was fixing.