How to have both static and dynamic content in the same block

[miljushm]

Is it possible to have a block which will render on the server and also have a static text before the dynamic content?

For instance, I've converted a shortcode to a Gutenberg block and upon edit I do this:

el(ServerSideRender, {
block: "example/shortcode-name",
attributes: props.attributes
}),

which retrieved the content rendered on the server (in this case, it gives the number of sold products - pure number). That one works like a charm.

However, I'd like to have results like this "Sold: 56" or "56 Sold Already" instead of just getting "56". That "Sold" or "Sold Already" would be a static input by a user.

Thanks in advance!

[katerlouis]

Similiar issues

#7331
#5760 #5968 #6239

Although I might be misunderstand what you are asking for–

[miljushm]

So, that's not possible yet?

[katerlouis]

Mixing dynamic rendering together with static content generated by gutenberg directly is currently (version 3.1.0) not possible as far as I know.

[andreilupu]

I would create a soldLabel attribute which would be edited and maintained in the edit method of your component, on the javascript side. (Maybe with a default like Sold:)

Once defined, this attribute will appear in the render_callback's attributes on the server side along with the value. Here you can retrieve with PHP functions your 56 value and concatenate it with the soldLabel.

Maybe I'm bad at explaing it, but the Latest Posts core block is a good example of combining Static attributes with server side rendering.

[miljushm]

I know for that one since that's probably the only way. However, in that case I would need to have two extra fields like BEFORE number and AFTER number content fields which is really now user friendly if you know what I mean.

[mcsf]

Closing as duplicate of #5760.