Broken Global styles in the backend

Most probably it’s an isolated case, but my global styles in the backend, somehow got damaged on an install.

How it manifests:

  • In the editor, the page is loading without global styles; (on the frontend they are loading normally)

  • when going to Global Typography, the page breaks (The editor has encountered an unexpected error.)
    Error in the console: TypeError: Cannot read properties of undefined (reading ‘themeFonts’)
    react-dom.min.js / at /build/index.js

  • In the template editor on top of the above also:
    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘colors’)

In Cwicly → Settings → regenerate “Global Styles CSS” → when clicked spins without finishing;

I can pinpoint to what actually caused this. But some things that have been done on this install:

  • tested WP 6.1 RC. (but reverted to 6.0)
  • tested other block plugins; (but they were deleted after)

It would be good to have some sort of “auto healing” option when those situations occurs.

I experience something similar, the global style show in the site editor when I work on templates but not when I work on a blog post in the backend.
The front end shows everything as it should though.

The global styles got applied in the backend as soon as I change the font on any given block!

Now, I think I know more precisely in which context the problem happened.
I was building the post using reusable blocks that I created in the Theme editor context.
After importing them to the post editor, I would convert them to regular blocks in order to edit the text. In that context, the texts inculded in these blocks, all using global styels, would not reflect the font choice in the back-end but would in the front-end.
Until… I just click on the Font Familly drop down menu, I don’t even need to change the font with the font selector, and then every text element would appear with the right font in the back-end.

Are you experiencing the problem in the same context @alex ? Did you try to just play with the font selector in any of your text element to see if that fix the issue?

The font changing trick didn’t worked on my end.
But the common thing we have is we both used reusable blocks so that might be a trigger for this issue.

Hello @alex,

Sorry to hear about the Global Styles being broken.

We had this issue happen once before with @petrbilek if I’m not mistaken.
Unfortunately, we weren’t able to retrieve the global styles in his case.

If you can send us temporary access to your installation we can see what went wrong.

Did you copy/paste a an element style inside the Global Styles at any stage?

Thanks.

Right, had the same issue.

@Louis sent an access link to support.

I don’t think I have copied elements before the issue. I did tried afterwards (copy pasting the global element from a good install), thinking it will overwrite the broken ones.

Well I just created a new blog post,
imported first a new CC section
then a reusable block
this time, no issue.

So I don’t really know what was the context of the problem earlier, if I encounter the problem again I will try to be very attentive in order to catch the specific context.

Best with your issue @alex

Did anyone figure out how to actually fix this? I’m having the exact same issue and did not use any re-usable blocks.

Hello everyone,

While this seems to happen on projects where users backup - upload database, we’ve added a quick fix feature whenever global styles are fetched to prevent this happening with 1.2.9.4.

If you still encounter issues with this, I’d be grateful if you could let me know by replying to this thread.

Thanks a lot for your patience on this one.

Cheers,

1 Like