After updating to cwicly 1.4.2 some components have stopped responding to any and all changes from the Design panel I attempt to apply to them. This happens regardless of the property (border radius, opacity, margin…) and regardless of whether I apply those changes through tailwind or not.
Interestingly enough, the changes seem to get applied in the cwicly editor at first, but when I reload the page and click onto the component instance they revert back to the last configuration. And the changes are also not reflected in the frontend.
I have noticed that sometimes when I reload the cwicly editor the component does not even render, instead showing the “this component has corrupted content” message (don’t quite remember the wording right now).
All other components work fine and update on the frontend/backend as expected, so it’s just this one component that seems to be corrupted. Unfortunately, I cannot identify the root cause or recognise a pattern to fix the component.
Has anybody faced a similar issue?
Step-by-step reproduction instructions:
I cannot recognise a pattern in my broken component and since all other components work fine, I don’t see how anyone could replicate this issue.
It contains a div block with its tag set to figure. Inside the figure there’s an img, a paragraph block with its tag set to figcaption and an icon wrapped in a div. It has a couple basic properties like img src, caption and so on.
There are also two style variants, each slightly adjusting either margin or border-radius.
If you need any further info, I’ll be happy to share more details. Thanks again for taking the time, really appreciate it
The culprit was the img block. I don’t know what exactly about the img block was causing the component to break, but at one point I got the following error message in the dev console:
Block validation: Block validation failed for cwicly/image (Object).
Content generated by 2. save function:
<a class="cc-lightbox" href="{component=image=HANqn}"><img class="{gclv=true} object-cover w-full max-h-96 lg:max-h-144 {gcl} cc-img" src="{component=image=HANqn}"/></a>
Content retrieved from post body:
<a class="cc-lightbox" href="{component=image=HANqn}"><img class="{aclv=true}{gclv} object-cover w-full max-h-96 lg:max-h-144 {gcl} cc-img" src="{component=image=HANqn}"/></a>
So it seems that some class on the <img> tag (not the one I assigned in the cwicly editor) was being saved/retrieved incorrectly.
The “solution” was to
delete the img block entirely
save the page
reload the page
create a new img block
reassign all classes I previously defined on the original img block
Save the page
Regenerate HTML, CSS and so on
Hopefully this can be useful to someone in the future
@Louis does this look more like a bug to you or like a potential incorrect setup on my part?
