Global Styles: Make the default layout work as a preset.

[youknowriad]

Presets (colors and font sizes) work this way:

• generates a classname and some styles (potentially CSS vars)
• Apply the classname to the element where they are applied.

The default layout works a bit differently

• Styles are injected inline with a unique identifier attached to each container, this maps the behavior of custom values instead of presets.

Can we update the default layout to use a "preset-like" approach, this is:

• generate a classname for the default preset and add the styles to the theme.json stylesheet.
• apply that classname to the places where it's used.

The goal here is to clarify that it's actually a preset but making it work like all presets and also to have purer CSS. (less inline ones)

cc @ntsekouras @oandregal @jorgefilipecosta

[cbirdsong]

I would be curious to know why was the button block's behavior moved from classes to these repetitive injected .wp-container- styles, as I just had to restore the classes it previously generated via block filters.

[andrewserong]

I believe the intent behind this issue has largely been resolved as of #40875, set to land in WordPress 6.1. I'll close out this issue now, and we can open up new issues for subsequent follow up tasks.