Add: Automatic editor styles generation #18028
This PR implements a mechanism to auto-generate colors and font sizes styles (and gradients will also support this when merged).
The API is the following:
The block editor adds the styles in an inline style element. This behavior is far from perfect because the browser does not cache the styles. WordPress passes these styles to the browser in every page request. I checked how the customizer loads the custom user style sheet -- It also uses inline styles. Themes that allow the user to dynamically change colors (e.g: 2019) also load the styles in inline styles. More recently, the block styles server API relied on the same system.
I thought about some possibilities:
Create an endpoint that outputs CSS with a never expiring cache header. We would generate a hash of the styles and append it to the URL. When the styles change (e.g: the theme has set dynamic colors depending on the post type ) even though the caching was never expiring, the browser will make a new request because the URL is different.
Generate a hash of the styles and verify if a CSS file exists on the file system for that hash; if not, WordPress generates the styles and writes them to the file-system.
The possibilities I thought are not perfect either, so this PR follows the typical approach used until now.
How has this been tested?
I added a color palette:
I added editor font sizes:
I enabled __experimental-editor-automatic-styles theme support:
I verified that the block editor added the styles for the color pallet and font sizes on the editor and the frontend. We can find the styles by searching on the pages source code for
I enabled __experimental-editor-automatic-styles theme support just for font sizes.
I verified that the block editor added the styles for the font sizes on the editor and the frontend. We can find the styles by searching on the pages source code for
Hi @youknowriad, this solution uses inline styles that need to be sent on every page request so from the performance point of view is inferior to what would happen if a theme included these styles on the theme stylesheet.