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.

[westonruter]

This issue has arisen again when Gutenberg 11.3.0 is active:

[westonruter]

@pierlon Is there a quick fix that would address this for 2.1.4?

[pierlon]

Just created #6570 as a fix.

[westonruter]

My cherry-pick (d4d2a7b) onto the 2.1 branch failed: https://github.com/ampproject/amp-wp/runs/3444490820#step:7:109

It appears due to the Gutenberg packages not being updated.

@pierlon Is this something that can be easily backported to 2.1.x? Or is it too much of a headache?

[pierlon]

It seems all that's needed is to update the JS test snapshots to match the version of the VisuallyHidden component in that branch.

[westonruter]

Great! Fixed as of #6575.

[westonruter]

Humm. With the latest Gutenberg active, I'm seeing the same issue still on 2.1.4-alpha:

[pierlon]

Can confirm, looking into this.

[westonruter]

The issue is not present on 2.2-alpha:

2.1.4-alpha	2.2-alpha

[westonruter]

I just noticed this issue is also present in the Reader theme carousel pagination:

[pierlon]

The version of the @wordpress/components package on the 2.1 branch does not include the styles for the VisuallyHidden component, so I'm working on updating the package to the latest stable version. That will also mean updating all the other Gutenberg packages to ensure compatibility between the packages.

[westonruter]

Fixed for 2.1.4 via #6585. Ready for QA.

[westonruter]

✅ WordPress 5.6.4 w/ Gutenberg

Settings Screen	Onboarding Wizard	Post Editor

✅ WordPress 5.7.2 w/ Gutenberg

Settings Screen	Onboarding Wizard	Post Editor

✅ WordPress 5.8 w/ Gutenberg

Settings Screen	Onboarding Wizard	Post Editor

[westonruter]

✅ WordPress 5.6.4 w/o Gutenberg

Settings Screen	Onboarding Wizard	Post Editor

✅ WordPress 5.8 w/o Gutenberg

Settings Screen	Onboarding Wizard	Post Editor

[westonruter]

I've tested various screens in the different versions and everything seems to check out.

@delawski Maybe you have some other areas in mind to test as well. Otherwise, I'm moving this to QA Passed.

[delawski]

@delawski Maybe you have some other areas in mind to test as well. Otherwise, I'm moving this to QA Passed.

All good here 👍