Hello, I have been getting started using Custom Components along the lines of Atomic Design by Brad Frost, where I use repeatable design patterns across my site.
However, I have been having issues getting my component updates to appear across my sites. When I update my original component, sometimes it changes on the front end, but most of the time it does not. And even then, I’ve found it nearly impossible to get those updates to reflect on a non-logged in browser. Specifically the things I am struggling to get to reflect on the front end are custom CSS rules I’ve created in the element CSS for a custom component.
You see, in trying to troubleshoot the issue, it seemed to me it could be a caching problem. I also use WP-Rocket for my site optimization and have the “Remove Unused CSS” feature turned on. I’ve tried to “Clear Cache” and “Clear Used CSS” and it just wouldn’t change the output on my site. My theory is that somehow, WP-Rocket is having a hard time detecting the updated components and is just not allowing the unique CSS to be bundled into its final output form. I could be totally off on that theory.
Thus far, the only way I’ve found to get my updates to output on the front end of the site is to add one of my classes to the CSS Safelist in WP-Rocket’s Remove Unused CSS section.
Any pointers you all can give me for tracking down the issue? Is this a Cornerstone issue, a WP-Rocket issue, or a little bit of both?
Edit: Perhaps some context will help in troubleshooting this. On the homepage of theegeneration.org (and also on my single post layout here), I have a component, the audio player element in the hero section, that I’ve designed and use in many places on the website. I just discovered that for some reason when the user is not logged in, the pause button shows up as a maximize icon from FontAwesome. It shows fine when logged in, but not when logged out. In an attempt to restyle the button with some simple CSS in the component itself, it was making no difference. So, I added a class to the component and added the CSS to the home page and the single layout (where this component also appears). It works sometimes, but not other times. Honestly, it’s kind of maddening.
Here’s the code I included in the component element css (which didn’t work):
$el .mejs-button.mejs-pause button:before {
content: "\f04c";
}
I added this to two locations to select this component, and it works only part of the time:
.expanded-audio-player .mejs-button.mejs-pause button:before {
content: "\f04c" !important;
}