Pattern Preview: Update styles to match editor.

[ryelle]

Fixes #416 — The pattern content rendered in the preview frame is pulled from the API, and is only the post content. On regular page loads, there are extra styles output in the footer for alignment, spacing, and link color (if applicable). These were not being added to the preview, causing differences between editor & frontend. Additionally, the default preset classes were not loaded, so background colors, etc, were not applied.

1. To fix the extra style tag issues, I've copied over the gutenberg code to render these styles, and am injecting them directly into the content. This should only be a temporary fix, until the Style Engine work is done, since one of the bugs mentioned is this issue with API responses.
2. The preset classes were not loaded (due to unregistering global-styles in wporg-mu-plugins), so those are loaded in when generating the styles to inject into the preview iframe. They're immediately unregistered to avoid overwriting the properties for the header & footer (see Unregister the global-styles from classic themes wporg-mu-plugins#166).

Screenshots

Editor	Before	After

How to test the changes in this Pull Request:

1. Create a new pattern
2. Add a group block and give it a background color or gradient
3. Add more content inside, a Row or Buttons would work
4. Change the default alignment of items, for example, to center
5. Once you have a customized pattern, save it
6. Preview it on the frontend
7. It should match the editor view

[StevenDufresne]

I was able to create a discrepancy with this block:

<!-- wp:group {"align":"wide","gradient":"cool-to-warm-spectrum"} -->
<div class="wp-block-group alignwide has-cool-to-warm-spectrum-gradient-background has-background"><!-- wp:buttons {"align":"wide","layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons alignwide"><!-- wp:button {"backgroundColor":"luminous-vivid-amber","textColor":"black","width":50,"align":"center","style":{"spacing":{"padding":{"top":"20px","right":"60px","bottom":"20px","left":"60px"}},"border":{"radius":"40px"}},"className":"is-style-fill"} -->
<div class="wp-block-button aligncenter has-custom-width wp-block-button__width-50 is-style-fill"><a class="wp-block-button__link has-black-color has-luminous-vivid-amber-background-color has-text-color has-background" style="border-radius:40px;padding-top:20px;padding-right:60px;padding-bottom:20px;padding-left:60px">Button 1</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

Editor	Preview

[ryelle]

@StevenDufresne It looks like this is a bug from Gutenberg — I can reproduce the same issue across themes in the post editor on another test site, a style applied to buttons with aligncenter overrides the custom width applied. How did you add the "align":"center" attribute on to the button?

[StevenDufresne]

@StevenDufresne It looks like this is a bug from Gutenberg — I can reproduce the same issue across themes in the post editor on another test site, a style applied to buttons with aligncenter overrides the custom width applied. How did you add the "align":"center" attribute on to the button?

I can't remember specifically, but everything was done through the interface. I can try to retrace my steps if you would like.

[ryelle]

I can't remember specifically, but everything was done through the interface. I can try to retrace my steps if you would like.

Hm, don't worry about it for now— we know it's not a bug with the creator, so if you did manage to reproduce it, it should be reported up to gutenberg.