Components get unstyled randomly

Fixed Bugs
1

Description:

I have a couple of components in my site, that every so often ( I haven’t been able to figure out any pattern) will get unstyled in the front end. The image which is supposed to be cropped into a circle and 90px x 90px is a much larger square as the default. The text color and font properties are also returned to the default.
Usually going in, clicking on the and saving resolves it, I can always see it styled in the backend.
There are no console errors at all. It is always the same two components, they are different components, they live in different pages. I have tries regenerating css and html, I have tried multiple browsers and the error persists.

I know it’s really generic I wish I could offer more specificity.

ETA: Both components are inside query blocks, and I have one of the components in two pages, I detached the modules from the component and it seems to stop the issue, so it’s at the component level.

  • WordPress version: 6.3.1
  • Cwicly Plugin version: 1.3
2

It has started to happen to other components too, think it happens when I make a change in the page template without having used the dynamic view so essentially all my query blocks show nothing, I go in, tweak something and save and the components break. They unbreak when I make a change while displaying content dynamically and save again

3

Hi,

Thanks so much for the report.

We are currently investigating this. Any more info you may think can help us reproduce this consistently would be great.

Is this happening on a specific editor (post/site)? Is it still related to a use inside a Query or more general?

Best regards,
Johnny

4

This is happening with components being used in the templates for specific pages or index. There are just too many variables to troubleshoot so I’m commenting as I notice things. Some are in pages with queries some are not. All my caches are off. One is a div with a background image that has an opacity filter of 0.3, it breaks at random, sometimes with two instances of the component on the same page one is broken and the other is fine.
Other components are more complex with multiple blocks inside them and are usually inside a query.

5

I can confirm this, it happened for me as well.
Could not recognize any pattern.

  • Local Installation
  • Browser: Firefox
  • WordPress version: 6.3.1
  • Cwicly Plugin version: 1.3.0.2
6

Yay, so at least I’m not going insane which is always good news.
To add, my site is hosted on Krystal it’s a standard Cpanel wordpress installation in a VPS type of thing. Also the error persists in Firefox, Brave and Chorme in regular and private modes.
Also visible in Safari on mobile and Brave on mobile IOS.
No CDN installed on this particular site just yet, no optimization plugins, no caching, clearing browser caching doesn’t resolve it.

1 Like
7

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

8

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.

9

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

10

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?

11

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.

12

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
13

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%;
}
14

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

15

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

16

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.

17

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

18

Hi John, not the same result:

Testimonial card: ‘0cbf5e2355’

Service Card: ‘eed413a047’

19

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

20

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.