Inline span styling issue


Maybe I’m confused but I thought that I can style inline spans similarly like global classes.
So when I select a word in a heading and give it a class (e.g. .heading-bold) that this class shows up in the class list of the block. When I click on it I can style the appearance of the span.

This does not seem to be possible at the moment. I can only style the inline span with custom CSS. Is this how it is supposed to be?

Step-by-step reproduction instructions:

  1. Create a heading
  2. select a word and give it a class name
  3. the class does not show up in the class list of the heading block.

Screenshots, screen recording, code snippet

Bildschirmfoto 2023-06-17 um 17.45.46
This is how I thought the span class would appear. When I click on it I thought I can style the span.

Environment info

  • WordPress version: latest
  • Cwicly Plugin version: latest

Hey @Jonas,

hope that helps:

Hi @Marius,

I forgot there was a video about it, thank you very much for the reference!

It seems like I was right and the relative class should appear in the class list like it does in the video:

Hi @Jonas,

Sorry to hear you’re experiencing trouble with this.
Thank you @Marius for helping out!

Be sure to take a look at this step-by-step guide which should help you with the process.

Does the relative style not appear on your end?

This is how it should appear:


If this isn’t the case on your end, could you possibly provide more details?
Thank you in advance.

1 Like

Hi @Araminta,

thanks for getting back.
This is very strange. I did it exactly like you showed in the gif. Now I tried it again and on a different page it works for the first span. But when I select another word and give it a class name it does not work anymore.
Could you try to select multiple words and give them each a different class name?

1 Like

I can confirm that on my side there are some inconsistencies in creating spans as well.
Tried a lot of scenarios but couldn’t find out how to replicate it.
Didn’t dig too much, but on first sight it almost seems to be random behaviour.

I also created a GIF in the first place but then decided to dismiss it and just link the video.
Somehow, I didn’t realize (even though I saw it) that when creating another span, the class didn’t pop up in the block inspector.
As mentioned, it’s probably not related to creating a second span, it’s happening just kind of randomly.

1 Like

Thanks for confirming @Marius!

It was also my impression that is it kind of random. Even the first span I create does not show up sometimes.

1 Like

Thanks for bringing this up @Jonas.
I actually faced that in the past already, but in combination with the dynamic inserter - so I thought it was related to that and not a general issue in creating spans.

I already forgot about it, but it’s just a matter of time until I would’ve run into it again.

Thank you @Jonas and @Marius for bringing this to our attention.

Now that you mention it, we have noticed this behaviour.

Unfortunately, I have also been unable to reproduce the error consistently.
Rest assured, we will continue testing until we discover a reliable way to reproduce the error.

I’ll be sure to keep you updated on this, as soon as we have more information.


Here is a report I made a couple of days ago about this issue:

Hello @Jonas,

Thanks for bringing up this issue (spans relatively styles not always being created).

We added a fix for this in, and I’d be grateful if you had the time to try it out and see if it does fix the issue you were experiencing.

Thanks in advance.


1 Like

Hi @Louis,

I can confirm that this issue is now resolved. Thank you very much for the quick fix!

Hi @Louis,
When I nest a <span> element inside a simple <li> element, it is ok.
When I add a
inside the

  • , the span creates a columnar display that disrupts the overall layout.

  • Hi @weedor,

    Please see this thread for more information:

    And see the “Remove list container” setting in Cwicly Settings:

    Thank you @StrangeTech
    I appreciate your suggestion, however, the issue persists regardless of the settings applied.

    I understand, I was pointing out that it seems to be an open issue for displaying in the editor. Does it display this way in the front end for you or just in the editor?

    "I didn’t check the backend.
    Actually, the issue exists only in the backend; the frontend display is fine!
    Thank you, @StrangeTech, for suggesting I test the frontend – I hadn’t dared to do that.

    Does anyone know if there is a way to nest spans in cwicly?

    I have an H1 and inside of it I want to add a strikethrough element like so:

    Screenshot 2023-07-14 at 10.57.22

    Right now I solved it using two separate spans inside the H1 – one for the outlined “aber” text and another one for the “weil” text on top of it. For the strikethrough I’m using a ::before pseudo element on the outlined text.

    This works fine on desktop, but when I go into tablet/mobile view and the H1 starts breaking onto multiple lines, the “weil” loses its initial position right on top of the outlined “aber” because its position is set to absolute relative to the H1.

    Ideally I’d like to have the “weil” span nested inside the “aber” span and set “aber” to position relative, so that the “weil” always stays on top of the “aber” regardless of how many line breaks the H1 has.

    I know I can do this with JavaScript, but I was wondering if there’s a way to do it directly in cwicly’s editor – that strikes me as more elegant and sensible than manipulating the DOM with JavaScript.

    So if anyone has an idea on how (if at all) this can be done natively in the cwicly editor, I’d greatly appreciate it.