Critical problems with styles can lead to issues where every page on a site looks broken and messy in WordPress.
It is a very bad for user experience.
Unfortunately, there are various reasons why styles can look broken on the site. Today, I would like to discuss one specific reason and a possible solution.
Style issues caused by plugins
Plugins play a key part in a WordPress site since they help to enhance the experience for users and site owners.
However, sometimes plugins can break your site.
Disable Gutenberg
Disable Gutenberg disables the Block editor (Gutenberg) and replaces it with the Classic editor.
Besides disabling the Block editor in a dashboard, the plugin can also turn off functionality associated with the editor.
For instance, it disables WordPress global styles, set via theme.json. This is a new mechanism to configure global styles, introduced in WordPress 5.8.
At Themes Harbor, we use theme.json not only to provide a great support for the Block editor in our themes but also to set style properties in a structured way.
When the plugin turns off global styles then the entire site starts to look broken because a webpage cannot locate base style properties.
To avoid such style issues but keep the Block editor disabled, make sure to enable frontend styles:
- In dashboard, go to Settings → Disable Gutenberg.
- Locate Enable Frontend option. If the option is missing then toggle More Tools to display a full list of available options.
- Enable frontend Gutenberg/block styles.
- Save your changes.
Conclusion
Hopefully, this tutorial was helpful for you to learn one of possible reasons of broken styles in a WordPress site.
I will keep researching other reasons that can cause critical style issues in WordPress. All my findings on this matter will be posted in this article.
If you have experienced any critical style issues on your WordPress site then I would love to hear your solution in the comments below.
Leave a Reply