Gutenberg: Attempts to edit posts that contain Strong Testimonials plugin shortcodes open as blank pages

Created on 22 Jun 2018 · 29Comments · Source: WordPress/gutenberg

Hi guys.

I wrote this post a couple of weeks ago, it was closed: https://github.com/WordPress/gutenberg/issues/7250#issuecomment-399156253

Unfortunately, I just upgraded to Version 3.1.0 and the issue came back. When I click to edit an article/page or to create a new one, the page comes up completely blank!
I have uninstalled the plugin and installed it again, but still nothing...

[Type] Plugin Interoperability

Source

Stefano8663

All 29 comments

I have opened the console, this is what I found...

JQMIGRATE: Migrate is installed, version 1.4.1 load-scripts.php:9:542
[Show/hide message details.] TypeError: B is undefined[Learn More] index.js:1:24434
this.wp.utils<
http://www.x.com/wp-content/plugins/gutenberg/build/utils/index.js:1:24434
e
http://www.x.com/wp-content/plugins/gutenberg/build/utils/index.js:1:138
this.wp.utils<
http://www.x.com/wp-content/plugins/gutenberg/build/utils/index.js:1:557
<anonymous>
http://www.x.com/wp-content/plugins/gutenberg/build/utils/index.js:1:35
[Show/hide message details.] TypeError: z is undefined[Learn More] index.js:37:143483
[Show/hide message details.] TypeError: yr is undefined[Learn More] index.js:12:119124
[Show/hide message details.] TypeError: ee is undefined[Learn More] index.js:12:37123
[Show/hide message details.] TypeError: M is undefined[Learn More] index.js:12:39926
[Show/hide message details.] TypeError: wp.editPost is undefined[Learn More] post.php:2821:6
window._wpLoadGutenbergEditor</</<
http://www.x.com/wp-admin/post.php:2821:6

Stefano8663 on 22 Jun 2018

Same issue after upgrading to 3.1.0. Console output: https://gist.github.com/julmuell/b5e355dd3c127bb48bd62c74b94db145

judomu on 22 Jun 2018

Hi @Stefano8663,

Thanks for the bug report! I've edited the title of the issue because "The problem is back after upgrading!" is a bit hard to triage and fix 😄. Your issue description and links to previous issues are helpful though, thanks! If you could title your issues descriptively in the future it will help us to sort through the issue and address it, thanks!

It looks like there is a JS error there but I'm not seeing it locally on my development build. Could be an issue with the packaged Gutenberg 🤔

tofumatt on 22 Jun 2018

Hi!
Yes, you are right, the title wasn't the best one LOL
I hope there will be a solution, I love the plugin! ;-)

Stefano8663 on 22 Jun 2018

Having this problem on all sites running Gutenberg, but with the Home page only. Screen blank, no meta boxes.

New page: no problem. Other pages: no problem. New page: no problem.

Turned off all other plugins, problem persists, so definitely a Gutenberg issue.

RobinRoelofsen on 23 Jun 2018

I just fetched a fresh copy of Gutenberg from the plugin directory, and I'm unable to replicate this, not for regular posts and pages, or the page defined as the front page of my site.

If you are able to test something for me, in your wp-config.php file, add define('CONCATENATE_SCRIPTS', false ); before the line that says to stop editing, it's a bit of a long shot, but it's been helpful in the past and would help identify the cause here.

Clorith on 23 Jun 2018

Done it, but it's still the same...

JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:542
[Show/hide message details.] TypeError: B is undefined[Learn More] index.js:1:24434
[Show/hide message details.] TypeError: z is undefined[Learn More] index.js:37:143483
[Show/hide message details.] TypeError: yr is undefined[Learn More] index.js:12:119124
[Show/hide message details.] TypeError: ee is undefined[Learn More] index.js:12:37123
[Show/hide message details.] TypeError: M is undefined[Learn More] index.js:12:39926
[Show/hide message details.] TypeError: wp.editPost is undefined[Learn More]
window._wpLoadGutenbergEditorhttp://www.xxx/wp-admin/post.php:2904:6

Source map error: request failed with status 404
Resource URL: http://www.xxx.com/wp-includes/js/jquery/jquery.form.min.js
Source Map URL: jquery.form.min.js.map[Learn More]

Stefano8663 on 23 Jun 2018

The problem is with Firefox! I went in with Opera and Chrome and it works just fine!
Then I cleared the cache in Firefox and now it works!
Crazy...

Stefano8663 on 23 Jun 2018

Nope. I'm using Chrome and the problem is there as well. reverting back to Gutenberg version 3.01 solves the issue, but 3.10 is not working.

Cleared cache as well. Firefox isn't working either.

RobinRoelofsen on 23 Jun 2018

What browsers and version numbers of those tested browsers do you have, and are there any browser extensions enabled if so have you tried with no extensions running?

Clorith on 24 Jun 2018

Opera 53.0.2907.99: no extensions
Chrome 67.0.3396.87: with extensions
Firefox 60.0.2 (64-bits): no extensions

Gutenberg 3.01 works, 3.10 doesn't.

RobinRoelofsen on 24 Jun 2018

I have the same issue

SiR-DanieL on 25 Jun 2018

This is the console log

Uncaught TypeError: Cannot read property 'focus' of undefined
    at Object.<anonymous> (index.js:1)
    at e (index.js:1)
    at index.js:1
    at index.js:1
index.js:37 Uncaught TypeError: Cannot read property 'keycodes' of undefined
    at Object.<anonymous> (index.js:37)
    at n (index.js:1)
    at index.js:1
    at index.js:1
index.js:1 Uncaught TypeError: Object(...) is not a function
    at Object.299 (index.js:1)
    at e (index.js:1)
    at wp.nux.0 (index.js:1)
    at index.js:1
index.js:12 Uncaught TypeError: Object(...) is not a function
    at Object.<anonymous> (index.js:12)
    at n (index.js:1)
    at index.js:1
    at index.js:1
blob:https://nicola.blog/cc69343f-2955-41a3-bdfb-d9892e5fced1:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
index.js:12 Uncaught TypeError: Cannot read property 'withFallbackStyles' of undefined
    at Object.<anonymous> (index.js:12)
    at n (index.js:1)
    at index.js:1
    at index.js:1
index.js:12 Uncaught TypeError: Cannot read property 'withState' of undefined
    at Object.<anonymous> (index.js:12)
    at n (index.js:1)
    at index.js:1
    at index.js:1
post.php?post=3822&action=edit:3502 Uncaught TypeError: Cannot read property 'initializeEditor' of undefined
    at HTMLDocument.<anonymous> (post.php?post=3822&action=edit:3502)

SiR-DanieL on 25 Jun 2018

Thanks for the error stack trace. Prime suspect here, particularly with the release, is the NUX dot tips. Specifically, I think it's this line throwing the error:

https://github.com/WordPress/gutenberg/blob/f1436080299ae93b2f9b55f5bf2df1410818c2b5/nux/components/dot-tip/index.js#L35

The concern about using defer was raised at https://github.com/WordPress/gutenberg/pull/6631#discussion_r191712101 but the workaround left in place. Reiterating that the concern was justified, and is a likely culprit for the error (cc @noisysocks @youknowriad). In the very worst case, we should have at least used withSafeTimeout to ensure the delay was cancelled if the component was unmounted in the time between, which is what appears to be happening here.

Still not entirely clear _why_ it's getting unmounted, as I'm unable to reproduce the issue.

For those suffering from the issue, you may try entering the following into your developer tools console and reloading the page to see if it helps:

localStorage.clear();

aduth on 25 Jun 2018

😕1

@aduth localStorage.clear(); did not work. After refresh, got this alert.
screenshot_2018-06-26_14-22-13

After disabling the coblocks plugin, running localStorage.clear(); and refreshing, the errors in javascript console was gone but the blank screen is still there.
screenshot_2018-06-26_14-30-13

0xcrypto on 26 Jun 2018

There appear to be multiple issues within the comments here, at least based on some of you seeing errors in the console and others not.

@0xcrypto or anyone else not seeing any errors; if you have other plugins on your site, could you try disabling them one by one temporarily to see if there is any impact in Gutenberg's ability to display correctly? There may be a specific plugin incompatibility that needs to be addressed.

aduth on 26 Jun 2018

Okay, I did a test on a sandbox site. All plugins off except for Gutenberg 3.10. Then turn them back on and off in batches.

In the end, I had only Gutenberg 3.10 and Strong Testimonials 2.31.8 active, and no editor on the home page. All other pages: no problem.

3.01 and Strong Testimonials works, 3.10 doesn't.

Tried localStorage.clear(); in Chrome console, but just says undefined.

RobinRoelofsen on 26 Jun 2018

👍1

Tried localStorage.clear(); in Chrome console, but just says undefined.

That's normal; the return value from clear() is undefined. That command clears your localStorage (offline storage) where we store some Gutenberg data, but sounds like resetting that data didn't fix it 😞

tofumatt on 26 Jun 2018

No, it didn't.

RobinRoelofsen on 26 Jun 2018

@aduth Unfortunately, I cannot test it on my live site. On a fresh install, it runs fine. In a fresh install, I can see some values associated with gutenberg in local Storage drop-down in storage tab of developer console. These values are missing in my live site. I am trying to make a clone of my live site locally to test further. Will update here soon.

0xcrypto on 26 Jun 2018

Came across similar bug, white screen upon editing a page, turned out it was due to a shortcode.
Anything on the edit page that uses WP_Query, and calls for the_post() method, will result in an empty page for Gutenberg.

Its a known bug for past 7 years, in WordPress, that if WP_Query object calls the_post() it does not reset the post data by wp_reset_postdata() on admin screens.
https://core.trac.wordpress.org/ticket/18408

Modifying the codes in shortcodes resolved the issue for me.

gagan0123 on 26 Jun 2018

👍1

In the end, I had only Gutenberg 3.10 and Strong Testimonials 2.31.8 active, and no editor on the home page. All other pages: no problem.

Hmm, unfortunately I'm having trouble reproducing. I didn't realize 'til now, but you are saying that specifically the editor fails to load for the page which is assigned as the Static Front Page? Is there anything notable about this page, as far as document settings or content? e.g. authorship (authored by a user with a specific role?), tags / categories, discussion settings, menu order, visibility, shortcodes or embeds in content?

aduth on 26 Jun 2018

Okay, that's a great mind!

The home page has a paragraph block and a shortcode block for Strong Testimonials. Looks like this:

[testimonial_view id="1"]

(the opening and closing comments are being stripped from this box, but you know what that looks like... wp:shortcode and /wp:shortcode)

Removing the shortcode block lets Gutenberg edit the page again!

Now I am tempted to start blaming Strong Testimonials, but like I said, using G 3.01 gives no problems with the same shortcode, but 3.10 does. G is apparently causing the issue here.

RobinRoelofsen on 26 Jun 2018

Great, thanks @RobinRoelofsen . Here are steps to reproduce from a fresh install:

Install Strong Testimonials plugin
Publish a new Testimonial via Testimonials > Add New
Create and save a new Testimonial view via Testimonials > Views > Add New
Copy the generated view shortcode
Paste shortcode into a new post via Posts > Add New
Save post
Refresh page

I haven't tracked down the issue in its entirety, though it seems to be that Gutenberg is trying to initialize with the wrong post (loads a testimonial, not the intended post to edit).

wp.editPost.initializeEditor( 'editor', "wpm-testimonial", 12375, editorSettings, window._wpGutenbergDefaultPost )

I suspect this may be indirectly related to refactoring of editor initialization in #6384 (cc @youknowriad ). I imagine that Strong Testimonials may be setting the $post global, which is being picked up from Gutenberg here:

https://github.com/WordPress/gutenberg/blob/8fa8b64091f06798d394bfc865e9c08e86c05dc8/lib/client-assets.php#L996

Unclear yet whether this is something that Strong Testimonials should be cleaning up after itself, or if Gutenberg can more reliably retrieve the post object for the post being edited.

aduth on 26 Jun 2018

Great news that it can be replicated. Thanks for looking into it.

RobinRoelofsen on 26 Jun 2018

@gagan0123 was spot on with his comment. Specifically, Strong Testimonials is causing the $post global to be overridden via its shortcode template rendering.

Working backwards:

While the rendered preview is not used, it's still being generated due to the default behavior of the posts REST API endpoint (i.e. post.content.rendered).

Since there's a good chance that more than just this one plugin could cause the $post variable to be reset, I think it might be in our interest to implement a more reliable way to retrieve the current post.

A few ideas:

Recreate assignment as done in wp-admin/post.php
Assign a Gutenberg-specific global variable using the $post value passed through the replace_editor filter

Separately, I have opened a pull request to the Strong Testimonials repository at https://github.com/cdillon/strong-testimonials/pull/12 to avoid overriding the $post variable. You can copy the modifications into your own copy of the plugin and it should resolve the issue.

aduth on 26 Jun 2018

👍1

Really nice sleuthing here! I am closing this issue in favor of a new more streamlined bug report to try to help make it easier for developers to review and respond to the underlying problem. See #7582.

designsimply on 27 Jun 2018

I have blank page instead of post editing one too.
Version is 3.4.0, WP is latest.

Looks like it conflicts with Webcraftic Clearfy

asm0dey on 4 Aug 2018

The "Table of Contents Plus" plugin is causing this issue for me.

If I save a post containing the shortcode to display a table of contents, I am unable to edit the article unless I disable the plugin first to avoid a blank screen.