Components get unstyled randomly

Hi,

I haven’t been able to reproduce this yet, but sounds like it is an issue with Cwicly and the CSS generation and not browser/environment specific.

Are the styles applied to the component through properties or simply on the blocks within the components?

EDIT: can you confirm this doesn’t happen randomly as in they go unstyled if you don’t save/update a post/template?

Moved to confirmed.

Best regards,
Johnny

I can confirm that this happens even if i don’t save or update the page where the component is. But I’m currently in a dev sprint so I’m saving and updating some template or another every few minutes. And suddenly a page I had marked as finished with QA is all unstyled and saving another template won’t fix it. I have to go into that one make any change at all anywhere so that it lets me save and then it’s fine again.

Hi,

Then that changes things as we don’t modify stylesheets for components that aren’t being edited (they don’t exist).
If and when this happens to you, @mariaarangokure or @T-low, would you be so kind as to send me a URL to the frontend where the styles aren’t being applied?

Best regards,
Johnny

Hi @JohnD,
the styles on my site are applied to the component through properties.

Doing the same.

Local install :sweat_smile:
Should I look after something specific?

The component is likely in the page I’m editing, for example the texture component is in pretty much every template on my site BUT the breaking doesn’t happen in the page that I’m saving but a different one where the component is located.

Some of the styles are properties like the opacity filter, others are component styles like background colors, and others are directly coded on the base style such as the circle crop on images.

Site is not live for viewing and NDA covered or I would have sent a vid/screenshot with my original post. But if you tell me what to look for I can share console / code info to a degree.

Hi,

We’ve “hopefully” fixed this in 1.3.0.4.
Please let us know if you are still experiencing issues.

Best regards,
Johnny

1 Like

Unfortunately not fixed, just experienced it again and I’ve updated to the latest version. In this case, I made a change to an unrelated part of the site and needed to save permalinks. After doing that the component in one of my pages is unstyled again.

I’m looking at the code of this component compared to another similar component and the data-cc-comp attribute is loading fine, all the classes that should be there are there. But in the CSS nothing is loading for the specific classes. For example I have a container in both components, in the working component I see:

<div class="container-c505c92 cs-kfd8w cc-cntr" data-cc-comp="component-cdcd45c">
.container-c505c92.cs-kfd8w {
    background-color: var(--cc-color-15);
}
.container-c505c92 {
    border-color: var(--cc-color-5);
    border-width: 3px;
    border-style: solid;
    top: var(--comp-7lv5B);
    transform: rotate(var(--comp-qrwoS));
    align-items: flex-start;
    position: sticky;
    display: flex;
    flex-direction: column;
    width: calc(100% - 4.5rem);
}
[data-cc-comp*="component-cdcd45c"] {
    --comp-7lv5B: 2rem;
}
.cc-cntr {
    display: flex;
    flex-direction: column;
}
.cc-cntr {
    margin-left: auto;
    margin-right: auto;
    max-width: 1366px;
}
.cc-cntr, .cc-sct {
    width: 100%;
}

In the broken component I see:

<div class="container-c505c92 cs-kfd8w cc-cntr" data-cc-comp="component-cdcd45c">
.cc-cntr {
    display: flex;
    flex-direction: column;
}
.cc-cntr {
    margin-left: auto;
    margin-right: auto;
    max-width: 1366px;
}
.cc-cntr, .cc-sct {
    width: 100%;
}


@JohnD can we please mark this as not fixed again?

Hi,

I have switched it back.

For the above markup, you mention “similar” components, although they seem to share the same style variation IDs and Component ID.

Does this mean that styles are applying for one “instance” of a component but not another on the same installation?

Thanks.

Best regards,
Johnny

That’s interesting, no they’re completely different components. They’re based on the same design pattern but have different elements so it made sense to keep them separate as components. They are both created from the same design I had saved in the cloud library. Now that you mention it, yeah I hadn’t noticed that they have the same component class which makes no sense since they are different components with different names, different blocks inside etc. One of them displays correctly, the other breaks.

But also with the other component that had this issue regularly, a div with a background texture, it can happen to an instance of the component but not the other. So in one page you can see the same component twice, one instance broken, the other working fine.

Seems odd that they have the same style variation ID if they are separate components…

Could you call this function in the browser console after selecting the working component in the editor, and doing the same for the broken one, and tell me if they have the same result?

wp.data.select('core/block-editor').getSelectedBlock().attributes.ref

Thanks in advance.

Best regards,
Johnny

Hi John, not the same result:

Testimonial card: ‘0cbf5e2355’

Service Card: ‘eed413a047’

Hi,

Thanks for checking that out.
It’s positive because this does confirm they are different entities.

The fact that components can go unstyled when saving permalinks is unusual.

This is also unusual since components share the same stylesheet.
Would you be so kind as to check the assets that are loaded on the page where the component is unstyled and see if you can find the stylesheet corresponding to the IDs above starting with cc-cm-

Thanks in advance.

Best regards,
Johnny

OK just came back to a page with the issue, no stylesheets starting with cc-cm- in the header.
Other components on the page (they are different components though, I only have one instance of this one there) are styled properly.

Hi,

cc-cm- stylesheets have to be loaded if you have styled components on the page.

Unfortunately, this is going to be very hard to debug without access to some type of environment where we can reproduce this.

Best regards,
Johnny

That’s what I thought too but it was nowhere to be found on the head or footer.

I know it’s hard to debug, I acknowledged that from the get-go particularly given how random it appears to be. I’m curious about how scalable it is to support and troubleshoot by gaining access to the site. It’s not uncommon for developers to have NDAs applied to their work for clients and even if not, if there’s any personably identifiable information on the site, at least here in Europe then a DPA and consent from the people who’s information is stored on the site is needed to be able to share that with a third party in compliance with GDPR…

Hello @mariaarangokure,

If our users are tied to an NDA (which happens quite often) then they will often reproduce the issue on our sandbox. You can import your components there if no personal information is provided.

I recommend we follow this path in this instance.
Thanks for your understanding.

For GDPR data processing, this is often dealt with by the company’s data processor.

@T-low, are you still experiencing issues?

Cheers,

1 Like

That’s a good idea Louis, thank you for the clarification. What I meant by the GDPR processing is that if I were to give you access to my client’s site, which is full of their customer’s personal information, I would need to sign a DPA with you and update my client on it, and they would need to make an addendum to their privacy policy noting that a new organization would have access to their data and email all their users with the notification, and its just waaaay too much of a hassle.
I’ll power through this build because I insisted on this route and we’re already running behind, once we are done, I can go into the sandbox and troubleshoot further. I really appreaciate your openness and helpfulness.

1 Like

Hi @Louis,
I haven’t experienced any strange styling behavior lately, but I haven’t worked with Cwicly the last few days, so it’s hard to say :thinking:

Will report if I find something.

Cheers

1 Like

Hello @mariaarangokure,

Since we haven’t had any update on this thread, I’m going to consider this issue was fixed.
Don’t hesitate to let me know if you are still experiencing trouble, and we’ll reopen it.

Cheers,