Issue with exporting pattern in the sidebar

[t-hamano]

Description

In WordPress 6.6 RC2 and the latest Gutenberg, I encountered different issues when exporting patterns from the ellipsis menu in the sidebar.

Note: In WP6.5, there is no ellipsis menu in the sidebar, so this issue does not occur in the first place.

WP6.6 RC2

The following error is logged in the browser console and nothing happens:

Log

editor.js?ver=1b1858d2bbca98769f87:24917 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'content')
    at getJsonFromItem (editor.js?ver=1b1858d2bbca98769f87:24917:31)
    at callback (editor.js?ver=1b1858d2bbca98769f87:24933:118)
    at Object.callback (editor.js?ver=1b1858d2bbca98769f87:25836:15)
    at onClick (editor.js?ver=1b1858d2bbca98769f87:26032:31)
    at Object.current (components.js?ver=54eab95952fe254d64e9:72265:38)
    at components.js?ver=54eab95952fe254d64e9:2651:53
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
getJsonFromItem @ editor.js?ver=1b1858d2bbca98769f87:24917
callback @ editor.js?ver=1b1858d2bbca98769f87:24933
callback @ editor.js?ver=1b1858d2bbca98769f87:25836
onClick @ editor.js?ver=1b1858d2bbca98769f87:26032
(anonymous) @ components.js?ver=54eab95952fe254d64e9:72265
(anonymous) @ components.js?ver=54eab95952fe254d64e9:2651
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
eval @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26174
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 15 more frames
Show less

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'content') at getJsonFromItem (editor.js?ver=1b1858d2bbca98769f87:24917:31)

{
  "__file": "wp_block",
  "title": "My Synced Pattern",
  "content": "<!-- wp:paragraph -->\n<p>My Synced Pattern</p>\n<!-- /wp:paragraph -->",
  "syncStatus": ""
}

Latest Gutenberg

The export succeeds, but the content field is missing.

{
  "__file": "wp_block",
  "title": "My Synced Pattern",
  "syncStatus": ""
}

Step-by-step reproduction instructions

• Create a new pattern and add content.
• Export the pattern as JSON from the ellipsis menu in the sidebar.
  • WP6.6 RC2: Nothing will happen and you will see an error in the browser console.
  • Gutenberg trunk: Open the JSON file and ensure that there is no content field.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[t-hamano]

After looking into these issues, it appears that these two outcomes were changed by #63042.

The following error is logged in the browser console and nothing happens:

Before #63042, the above issue occurs.

The export succeeds, but the content field is missing.

After #63042, the above issue occurs.

This means that exporting patterns from the sidebar must not have worked since before #63042. #63042 seems to have fixed a critical error, but exporting patterns from the sidebar still doesn't work.

[ramonjd]

The entity as fetched from the controller has the expected content format.

You can fetch them in the editor by running
await wp.data.resolveSelect( 'core' ).getEntityRecords( 'postType', 'wp_block' ).

E.g.,

"content" : {
    "raw": "<!-- wp:paragraph -->\n<p>A synced pattern</p>\n<!-- /wp:paragraph -->",
    "protected": false,
    "block_version": 1
}

The "item" passed to getJsonFromItem has a content property, but it's the raw string.

I think it's because the item is fetched using the getEditedEntityRecord selector, which maps "raw" values to the properties using getRawEntityRecord.

If you swap in getEntityRecord, it works.

For that reason I think we should support both, e.g., item.content?.raw and item.content. I can get a PR up to illustrate.