Description

Reporting this upstream after investigating Trac ticket 59771.

On the trac ticket to the OP notes that when exporting a pattern in the site editor (w/ 6.4 RC2, no GB plugin) and then trying to import that pattern into another site he gets an "Invalid JSON" error. He also notes that exporting the same pattern from the "Manage all my patterns" list table he is able to successfully import the pattern into another site.

Neither I nor @hellofromtonya could replicate the problem at first. So, I asked the OP to attach his JSON files to the trac ticket. Indeed, the JSON files he exported in the site editor and from the list table where different. After some investigation I determined that the problem is that an em-dash character (codepoint U+2014) that appears in the pattern is not being correctly UTF-8 encoded in the JSON export from the site editor (which makes the JSON invalid), but is being encoded correctly from the list table export.

Note that in the OP's pattern, there are other non-ASCII chars that are being correctly UTF-8 encoded.

After some further investigation, I noticed that the JS that does the JSON export in the 2 cases is different.

• site editor uses exportAsJSON() in wp-includes/js/dist/edit-site.js
• list table row action uses exportReusableBlock() in wp-includes/js/dist/list-reusable-blocks.js

Note: In both cases, the source of that JS is somewhere else and those files are generated by webpack. I haven't been able to figure where the un-mangled source JS is...I'm sure someone more familiar with the codebase will know ;-)

While the JS is the 2 cases is slightly different, in looks "equivalent" to me at first glance...basically, doing JSON.stringify() on a JS object, one property of which is post.content.raw. That leads me to think that the problem is in how that post.content.raw is retrieved in the 2 cases.

Step-by-step reproduction instructions

1. create a pattern that contains an em-dash
2. go into Editor > Patterns and click the "3 dots" under the pattern created in step 1 and choose "Export as JSON"
3. go into Editor > Manage all of my patterns, when on the list table click the "Export as JSON" row action (be sure to save the site will a different name than in step 2)
4. on the Patterns list table screen, click the "Import from JSON" button and import the file exported in step 2 and receive a "Invalid JSON" error
5. on the Patterns list table screen, click the "Import from JSON" button again and import the file exported in step 3 and receive a success message

Screenshots, screen recording, code snippet

On the trac ticket, the OP linked to videos of him doing the steps in "Step-by-step reproduction instructions" above.

Environment info

WP 6.4-RC2
Windows WAMP-like server setup (PHP 8.1, MySQL 8.0, apache 2.4)
Lastest Windows Chrome, Edge, Firefox

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes