Gutenberg Inline CSS

[Steve]

Hello this is my first post!

I've been reading the code for Genesis and like it a lot, but I am confused by this:

<link rel='stylesheet' id='dddddd-gutenberg-css'  href='https://dddddd.com/wp-content/themes/divkid/lib/gutenberg/front-end.css?ver=3.1.0' type='text/css' media='all' />
<style id='dddddd-gutenberg-inline-css' type='text/css'>
.ab-block-post-grid .ab-post-grid-items h2 a:hover {
	color: #0073e5;
}

.site-container .wp-block-button .wp-block-button__link {
	background-color: #0073e5;
}

.wp-block-button .wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link:not(.has-background):focus,
.wp-block-button .wp-block-button__link:not(.has-background):hover {
	color: #ffffff;
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link {
	color: #0073e5;
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link:focus,
.site-container .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: #2396ff;
}		.site-container .has-small-font-size {
			font-size: 12px;
		}		.site-container .has-normal-font-size {
			font-size: 18px;
		}		.site-container .has-large-font-size {
			font-size: 20px;
		}		.site-container .has-larger-font-size {
			font-size: 24px;
		}		.site-container .has-theme-primary-color,
		.site-container .wp-block-button .wp-block-button__link.has-theme-primary-color,
		.site-container .wp-block-button.is-style-outline .wp-block-button__link.has-theme-primary-color {
			color: #0073e5;
		}

		.site-container .has-theme-primary-background-color,
		.site-container .wp-block-button .wp-block-button__link.has-theme-primary-background-color,
		.site-container .wp-block-pullquote.is-style-solid-color.has-theme-primary-background-color {
			background-color: #0073e5;
		}		.site-container .has-theme-secondary-color,
		.site-container .wp-block-button .wp-block-button__link.has-theme-secondary-color,
		.site-container .wp-block-button.is-style-outline .wp-block-button__link.has-theme-secondary-color {
			color: #0073e5;
		}

		.site-container .has-theme-secondary-background-color,
		.site-container .wp-block-button .wp-block-button__link.has-theme-secondary-background-color,
		.site-container .wp-block-pullquote.is-style-solid-color.has-theme-secondary-background-color {
			background-color: #0073e5;
		}
</style>

Does anyone know if there is a good reason why there is a Gutenberg css file and Gutenberg inline css in the Genesis / Genesis Sample theme?

Please be as technical as you like - thanks!!

http://local

[Steve]

So, digging deeper I have found:

lib/gutenberg/inline-styles.php

which as far as I have worked out seems to be taking admin theme config options and writing the css values to the head as inline styles.

This is totally unnecessary for me, I don't need the config options from the admin panel, the values won't change once set and I would much rather do that in a theme code file. And preferably get some kind of css compiler running to generate one minified css file rather than all the little ones (but that's probably a different question).

Has anyone already removed these inline styles and knows how to go about it?

I would very much appreciate any thoughts on this matter. Again, please be as technical as you like, I will get there eventually, I just don't want to re-invent the wheel so to speak 🙂

Thank you!

[Author]

Posts