Fixes styling issues in WordPress 5.9 modifying global styles code.

WebMan Design | Oliver Juhas

<h4>Plugin’s purpose</h4>
<p>This plugin fixes styling issues introduced in WordPress 5.9.</p>
<h4>👍 When to use this plugin</h4>
<ul>
<li>✅ Your WordPress is of version 5.9 or newer</li>
<li>✅ You are using a theme that supports block editor (Gutenberg) features such as preset font sizes and color palette</li>
<li>✅ Your theme does not support <a href="https://wordpress.org/news/2022/01/josephine/" rel="ugc">full site editing (FSE) feature</a> (from <a href="https://github.com/WordPress/gutenberg/issues/38252" rel="nofollow ugc">conversation about reported issues</a> it seems they affect Gutenberg-ready themes only and FSE themes should be fine)</li>
<li>✅ You experience font size or color issues on your website after WordPress 5.9 update</li>
<li>✅ Your theme has not been updated to fix these issues</li>
</ul>
<h4>✋ When NOT to use this plugin</h4>
<ul>
<li>You are not using WordPress 5.9 or newer</li>
<li>Your theme was updated and is fixing the issues</li>
<li>Your theme does not support block editor features (such as preset color palette or font sizes)</li>
<li>Your theme is <a href="https://wordpress.org/news/2022/01/josephine/" rel="ugc">full site editing (FSE) ready</a></li>
<li>You don’t experience any font size or color issues on your website after updating to WordPress 5.9</li>
</ul>
<h4>Technical info</h4>
<p>WordPress 5.9 started applying <code>!important</code> rule and is setting up CSS properties (CSS variables) within <code>body</code> selector in its global styles code. This rises the global styles specificity and may override styles coming from themes and plugins. (For more info about this change check <a href="https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/#changes-to-the-global-stylesheet" rel="nofollow ugc">“Updates for Settings, Styles, and theme.json” article</a>.)</p>
<p><strong>Global Styles Mods</strong> plugin lowers the specificity of WordPress 5.9 global CSS styles by removing <code>!important</code> rules and changing <code>body</code> to <code>:root</code> selector for setting up WordPress CSS properties (CSS variables).</p>
<p>It also enqueues the global styles early enough so your theme or plugin stylesheet have a better chance to override global styles with minimal effort.</p>
<p>The fix applied is coming from issue <a href="https://github.com/WordPress/gutenberg/issues/38252#issuecomment-1024348024" rel="nofollow ugc">conversation in Gutenberg GitHub repository</a>.</p>


Global Styles Mods – WordPress 5.9 fix

If your theme was built prior to WP 5.9, you might find that updating to WP 5.9+ breaks some styling on your site. This plugin fixes it.

Alternatives to Global Styles Mods – WordPress 5.9 fix

Top alternatives