Join the Webstudio community

Updated 4 weeks ago

Adding binding to paragraph span

In Components > Paragraph there an option to "Wrap with span" a selection. I was attempting to use that to exchange the text with content from my CRM (e.g {{Business Name}} will change to Acme Corp) . I do not see that option available though (see video). Is this the intended behavior? My use case is creating a formatted paragraph and personalizing it will client data (name, company, etc).
2
M
O
B
29 comments
Indeed, <p> is not bindable. But a workaround could be to use "Text" Component and bind your data. It work! But I'm agree, it would be nice to have <p> and span bindable (semantic would be better)
@TrySound was there a particular reason for this limiation?
p is bindable unless you add instances to it
No particular reason, we enabled it only for containers
is it a lot of work enable it for any instance?
lets do it then, I don't see any cons
Just to be clear, the idea here is to to open any text editable component, wrap a subset of text with a span and bind the span text content or attributes to external data, correct?
For this the child needs to also have Text Content property
One problem, editing paragraph with binded child will wipe out this child
Ah right, that's the main reason, we disable text content on any instance that has child instances because of that
What about still having the option to bind p. Or, if you have a static p and need to bind a span, then allow that. I've also already come into a situation where binding a span would be really helpful. Otherwise you have to re-construct with inline divs etc, and it gets quite messy and time consuming (and maybe not great for accessibility).
You should be able to bind <p> if it has only text
p is bindable, where is this coming from?
as long as its text only
Ah, okay, just the span then. sorry.
its not span vs p vs text, its when isntance has children instances then you can't bind text any more, this is logical, because text would override all the instances inside
what we can enable though is the children inside a rich teext, like span or link, could have text content so that that text can be bound
not sure though if that's what you were looking for in the first place since there is confusion
sorry not you, @Luis
I am not sure if this is exactly the same as with the OP was looking at. This example isn't too difficult to implement without span, but this gives the general idea.
I understand that this wouldn't work if the parent paragrph was dynamic as it would wipe out the span.
I accomplished what I intended by adding a Text component inside the paragraph and then changing the display to inline. It took me a while to make it all look like one paragraph, but it works. With the span binding, it might be more straightforward.
ok so sounds like we just want to allow text content property on those internal components added via toolbar like bold, link, span and that's it
sounds like a simple configuration to me
paragraph with an instance inside will still work as it does right now
The problem now we write all instances as text. So bindings will be lost
Add a reply
Sign up and join the conversation on Discord