Using Editable component when rendering serverside

[ghost]

Issue Overview

When setting up a dynamic block for server side rendering and using one or mulitple Editable components, the data stored in html comments cannot be used directly.

Steps to Reproduce (for bugs)

1. Create a block with Editable components
2. Don't store their values in html content via save method, but in html comments
   attributes: { contenteditable: { type: 'array' }, },
3. Register a server side function for rendering

The content

is stored as this (a react internal representation?):

{"content":[{"type":"strong","key":"_domReact5","ref":null,"props":{"children":"Donec rutrum"},"_owner":null}," congue leo eget ",{"type":"a","key":"_domReact8","ref":null,"props":{"href":"https://wordpress.org","children":"malesuada"},"_owner":null},". ",{"type":"br","key":"_domReact2","ref":null,"props":{},"_owner":null},{"type":"br","key":"_domReact3","ref":null,"props":{},"_owner":null},"Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui."]}

and that is what the server side rendering function gets to see.

Expected Behavior

There should be a server side function to convert this array to valid html.

[amdrew]

👍 I'd also like to use RichText component and have the field's value saved to the comment attributes. I'm rendering the block server-side and see the same behavior as above.

[amdrew]

My comment above can be ignored, just saw that the RichText component now supports a format: https://github.com/WordPress/gutenberg/blob/master/blocks/rich-text/README.md#format-string

This allows the content to be saved as a string and it is stored as a comment attribute 🎉

[youknowriad]

As mentioned above you can use the format: "string" for RichText components

[8bit-echo]

Is there a way to prevent re-rendering on every keystroke using this method? It's causing a lot of flashing for me while typing.

[youknowriad]

@8bit-echo you should try to debounce the onChange calls on the REST API and see if that helps.

[8bit-echo]

@youknowriad I’m currently debouncing the onChange for a PlainText component, but since SetAttributes runs asynchronously, it doesn’t seem to be making much of a difference. When you say debounce the api call I’m assuming you mean to gutenberg/block-renderer/{{...}}. Does the ServerSideRender component expose access to that method? I didn’t see anything in the docs that mention it.

[youknowriad]

No, I'm thinking debouncing setAttributes call. Avoid calling setAttributes on each key stroke.

[youknowriad]

Also, note this

ServerSideRender should be regarded as a fallback or legacy mechanism, it is not appropriate for developing new features against.

https://github.com/WordPress/gutenberg/blob/master/packages/components/src/server-side-render/README.md