Looper-based Slider in Global Block renders incorrectly in Cornerstone editor

[fundibu]

Hello,

I created a Global Block that contains a Slider whose Slide elements are generated by a Looper. The Slider renders fine on the front end, but if I edit the page in Cornerstone, only the first Slide element looks correct. The others lack all of the visual styles that are supposed to be applied to the Slide elements and their children.

Here’s a demo:

https://probug2.wpengine.com/global-block-looper-slider/

Thanks!

[tristup]

Hi @fundibu,

Thanks for reaching out.
I have checked the page URL but didn’t find the problem you described here. If that is not the case and you are trying to point out something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[fundibu]

Hi @tristup,

Here’s what the Slider looks like when I visit the page as a normal visitor. This is what it’s supposed to look like:

And here’s what it looks like in the Cornerstone editor when I edit the page:

(Note: If I edit the Global Block itself, the Slider looks fine. It only looks wrong when I edit the page that the Global Block appears on.)

I tested this in Chrome, Firefox, and Safari.

[tristup]

Hi @fundibu,

I have checked your website yesterday but didn’t see this issue on the page you mentioned. It seems that it might be some cache issue, I would suggest you check once by clearing type cache including the Style Cache from Cornerstone > Settings > System > Clear Style Cache and check in the incognito/private mode of the browser.

I would also suggest you contact your Hosting Service provider to clear all server-level cache too.
Thanks

[fundibu]

Hi @tristup,

Thanks for getting back to me.

I cleared Cornerstone’s style cache and clicked the Update button as you suggested. Then I cleared the hosting provider’s cache and my browser’s cache, and I deleted all my cookies for that domain. I also tried an Incognito window. None of that made a difference.

This is happening in multiple browsers for me, and on more than one Pro-based website. I encountered this problem on a customer website I was building, and I was able to reproduce it on the development website that I linked to in my first post.

Just to be clear, did you only try visiting the page, or did you try editing it with Cornerstone? (See the secure note in my first post for credentials.) The visual problem I described only occurs in the Cornerstone editor, and only when I edit the page that the Global Block is on—not when I edit the Global Block itself.

I just took a look at the HTML code on the front end and compared it to the HTML code in the editor. On the front end, each slide’s div.x-text-headline element has an m9-a class that causes the h2 element to match an important CSS selector:

But in the page editor, the m9-a class is missing from the div.x-text-headline element in the second and third slides. Instead, there’s a tco-observe-6 class:

In the Global Block editor (where all the slides look correct), there’s an mcs15-0 class that causes the h2 to get styled, and the div.x-text-headline element in the second slide does have that class:

I hope this helps!

[tristup]

Hi @fundibu,

I checked and found the issue at your end, but was unable to replicate the same in my local environment. Can you please contact your Hosting Service provider to clear all server-level cache and check if that resolves your issue? If not, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[fundibu]

Hi @tristup,

I’ve already cleared every kind of cache the hosting provider has. It hasn’t helped.

My first post in this thread has a secure note with credentials for probug2.wpengine.com. You can use that site for testing and troubleshooting.

Steps to reproduce the problem:

1. Create a Global Block.
2. Add a Slider (Inline) element in a Section or Column inside the Global Block.
3. Make the Slider (Inline) element a JSON Looper Provider.
4. Input some JSON data with two or more items to loop over (e.g. [1, 2, 3]).
5. Delete all but one of the Slide elements.
6. Make the remaining Slide element a Looper Consumer.
7. Change the background color of the Slide element, and change the font size of the Text element it contains. (Use Cornerstone’s normal GUI controls to make these changes.)
8. Save the Global Block.
9. Edit a page with Cornerstone.
10. Add a Global Block element to that page.
11. Configure the Global Block element to display the Global Block you created in Step 1.
12. The contents of the Global Block element will look wrong in the editor. Only the first slide will have the background color and font size you applied in Step 7.

Thanks!

[ruenel]

Hello @fundibu,

If you use a global block and place this global block in one of your pages, please expect that some of the styling will not display correctly because some of the element information may have created a conflict with the page. This case usually occurs when there is a Looper in your global block. You can ignore the styling issue of the global block while editing page as long as the global block displays perfectly on the live view of the page. Or you can just insert the elements in your page without using any global block.

Hope this makes sense.

[fundibu]

Hi @ruenel,

Ok. Sounds like this was a known bug, then? Sorry about that. I didn’t see any other threads about it.

Thanks!

[ruenel]

Hello @fundibu,

We will be adding this to our issue tracker so that our developers can investigate this issue further. I cannot make any promises relating to a fix at this stage. I will add a note to the tracker referencing your report though so our dev team can see there are multiple reports of the issue.

Thank you for your understanding.

[fundibu]

Hi @ruenel,

Sounds good! It’s really only a minor annoyance to me, but I thought I should report it in case you didn’t know about it already. There might be situations where it would be a bigger deal.

Thanks again!

[prakash_s]

You are most welcome @fundibu