Site Editor: Make sure theme styles and Global Styles work appropriately on both Atomic and Simple

[Copons]

When a site moves to Atomic, not all styles work as expected.

• The site loses all the styles, reverting to the browser’s default CSS and fonts.
  This might be caused by the wp_global_styles CPT not being transferred, or by the generated CSS not being enqueued appropriately or in the correct order (e.g. messing up the CSS3 variables).

• The color palette in Global Styles reverts to the Gutenberg default (no more custom colors, no more theme palette).

See also p58i-aCg-p2#comment-50940

EDIT: Global Styles has some issues on Simple as well!

Main Tasks

• Global Styles: enqueue styles later so theme css can load first WordPress/gutenberg#34147

Other Tasks

• 738-gh-Automattic/wpcomsh
• Page Optimize Bail: Avoid asset concatenation when opening the site editor page-optimize#66
• Global Styles: Fix per block text color customization for cover block WordPress/gutenberg#34188
• Seedlet Blocks: Fix block-level global styling for site title block themes#4446
• Blockbase: Refactor Button Color styles themes#4439
• Global Styles: Fix block-level global styles color panels WordPress/gutenberg#34293

[jeyip]

Steps to Reproduce

• Create an FSE enabled site ( Link )
• Navigate to the site editor
• Modify global styles like text color, font size, and line height
• Save the changes
• Purchase a business plan
• Install the "Hello Dolly" plugin to take the site atomic
• Navigate to the site editor again and verify that some global styles aren't being applied correctly
• Note: I'm having trouble reproducing issues where the color palette isn't transferred.

Video: Will upload soon

Technical Details

• Global styles work as expected on dotcom simple sites and on the dockerized WordPress instance for local Gutenberg development.
• Global styles on atomic, however, don't behave as expected. I have confirmed one issue so far (Problem 1). I haven't completely confirmed nor completely disproven the second issue (Problem 2).
• Problem 1: For atomic sites, global styles are being overridden by css resets from Gutenberg
  • It appears as if recent changes to how css resets are enqueued might be the cause ( Link 1 and Link 2 )

• Problem 2: Global styles CPT names contain theme paths which aren't updated during an atomic transfer. These theme paths may need to be updated depending on how global styles are retrieved.
  • From what I can tell, global styles are carried over and evaluated correctly after an atomic transfer, as long as the overriding styles from Problem 1 are removed.

Proposed Fixes

• Potential fix Site Editor: Remove styles reset as script dependency WordPress/gutenberg#33522
• Alternative approaches p1626716595094500-slack-CHN6J22MP

[jeyip]

Status Update

• We're seeing some oddities with block-specific global styles on atomic + simple sites. Some blocks have their global styles overridden. More context here.