Wp-calypso: Gutenberg 7.7 on wpcom; inserting "Latest Posts" block fatals

[simison]

Steps to reproduce

1. On a brand new wp.com free site, with Varia theme
2. In WordPress.com block editor (https://wordpress.com/block-editor/post/SITE_SLUG/POST_ID) running Gutenberg 7.7.1...
3. Insert "latests posts" block
4. Observe fataling block and error in console:
   An error occurred while running 'mapSelect': d[r] is undefined index.js:1:22905 Me https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 Ue https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 je https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:116 ph https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:253 lh https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:164 O https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:159 ze https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:156 mg https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:91 unstable_runWithPriority https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:26 Ma https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:90 mg https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:90 V https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:90 Sb https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:251 Mg https://s0.wp.com/_static/??-eJydUMsOwiAQ/CFha2JtPRi/hcdat8JCYFHj18vJxIuHHifzygw8syJ2oXmssFbwVAUeyD4VKGic6Eis17qDLnSJBVkgh7YQV1hahxbL0pmCMOlJ78E2Ch5sSBaIPb42mE2TlDe7e7W7q4qFTKC3EUqsPF5NC6KyKZ34jf47X/kUN16A1ZmM6iYxfAsv8bwf58MwzsfhtH4AFleJzg==:123 e https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 t https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 o https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 o https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 b https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 p https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 s https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 x https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 A https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 dispatch https://s0.wp.com/wp-content/plugins/gutenberg-core/7.7.1/build/data/index.js?m=1584058609h&ver=b79a407ada12e6608f0d38482ef1bb40:1 n https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 e https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 e https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 u https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 any https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 e https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 e https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5 u https://s0.wp.com/_static/??-eJydzsEOgyAQBNAfKqwmtdpD029B2NA1CLiwUf++3noux8lkXgb2rGyKFWOFHMRTLODlijOyvxpGGPWoe5iFggMqqnxMCGlXuIkJQNHhoZdyg/8gm9acCjbvHWZGayq6ZiIzJaZ6qk1Q2p8wOjkUJ6kUf8p7ffXDdO+G6dE9ly+vGIE1:5

[noahtallen]

Interestingly, the latest posts block is not broken locally on Gutenberg master, but I cannot find a reference to a fix in core. So it may be dotcom specific

[noahtallen]

If I install the 7.7.1 plugin zip file on an atomic dev site, the latest posts block also works there in both wp-admin and iFramed in Calypso.

So it currently only affects Simple sites both in wp-admin and iFramed.

[simison]

This could be something in .com specific middlewares or API is returning
data differently?

On Sat, 14 Mar 2020, 01:57 Noah Allen, [e-mail] wrote:

If I install the 7.7.1 plugin zip file on an atomic dev site, the latest
posts block also works there in both wp-admin and iFramed in Calypso.

So it currently only affects Simple sites both in wp-admin and iFramed.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Automattic/wp-calypso/issues/40127#issuecomment-598976758,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAVJADXX2VV5HGKJBGSVXLRHLB67ANCNFSM4LHFYNEQ
.

[simison]

Happened also with re-usable block mechanism, might be related: https://github.com/Automattic/wp-calypso/issues/40229

[noahtallen]

Yeah, the mapSelect thing sounds similar.

[ramonjd]

I'm pretty sure it's because of this change (since 7.6): https://github.com/WordPress/gutenberg/pull/17151

I think the latest post component is trying to set the default dimensions of feature images, whether they exist or not:

https://github.com/WordPress/gutenberg/pull/17151/files#diff-1b1c49e8081943c015861c96b2184474R440

We're assuming that imageDimensions is populated with slug keys.

But it isn't.

wp_get_registered_image_subsizes() in gutenberg_extend_settings_image_dimensions() returns an empty array.

See: https://github.com/WordPress/gutenberg/pull/17151/files#diff-620130744b6b73b822a3df609671d930R690

This means that the latest post edit.js is trying to find the width in an undefined object.

Why?

I've traced it back to get_intermediate_image_sizes(), which returns and empty array on .com.

It should at least return array( 'thumbnail', 'medium', 'medium_large', 'large' );

But it doesn't because we disabled the automatic creation of intermediate image sizes in an mu-plugin 12 years ago :)

See: r11305-wpcom

Possible fixes

It works if we return the default dimensions in gutenberg_extend_settings_image_dimensions:

function gutenberg_extend_settings_image_dimensions( $settings ) {
    $image_dimensions = array();
    $all_sizes        = wp_get_registered_image_subsizes();

    foreach ( $settings['imageSizes'] as $size ) {
        $key = $size['slug'];
        if ( isset( $all_sizes[ $key ] ) ) {
            $image_dimensions[ $key ] = $all_sizes[ $key ];
        } else {
                         // JUST RETURN SOMETHING YO!
                         $image_dimensions[ $key ] = [ 'width' => 0, 'height' => 0, 'crop' => false ];
                 }
    }

    $settings['imageDimensions'] = $image_dimensions;
    return $settings;
}

We could be a little more defensive in edit.js as well.

For example,

        defaultImageWidth: get( imageDimensions[ featuredImageSizeSlug ], 'width', 0 ),
        defaultImageHeight: get( imageDimensions[ featuredImageSizeSlug ], 'height', 0 ),

lodash.get is being pulled into this module anyway :)

This assumes upstream changes.

Proposal

For the 7.7.1 release we could just change 7.7.1/lib/client-assets.php on .com, and then push for an upstream change in the next release.

[simison]

I've traced it back to get_intermediate_image_sizes(), which returns and empty array on .com.

It should at least return array( 'thumbnail', 'medium', 'medium_large', 'large' );

But it doesn't because we disabled the automatic creation of intermediate image sizes in an mu-plugin 12 years ago :)

That's because we use Photon (our CDN) to resize images for us, and don't want to generate lots of files for nothing.

[ramonjd]

That's because we use Photon (our CDN) to resize images for us, and don't want to generate lots of files for nothing.

Good to know. 🙇

Do you all think we could just update 7.7 on WP.com, and maybe create a Gutenberg PR?

Not sure if what I proposed is the best solution, but I don't mind throwing up a diff

[simison]

@ramonjd @jeraldjuice @razvanpapadopol @vindl I'd prefer we don't break this functionality on .com (at least for a long time) — is it possible to temporarily fix this on .com even if we do core patch?

[noahtallen]

change 7.7.1/lib/client-assets.php on .com

We'd need to make sure this change is included on Atomic... which I guess is our best bet for now.

We could be a little more defensive in edit.js

Definitely agree! I don't know if we should change the defaults returned in php... really don't feel super comfy making those changes without knowing how photon interacts with everything.

It wouldn't be hard to change this from

// Before
defaultImageWidth: get( imageDimensions[ featuredImageSizeSlug ], 'width', 0 )

// after
defaultImageWidth: get( imageDimensions, [ featuredImageSizeSlug, 'width'], 0 )

let's file a PR with that change if it works :P

[ramonjd]

defaultImageWidth: get( imageDimensions, [ featuredImageSizeSlug, 'width'], 0 )

Seems like the path of least resistance! If it saves us having to edit the php at all, as you mentioned, then bonus.

[noahtallen]

It seems like we use featuredImageSizeSlug a lot in PHP in JS in that PR, so I really wonder if we can cover all the cases where they expect it to be available.. :/

[ramonjd]

It seems like we use featuredImageSizeSlug a lot in PHP in JS in that PR, so I really wonder if we can cover all the cases where they expect it to be available.

But we only care about safely testing properties in imageDimensions, right?

I kinda think this should have been done in the first place.

So far it's only used in one file, which was introduced in that PR.

[roo2]

I'll work on a patch for the js-only fix and test in my sandbox

[ramonjd]

I'll work on a patch for the js-only fix and test in my sandbox

That seems like the best option as far as I can tell. It looks like we'll have to rebuild the JS however, and make sure we don't overwrite any WPCOM 'fixes' we've currently got running in there.

I believe there are only a couple in php files so the js should be okay to rebuild.

[roo2]

The suggested JS only fix worked, I've raised this guenberg PR to fix this upstream. https://github.com/WordPress/gutenberg/pull/21070 I'll make a Phabricator diff for this patch too

[roo2]

this is the Phabricator diff, unfortunately it's bundled JS but you can test it in a sandbox

D40674-code

[noahtallen]

Fix works for me!

[ramonjd]

Fixed in D40674-code

Upstream in progress: WordPress/gutenberg#21070