RichText: Use a simplified format for rich text values

[youknowriad]

This PR updates the RichText "element" format to use a simplified version of a React element instead of the whole object. This has the advantages:

• Well defined format { type, props: { ...props, children }
• The Children prop is consistent: always an array
• This is a serializable format: It can be used as a comment attribute, it can also be used in templates from PHP.

Testing instructions

• Check that writing in text blocks (heading, paragraph, list, tables...) still works as expected
• Save and reload these blocks
• Check some transforms.

closes #4489

related #771

[aduth]

Few thoughts at a glance:

• What's the return type of the node source? This simple element? Why do we have two names for the thing?
• What guarantees do we have for compatibility between the simple element and @wordpress/element's ability to serialize it?
  • Speaking to: It's a bit odd that this is a "block" concept. Am I right in saying nothing that strictly forbids us to think of this as the canonical value shape of wp.element.createElement other than specific React internals making this prohibitively difficult?

[youknowriad]

Speaking to: It's a bit odd that this is a "block" concept. Am I right in saying nothing that strictly forbids us to think of this as the canonical value shape of wp.element.createElement other than specific React internals making this prohibitively difficult?

That's true, what should we do in that case? Just move it to wp.element.createSimpleElement for now?

[ellatrix]

I wouldn't quite say that this closes #771? It does help to get rid of staring the React element objects.

Why { type, props: { ...props, children } versus { type, props, ...children }?

[youknowriad]

Why { type, props: { ...props, children } versus { type, props, ...children }?

To match React's shape essentially. Not certain I understand what's the content of children in your example though? (or maybe you meant to drop the ...)

This doesn't solve the "selection" state of RichText but solves only the value state from #771

[ellatrix]

No the ... is supposed to be there, it would be an array. I'm merely wondering why that shape, that's all. The other shape might be a bit closer to JSX style.

[aduth]

There's an incidental performance benefit to this change, where currently we call updateContent in RichText many cases where content has not in-fact changed, merely because the assigned key is different. You can see this by pressing backspace from an empty new paragraph into a previous paragraph.

Having fewer properties is also more efficient a comparison.

[youknowriad]

So what's remaining here? this maybe #7476 (comment)

[aduth]

Unused variable.

[aduth]

Funny formatting? Running npm run fixtures:regenerates introduces a number of changes locally.

[aduth]

What is a simplified element, and why would I need one?

This is my main concern with this change, mostly that we have this separate concept of an element which is very incidental to a specific need for blocks, though could be a reasonable replacement for element altogether. So I don't think it's strictly unsuitable for @wordpress/element, though its existence parallel to the "full" element is unfortunate. The previous implementation where it existed in blocks was more accurate to the fact that it's an implementation detail therein, but then is complicated by the serializer's awareness of this shape.

I don't really have an answer here, just expressing thoughts in my head in response to your desire to move forward ( #7476 (comment) ).

Couple options to consider:

• createElement should return the simplified form, and we somehow teach React to deal with it in rendering.
• We move this back to blocks, but with some adapter which prepares an element for serialization, even if right now that just means returning the element verbatim.
  • Speaks also to the fact that we're misaligned between what React's renderer expects and our custom serializer can handle

[youknowriad]

What if we just consider this as a separate thing? It's just the HTML format of Gutenberg. Doesn't need to be coupled with element at all. Though I don't know what name to give it.

[aduth]

Another issue we'll need to address: Merging two paragraphs uses concatChildren, which itself uses React.Children.forEach, which validates the element shape and complains about our simpler object format.

[youknowriad]

Superseded by #7934