Build an endpoint that can return color-customized theme previews

[vishnugopal]

See: pcmemI-p2-p2#comment-598

Todo:

• [ ] Define which color variables we want to override.
• [ ] Refactor the current customize_page method. Simply adding more parameters and logic is not desirable, this method needs to be refactored. See: https://opengrok.a8c.com/source/xref/wpcom/wp-content/lib/nux-helpers/class-template-helpers.php?r=29f457af#416
• [ ] Add the logic for customizable color variables to the endpoint.

[jeroenpf]

I've been looking into the way the theme preview tool works. There is an endpoint that generates a theme preview. This endpoint has the ability to 'inject' block patterns into the markup. For verticalization, the idea is that there will be a library of block patterns that can be combined. Each vertical's theme preview is composed of its own combination of appropriate block patterns.

Under the hood, a theme preview is generated by loading a demo site with the given theme installed and then injecting HTML snippets into the resulting HTML.

The code already has the ability to set a custom font, which is done by appending a style element to the head section of the markup. Variable declarations, overriding the theme's default settings, are added to the style element.

To override colors, a similar approach can be taken. We can define our own color-related CSS variable declarations and inject these into a style element in the head section of the HTML.

The existing logic to generate themes by modifying the demo HTML is already getting complicated. The method for this accepts 9 parameters and contains more than 200 lines of code. It is worthwhile to attempt some refactoring here instead of simply adding more parameters and conditions.

[vishnugopal]

Discussion:

• The diff has now been reviewed and accepted: D79295-code
• Fixed XSS injection possibility
• background, foreground, primary, secondary is what is configurable
• The color usage is not consistent across themes, themes use different variables for link colors, see: pcmemI-ys-p2#comment-639