Classes added to global CSS not showing in Gutenberg editor but on front end

Hi Cwicly Team,

I’m applying some vertical rules between a couple of Query Template generated divs with an “after::” psudeo element through a global style sheet and it’s not showing in the Gutenberg editor but showing on the front end.

Probably due to the load order of the styles but I figured I’d let you know anyway.

I’ve attached a few screenshots for reference.

Gutenberg Editor:

Front end:

Maybe there’s another way with the Pseudo Element feature in Cwicly to handle this but I couldn’t figure it out due to the divs being generated by the Query Template and wanting to change them around with different viewport sizes. If there is, please let me know. Thanks!

Environment info:

  • WordPress version: 6.1.1
  • Cwicly Plugin version: 1.2.8.7.3
  • Cwicly Theme version: 1.0.3

Hi @chipriggs,

Thanks for the report.
You are correct.
Gutenberg forces its own IDs on the backend, which we can’t override.
We’ll be coming out with a fix for this in the next few updates.

Thanks for your patience.

1 Like

No worries at all. Thanks for the quick update. :+1: :+1:

1 Like

Hello @chipriggs,

With 1.2.9.1, block IDs as selectors now reflect the CSS properties on the backend.

If you still experience trouble with this, please let me know by replying to this thread.

Cheers,

1 Like

Hi @Louis,

Unfortunately the CSS properties applied to the block IDs through a global stylesheet still aren’t being reflected in the backend but showing on the frontend. I even regenerated everything through the Cwicly settings but to no avail.

Could be something to do with these properties being applied to a pseudo element of the block ID but I’m not sure. This level is a bit above my head. :wink:

I’ll see if I can spin this up sometime today on my dev server so you can take a look if you’d like.

Thanks!