Wp-calypso: Turning block into a reusable block breaks editor

[simison]

Steps to reproduce

1. Have a wpcom simple site with Gutenberg (happened in 7.7.1 but also other versions)
2. Have a block on a page
3. Turn the page into a reusable block
   
4. Editor breaks
   
5. Get Error: An error occurred while running 'mapSelect': Cannot read property 'length' of undefined

It doesn't happen each time and consistently, only sometimes.

Related to https://github.com/Automattic/wp-calypso/issues/40127?

Log:

Error: An error occurred while running 'mapSelect': Cannot read property 'length' of undefined
The error may be correlated with this previous error:
TypeError: Cannot read property 'length' of undefined
    at b (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:38:3066)
    at p (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:38:2400)
    at f (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:38:1879)
    at Vr (https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/blocks/index.js?m=1584058609h&ver=62d2ef2b823630f6a2dc6480f95a2d52:2:143481)
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/block-editor/index.js?m=1584058609h&ver=7a8c786c617cc3c2c2e61df45e20373a:1:183950
    at u (https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/block-editor/index.js?m=1584058609h&ver=7a8c786c617cc3c2c2e61df45e20373a:1:6934)
    at c (https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/block-editor/index.js?m=1584058609h&ver=7a8c786c617cc3c2c2e61df45e20373a:1:182093)
    at Array.map (<anonymous>)
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/block-editor/index.js?m=1584058609h&ver=7a8c786c617cc3c2c2e61df45e20373a:1:182503
    at u (https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/block-editor/index.js?m=1584058609h&ver=7a8c786c617cc3c2c2e61df45e20373a:1:6934)

Original stack trace:
    at Me (https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1:22884)
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1:23440
    at je (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:116:476)
    at qe (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:127:115)
    at ph (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:254:489)
    at lh (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:164:409)
    at O (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:159:71)
    at ze (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:156:14)
    at https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:91:49
    at unstable_runWithPriority (https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:26:340)

[ramonjd]

I've tried every which way to replicate this, but haven't had much luck.

If this can reliably reproduced, it'd be great if we could trace the js in the console and expand the source {} to help find where it's borking.

[kriskarkoski]

I have not been able to reproduce this yet either. From the screenshot it looks to be a Heading inside a Layout Grid block, but I tried that setup specifically and it worked without replicating this issue.

[noahtallen]

I was also unable to replicate this issue, even on a dotcom-fse site. Creating, viewing, and managing reusable blocks is working for me on 7.7.1.

[simison]

I'll close this meanwhile, let's see if it pops up again.

[LauraSWP]

@simison I have encountered this issue twice.
Recorded a video testing so you can see when it happens:
https://www.loom.com/share/7ca082d1b810411ebb71158cb288947a

Scenarios:

• Adding an element, make it a reusable block, add a reusable block below it and edit it. ERROR.
• Adding a reusable block, edit it. ERROR.
• Add a text reusable block, edit the text. WORKS. Edit the image. ERROR.

Error:

Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Sb (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:212:410) at Mg (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:85:80) at Object.<anonymous> (https://testkgumihobusiness.blog/wp-content/plugins/gutenberg/build/components/index.js?ver=800a8e860175b5b082947a0c832c0025:6:102642) at https://testkgumihobusiness.blog/wp-content/plugins/gutenberg/build/components/index.js?ver=800a8e860175b5b082947a0c832c0025:6:100336 at Vb (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:104:431) at Ti (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:148:85) at unstable_runWithPriority (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react.min.js?ver=16.9.0:26:340) at Ma (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:52:280) at Ia (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:140:407) at ze (https://testkgumihobusiness.blog/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:118:14)

[roo2]

hmm I couldn't reproduce it again and I tried on a fse and normal site... but I'll re-open and have asked Laura for any more info in slack.

[ramonjd]

Also tried to reproduce unsuccessfully. Is this on a newly-created site or an existing site?

I ask only because there was a similar bug that arose when trying to save a new page or post. We only recently fixed it.

[noahtallen]

it looks like it would be a different underlying cause, since the original bug had to do with mapSelect, and the new bug is related to react or something

[LauraSWP]

I'm getting more users with this issue. They can't edit their blocks.

[LauraSWP]

21406593-hc

[noahtallen]

For what it's worth, I just tried this out on the latest Gutenberg code. I did the steps in the video:

1. Insert pattern
2. Turn it into a reusable block and save it.
3. Insert that same reusable block right below.
4. Edit the duplicated instance.
5. Save the duplicated instance.

This didn't cause an error for me, so perhaps it will be fixed by an upcoming Gutenberg release. I wonder also if this is specific to the gallery block in the reusable block or maybe using the same reusable block twice on a page.

[LauraSWP]

The issue is related to editing any reusable block. Sometimes editing the text works but the images or the alignment always fails. AT and Simple sites always have this problem. Tested with a lot of user sites and my own test site. I'm not sure where it comes from, but it is happening more often.

[LauraSWP]

Happens at Gutenberg 8.2.1 too:

Error: An error occurred while running 'mapSelect': Cannot read property 'length' of undefined
The error may be correlated with this previous error:
TypeError: Cannot read property 'length' of undefined
    at b (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:38:3236)
    at p (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:38:2570)
    at s (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:38:2049)
    at Vr (https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/blocks/index.js?m=1590688222h&ver=9325a3a466900ea444eae499e608989b:2:123401)
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/block-editor/index.js?m=1590688222h&ver=3cda01b68631b160310133efc4d03889:1:209320
    at u (https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/block-editor/index.js?m=1590688222h&ver=3cda01b68631b160310133efc4d03889:1:7995)
    at o (https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/block-editor/index.js?m=1590688222h&ver=3cda01b68631b160310133efc4d03889:1:207496)
    at Array.map (<anonymous>)
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/block-editor/index.js?m=1590688222h&ver=3cda01b68631b160310133efc4d03889:1:207881
    at u (https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/block-editor/index.js?m=1590688222h&ver=3cda01b68631b160310133efc4d03889:1:7995)

Original stack trace:
    at Me (https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/data/index.js?m=1590688222h&ver=8811969b7eb442e6bba297a1f3fe4428:1:27226)
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/8.2.1/build/data/index.js?m=1590688222h&ver=8811969b7eb442e6bba297a1f3fe4428:1:27782
    at je (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:116:476)
    at qe (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:127:115)
    at ph (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:254:489)
    at lh (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:164:409)
    at O (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:159:71)
    at ze (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:156:14)
    at https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:91:49
    at unstable_runWithPriority (https://s0.wp.com/_static/??-eJydUEkOAiEQ/JDQDolmPBjfwtKOPUJDoFHj6+Vk4sXDHCu1pQqeRRH72AM2WBsEagIP5JArVLRedCLWa9vBEPrMgixQYl+IGyx9QId1GUxFmLXRE7hOMYCL2QFxwNcGs+2Sy2b3qPZ31bCSjfS2QplVwKvtUVSxdRC/0X/nq5DTxguweVtQ3STFb+ElnafDaX+cZ2PM+gEKaIm7:26:340)

[jordesign]

Another instance of this in #20981742-hc.

In this case it was happening when editing a reusable block in Firefox. The block(s) would open in the edit view - but when saving, or closing the edit view the error would occur.

The reusable block itself seems to be pretty plain - nothing notable (or nested reusable blocks).

---

As a workaround it still seems possible to edit reusable blocks from the 'All Reusable Blocks' view in the top-right menu of the editor.

[marutim]

Another instance of this in 3015686-ZD and 3026328-ZD

[Addison-Stavlo]

I am unable to reproduce this as well (tried FireFox as noted too). Are there any more details or specifics to the setup where this is causing errors?

[allilevine]

Another instance of this in 3149258-ZD

I was able to open the page in the classic editor and found this: <!-- wp:block {"ref":420} /-->

When I paste that back into the block editor I see a reusable block with the content "Block has been deleted or is unavailable." But it doesn't cause an error again.

[roo2]

I believe I've found a fix for this, I think what happened is that after editing the reusable block, the user is redirected to the reusable blocks list page. I found a bug on that page where the page can consistently fail to load under certain circumstances.

I haven't 100% pinned down what's actually happening, but can reproduce it consistently.
I think it's related to the users' permissions not being cached, so the page tries to load with several null values while user permissions are being fetched, causing JS errors.

https://github.com/Automattic/wp-calypso/pull/45346