Gutenberg: Dynamic Rendering of RichText

[katerlouis]

I haven't found help for this anywhere else.
But this could also be considered a feature request, if what I'm asking is not possible yet.

When I save <RichText />s content into my attributes and want to use this with render_callback in php, it get's kinda messy. As soon as the text contains RichText (bold, italic, line-breaks etc.), $attributes stores it really complicated

attributes: {
    description: {
        type: "text",
        // no source, so it goes straight into the html comment, nice for dynamic rendering
    }
}

```php
...
"render_callback" => function( $attributes ) {
return "

" . $attributes["description"] . "

"
}

```php
// var_dump($attributes["description"]
array(3) {
    [0]=>
    string(24) "Rendering RichText with "
    [1]=>
    array(5) {
      ["type"]=>
      string(6) "strong"
      ["key"]=>
      string(10) "_domReact4"
      ["ref"]=>
      NULL
      ["props"]=>
      array(1) {
        ["children"]=>
        string(3) "php"
      }
      ["_ower"]=>
      NULL
    }
    [2]=>
    string(22) " is a pain in the a..."
  }

I guess there is a reason why you save RichText like this.
So how do you suggest to use it when rendering dynamically?

1. Is there a function like decode_craziness($attributes["text"])?
2. (rather a workaround) Don't render this text dynamically at all; save it statically and use it as a parameter in render_callback [a request from #7331]

[danielbachhuber]

Somewhat related #5739

[katerlouis]

I don't see how these issues are related. (Disclaimer: read only the owners text and scanned the answers) – could you @danielbachhuber elaborate why you think so?

Since you didn't assign a bug-label, I suppose this behaviour is intended.

How do you suggest to use RichText dynamically? Decoding this object should be implemented by gutenberg; even if I wanted to, I don't think I have the skills to create a <p> out of this object.

[danielbachhuber]

I don't see how these issues are related. (Disclaimer: read only the owners text and scanned the answers) – could you @danielbachhuber elaborate why you think so?

Related in the sense that var_dump($attributes["description"] doesn't necessarily produce the expected behavior:

// var_dump($attributes["description"]
array(3) {
    [0]=>
    string(24) "Rendering RichText with "
    [1]=>
    array(5) {
      ["type"]=>
      string(6) "strong"

It seems like the expected behavior is to get pure HTML.

How do you suggest to use RichText dynamically? Decoding this object should be implemented by gutenberg; even if I wanted to, I don't think I have the skills to create a <p> out of this object.

I don't have a good suggestion at this point. #6751 #5708 #2751 are also related.

[katerlouis]

Yes it would be great if render_callback would immediately turn convert RichText from object to html-string. Especially for uncluttering the html comment + database. Debugging / searching for attributes in the comment is crazy once RichText is involved. And I don't know any other way to inspect the attributes of a block under the hood.

But if that's too much at this or even any point, gutenberg must provide a function to get the pure HTML.

Anybody else from the team with suggestions?
I just can't imagine that rendering dynamically was not taken care of or atleast thought of when you build the <RichText /> component.

I mean: gutenberg clearly has the logic to turn this object into HTML already, since it is saved correctly in static context.

[danielbachhuber]

I've filed this against Merge Proposal: Plugins so we can come to a conclusion on it sooner rather than later.

[AndreKelling]

Got an approach here: https://gist.github.com/AndreKelling/ac4d8be7111d27aaf236460dc5b1800e
So far it covers nesting of tags, a tags and br's.
All a RichText Component can come up with at the moment.

[urukai]

I had the exact same problem like katerlouis. I found a solution here: https://github.com/WordPress/gutenberg/issues/5708#issuecomment-401134065

[designsimply]

Closing based on @urukai's note. Please re-open if the suggestion noted doesn't solve the problem for you.