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

[Stefano8663]

Hi guys.

I wrote this post a couple of weeks ago, it was closed: #7250 (comment)

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...

[Stefano8663]

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

[judomu]

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

[tofumatt]

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 🤔

[Stefano8663]

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

[RobinRoelofsen]

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.

[Clorith]

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.

[Stefano8663]

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._wpLoadGutenbergEditor</</<http://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]

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...

[RobinRoelofsen]

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.

[Clorith]

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?

[RobinRoelofsen]

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.

[SiR-DanieL]

I have the same issue

[SiR-DanieL]

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)

[aduth]

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:

gutenberg/nux/components/dot-tip/index.js

Line 35 in f143608

popover.focus();

The concern about using defer was raised at #6631 (comment) 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();

[0xcrypto]

@aduth localStorage.clear(); did not work. After refresh, got this alert.

After disabling the coblocks plugin, running localStorage.clear(); and refreshing, the errors in javascript console was gone but the blank screen is still there.

[aduth]

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.

[RobinRoelofsen]

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.

[tofumatt]

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 😞

[RobinRoelofsen]

No, it didn't.

[0xcrypto]

@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.

[gagan0123]

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.

[aduth]

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?

[RobinRoelofsen]

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.

[aduth]

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

1. Install Strong Testimonials plugin
2. Publish a new Testimonial via Testimonials > Add New
3. Create and save a new Testimonial view via Testimonials > Views > Add New
4. Copy the generated view shortcode
5. Paste shortcode into a new post via Posts > Add New
6. Save post
7. 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:

gutenberg/lib/client-assets.php

Line 996 in 8fa8b64

global $post;

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.

[RobinRoelofsen]

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

[aduth]

@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:

1. https://github.com/WordPress/wordpress-develop/blob/0e7ed499e0c9f2f5df3c26b982b9722fe83af906/src/wp-includes/class-wp-query.php#L3229
2. https://github.com/cdillon/strong-testimonials/blob/3d07e4fb47af06a1d04207a8cb76fc3f1fb51840/templates/default/content.php#L15
3. https://github.com/cdillon/strong-testimonials/blob/3d07e4fb47af06a1d04207a8cb76fc3f1fb51840/includes/class-strong-view-display.php#L163
4. https://github.com/cdillon/strong-testimonials/blob/3d07e4fb47af06a1d04207a8cb76fc3f1fb51840/includes/class-strong-testimonials-shortcode.php#L95
5. https://github.com/cdillon/strong-testimonials/blob/3d07e4fb47af06a1d04207a8cb76fc3f1fb51840/includes/class-strong-testimonials-shortcode.php#L16

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 WPChill/strong-testimonials#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.

[designsimply]

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.

[asm0dey]

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

[Galph]

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.