Dequeue FSE global styles

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

WordPress 5.9 introduced a Global Styles file, which is meant to be populated by a theme's theme.json file. It's still enqueued on non-FSE themes, and is causing a couple small issues in the Newspack theme:

• It shares a white background colour class with the theme, and the !important it uses overrides the theme's button hover styles (Button block: !important in WP 5.9+ CSS variables overrides hover styles #1713).
• They're part of an issue between the theme, Newsletters plugin and how non-FSE theme editor font styles are handled. Dequeuing them is not a complete fix, but it does correct the font-sizes on the front-end. As part of this, I've also added a temporary x-large font size class to the theme so sites experiencing the editor font sizing mismatch will still have the correct font sizes applied on the front-end (Default font sizes from WP 5.9+ overriding theme #1718, Newsletter's editor-font-sizes overrides non-FSE theme editor-font-sizes in WP 5.9.1 newspack-newsletters#755).
• AMP is not tree-shaking these styles because they're CSS variables. The styles add 3,231b (4.3% of 75kb) to a site's front-end, or more if any of the overlapping classes are used (like the colour white, and the small, large, and x-large font sizes).

Closes #1713; see #1718 and Automattic/newspack-newsletters#755.

How to test the changes in this Pull Request:

1. Start on a test site running the Newsletter plugin.
2. Create and publish a blank page. Either view the non-AMP version of the page and confirm the presence of a global-styles-inline-css style tag in the source, or confirm those styles are there in AMP's CSS usage.
3. In the editor, view source and confirm the presence of a global-styles-css-custom-properties-inline-css style tag.
4. To test out the issue in Button block: !important in WP 5.9+ CSS variables overrides hover styles #1713, add a button block and make the background white and the text colour one of the other colours in the editor palette. On the front end, try hovering over the button; note that it turns white-on-white.
5. To test out the issue in Default font sizes from WP 5.9+ overriding theme #1718, add multiple Heading blocks, and make one small, one large, and one x-large; note how they're smaller than the theme's defaults (small: 16px, large: 36px, huge: 44px), and are actually picking up the sizes set in the Newsletter (small: 12px, large: 24px, x-large: 36px). They should be too small in the editor and on the front-end.
6. Apply the PR and run npm run build.
7. Confirm that the button hover is now working as expected -- rather than being white on white, it is now white on #111.
8. Confirm that the font sizes on the front end line up with the theme's settings (small: 16px, large: 36px, x-large/huge: 44px).
9. With AMP disabled, view the source and confirm global-styles-inline-css is no longer loaded, or confirm those styles are no longer there in AMP's CSS usage.
10. In the editor, view source and confirm that the global-styles-css-custom-properties-inline-css styles are no longer getting loaded.
11. Out of an abundance of caution, confirm that theme/block styles that did appear in the global styles still work as expected.
    • The theme-based custom colours (primary, secondary, and the greyscale)
    • Gradients available in the editor palette
    • Font sizes (I recommend deactivating Newsletters before testing, to untangle Newsletter's editor-font-sizes overrides non-FSE theme editor-font-sizes in WP 5.9.1 newspack-newsletters#755 from the mix).
    • Duo-tones (can be tested by adding an image block, and clicking on the circular/starburst icon in the toolbar, then selecting one of the options):

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

This fixes the issues described and I'm still able to use the dutone and gradient options in the editor. 👍

[laurelfulford]

Thanks @dkoo!

[matticbot]

🎉 This PR is included in version 1.56.2-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.56.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀