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:
Create a heading
select a word and give it a class name
the class does not show up in the class list of the heading block.
Screenshots, screen recording, code snippet
This is how I thought the span class would appear. When I click on it I thought I can style the span.
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?
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.
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.
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:
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.
