With each release cycle, we see handful of issues where the presenting symptoms include the front end appearing broken. Your navigation may all of a sudden be unstyled or spacing gets lost where it should have been there before. This is usually not a problem with the update itself, but in one of the several caching layers that may be running on your site. There are three common points of failure we've identified.
All three are caching related. Failing to clear all caches after an update can introduce many issues. For example, it could be displaying cached HTML from the previous release but the stylesheet of the new release. This leads to discrepancies and false negatives. We do not recommend doing any site development with caching systems turned on.
Here is more information on each of the troublesome areas:
- There is a known issue with CloudFlare's CSS auto minification system. Sometimes it stops partway through the theme stylesheets. This results in many core styles being missing. Disabling the auto minification is advised if you encounter this.
- CloudFlare caches many different resources. It's possible for the current HTML, CSS and JS resources to be out of sync between the currently installed version and the previous version. Clearing CloudFlare may resolve things appearing broken. Enable CouldFlare's development mode anytime you will be actively working on the site.
If you're running any caching plugins, be sure they are fully purged after any kind of WordPress update (themes, plugins, or WordPress core). See the Best Practices section of updating your themes and plugins to see our recommended steps for updating with a caching plugin installed.
V2 Elements Style Cache
All content that uses V2 elements (including Pro headers/footers) output dynamically generated CSS. To aid performance, these styles and are stored in post meta for each item. Anytime you save that content, the previous generated styles are deleted. They're recreated on-the-fly the first time that content is viewed on the front end.
With every update to X, Pro, or Cornerstone, we automatically purge this cache for all items. Unfortunately, because we can't make that automation airtight (sometimes it fails on manual or FTP updates) this step could get skipped. When updating to a new major release, there could be some markup changes incompatible with the cached generated styles. We need to make sure that there's always a way for the style cache to be cleared.
Under [Pro/X/Cornerstone] > Settings in the Dashboard, you'll find the "Clear Style Cache" button.
This button will delete any cached dynamic CSS. It will then be regenerated the next time your content is viewed on the front end. Alternatively, if you're only experiencing a problem with an individual page, re-saving that page in the Content Builder will have the same effect. This is true of Headers and Footers in Pro as well.
NOTE: You should always clear your caching plugin and/or CloudFlare after using this tool. Troubleshooting steps for those two areas are covered above.