Gutenberg: Add Classic - This block has encountered an error and cannot be previewed.

[thewebarea]

Issue Overview

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues and/or PRs

Todos

• [ ] Tests
• [ ] Documentation

[Soean]

@thewebarea Thanks for your report. We need a little more informations to reproduce an solve the error.

What where your steps to produce this error?
Have you just added a Classic Block?
Do you see an error in the console log?
Are you using a fresh installation or any special theme and plugins?

[thewebarea]

[thewebarea]

I just added a Classic Block.
I use Theme UnderStrap.
ACF Plugin.

[zakoops]

With Gutenberg version 2.2.0, I'm having the same problem (tested with Safari and Chrome).

But as soon as I deactivate the ACF plugin, the _Classic_ block is working again, back on track.

So at least we can probably pinpoint the problem to the presence of this plugin.

My first small grain of salt... (all new to GitHub here).

[youknowriad]

When you use meta boxes, a second version of TinyMCE is loaded conflicting with the one used by default by the classic blocks. This kind of issues will be closed once we merge in Core and align the TinyMCE scripts used. Right now we're loading two scripts.

see #3840

[danielbachhuber]

This will be fixed by #6848

[meymigrou]

I'm having the same problem with a test blog that I have. No other plugins installed expect Gutenberg. Any ideas on how to fix it? It shows the error in every block in every article (published, trashed or drafted).

[soerencarl]

I have the same error as @meymigrou "This block has encountered an error and cannot be previewed.". It seems to be only a display problem. If I go on View Page I can see everything as described in the Code Editor as well: "<!-- wp:image {"id":184} --> <figure class="wp-block-image"><img src="https://810union.com/wp-content/uploads/2018/06/placeholder-1.jpg" alt="" class="wp-image-184" /></figure> <!-- /wp:image -->". But in the View Editor I can not see anything. How can I change that? Is it maybe a problem related to the Theme I am using? The Preview Button as well only leads to an about:blank site. That is not very useful at the moment. I hope it will change soon as I believe in Gutenberg Editor is a very nice project and once it would work smoothly would led me change from wix to wordpress.

[peterluit]

Same problem here on several sites, already made a new post here to ask for serious investigation on this problem. It occured on 3-4 sites, no matter what configuration. It started about 3-4 releases ago.

[meymigrou]

@peterluit @soerencarl I don't understand why they closed this issue ticket. There are a lot of people having the same problem. I even asked the theme creator and he told me that the problems occur from the Gutenberg plugin. They should fix that. I'm having the same problem in two websites right now.

If anyone has found a way to fix the problem, they should tell us. I'm only using the Gutenberg plugin on my WordPress website, so deactivating any plugins won't work for me.

[peterluit]

OK, let me explain the issue here and the possible solution. I am on Plesk and the latest Plesk version does supply an enormous amount of protections. So the wp-includes folder will be protected against external (plugins) execution of php files (if you set all protections on). There is one files there: wp-tinymce.php which is needed by Gutenberg. If you use the Plesk protection, you will see the error message, caused by the fact that this file cannot be executed (error 403, if you use 'inspect' in Chrome'.

OK, the solution, switch off the protection of the wp-includes folder and add the following in an independent .htacces file in the wp-includes folder:

Sorry, I cannot insert this in plain text here, the editor does not seem to leek the code....... If you don't want any .htaccess file in you wp-includes, don't worry, just don't do what I adviced. It makes you protection less secure, but at least Gutenberg will work. I insert the .htaccess always in my wp-includes, and you see the exception of the wp-tinymce.php there.

However if this does not work for you, leave the code above out and just work without it!

Please let me know if you have any questions. This works and solved the problem for me. I had it on all sites running in the same Plesk protection of that wp-includes folder. Don't know if Direct Admin does te same, but this should do the job.

It is an issue of the WordPress Toolkit in Plesk. They know about this and they are working on a solution.

I cannot re-open this issue, please feel free to copy this comment and place it as a new issue if you want.

Peter

[ryancwalsh]

I keep getting these "This block has encountered an error and cannot be previewed." errors too. I haven't been able to get the simple official editable example https://github.com/WordPress/gutenberg-examples/tree/master/03-editable to work.

I first had to change title: __( 'Example: Editable', 'gutenberg-examples' ), to title: __( 'Example: Editable'), because of some error about a domain not being found. But other than that, I think my files are clones of that repo example.

[crabilld]

For me, there was a problem in wp-includes. Downloading a fresh install of Wordpress, and replacing my wp-includes folder solved the problem. Apparently, sometimes the problem is with wp-includes/.htaccess. That wasn't the problem for me, but you might want to check that first.