Archived topic
Two separate elements (visually identical), strange behaviour?
12 replies · Started by Lewis on May 9, 2022
So this one is a bit bizarre.
I've two separate elements, as shown in the screenshots below. Both of these elements should be visually identical with the exception of the written content in the right hand grid column.
So here's the strange bit, when I update either the 'logged-in' version, or the 'logged-out' version the opposite one will lose it's css styling on the front end. (Shown in the screen grab.)
I can update the element that has lost it's styling and then it will display correctly, but then the other version loses it's styling. It's weird. Now I know copy and pasting blocks can cause some weird behaviour, so I've rebuilt each of these blocks independently. The behaviour still persists unfortunately.
Any advice would be appreciated. Thanks.
Screen grabs were taken on chrome, from a signed-in and a signed-out perspective.
[url=https://ibb.co/dLw1tLf][img]https://i.ibb.co/dLw1tLf/Screenshot-2022-05-10-at-07-45-35.png[/img][/url] [url=https://ibb.co/j4M7hCJ][img]https://i.ibb.co/j4M7hCJ/Screenshot-2022-05-10-at-07-47-42.png[/img][/url] [url=https://ibb.co/kcbrnbB][img]https://i.ibb.co/kcbrnbB/Screenshot-2022-05-10-at-07-47-10.png[/img][/url] [url=https://ibb.co/hD52hnX][img]https://i.ibb.co/hD52hnX/Screenshot-2022-05-10-at-07-46-43.png[/img][/url] [url=https://ibb.co/ZXK9Qg4][img]https://i.ibb.co/ZXK9Qg4/Screenshot-2022-05-10-at-07-46-12.png[/img][/url]
Edit: So further testing shows these styles break on certain pages too, while others are displaying ok?
Hi there,
does it work correctly if you set the GenerateBlocks -> Settings -> CSS to Inline ?
Hi David,
Thanks for the speedy response as per usual. (Love the GP support team.)
Yes upon initial testing, setting, GenerateBlocks -> Settings -> CSS to Inline seems to have done the trick.
Any idea as to why the external option was throwing the error?
It is an odd one - is there any page caching on the server ?
Hi David,
No page caching active yet. Will eventually be using WPRocket.
Hi there,
Glad it's working now.
This issue is usually caused by caching or removing query string, can you check if you have server cache enabled?
For more info:
https://docs.generateblocks.com/article/unstyled-content/
Hi Ying,
On closer inspection the only caching I can find enabled at this time, is that of third party plugins and their third party resources as well as, GP's Cache dynamic CSS.
External CSS has this issue as it builds a single CSS file on the first load. Whether the user is logged in or out on that first load determines which CSS is built.
It's a known issue, but it's a difficult one to fix. Setting to inline CSS is the only solution as of right now.
Let me know if you need more info :)
Could somebody explain in more detail when and where this issue usually appears? I'm not sure that I've yet full understood the problem. So, the CSS comes from a plugin that loads different styles depending on the login status?
Hi there,
it related to the GenerateBlocks plugin, it generates its CSS dynamically and on first page load.
The issue arises when GenerateBlocks content is loaded via a GP Block Element. In this case there are two GP Elements being loaded conditionally on the page ( logged in vs logged out ) and it will only generate the CSS for one not both elements.
The issue us resolved by changing from External CSS to Inline CSS.
Ah, ok. Got it! Thank you very much for the explanation.
You're welcome
@Tom, thanks for the extra info, much appreciated. 👌👍
I'll stick with the inline solution for now.
