Pullquote: Fix parsing/serializing multi-paragraphs in pullquotes

[youknowriad]

closes #1982

This PR seeks to solve the parsing/serializing issues we were experiencing when typing multiple paragraphs in pullquotes.

Testing instructions

• Create a multi-p pullquote
• Check the markup in the text editor (no nested paragraphs
• Save and refresh, the markup should stay the same

[afercia]

@youknowriad tested a bit and seems this approach perfectly works in Gutenberg.

However, when editing a post with a pullquote in the Classic editor, and then again in Gutenberg, the content gets lost. Not sure if this should go in a separate issue.

For example: inserted a pullquote with 2 paragraphs:

<blockquote class="wp-block-pullquote alignnone">
    <p>My quote</p>
    <p>with multiple par</p>
    <footer>my caption</footer>
</blockquote>

Saved, then opened the same post using the Classic editor, switched to text mode and the markup was changed to:

<!-- wp:core/pullquote -->
<blockquote class="wp-block-pullquote alignnone">My quote

with multiple par

<footer>my caption</footer></blockquote>
<!-- /wp:core/pullquote -->

This perfectly works in the Classic editor, but when editing again in Gutenberg, it doesn't of course and the content gets stripped out.

Marking as "Request changes" just because I'm not sure if you want to open a new issue.

[nylen]

@afercia that is part of a much larger class of issues with the way we parse block content. Can you leave that comment on #1736 as an example?

See above comment, this is a larger issue and should be handled separately.

[nylen]

0c3e5ac fixes the previously existing tests.

2f96b6c adds a new test for this condition. Strangely, before this PR, this test would have already passed - whatever issue caused the duplicate p tags was only appearing in actual usage, which is a bit concerning as it means there's some behavior we're not successfully testing.

Adding that new test surfaced a warning which I'm able to reproduce by using the editor:

• Create a multi-paragraph pullquote block.
• Switch from Visual to Text mode. During serialization, the following warning is generated:

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the top-level render call using <blockquote>. See https://fb.me/react-warning-keys for more information.
    in p

[youknowriad]

I fixed the warning, I'm not totally satisfied with the fix but it has to do with the Editable shape lacking keys. The Editable shape is part of a much larger concern.

[nylen]

There is an untested branch in the latest commit. How about fixing that by adding a <strong> or something in one of the paragraphs for the multi-paragraph test fixture?

I would like to know why this bug was occurring in the UI but not the test suite. Any thoughts there?

[youknowriad]

I would like to know why this bug was occurring in the UI but not the test suite. Any thoughts there?

I thought about this and here is my hypothesis:

• The parsing was dropping the p tag and leaving only the children
• The serializer (save) was adding the p again

But when we use TinyMCE (the editable), for each item of the array, it adds a p wrapper if no wrapper is found (simple string) and when serialized, we end up with the double p.

[youknowriad]

Added a strong to the multi-paragraph example. Is this ready to be merged?

[nylen]

🚢

[westonruter]

whomever 🤓