Gutenberg: Cannot add block for any post or any user! (solved by configuring CloudFront AWS CDN to pass headers to the application)

[ShadowGames-Dev]

I am unable to add a block on a post, new or old. This error started when I upgraded to WP 5.0.1.

I have disabled all of my plugins, The checkbox "Disable the visual editor when writing" on my profile is not checked.

I have attempted may recommendations as per other issues here but none of them have resolved mine.

I have tried other user profiles on the site but all have the very same issues.

I have also re-installed WP several times now and the issue is persisting!

[ShadowGames-Dev]

Now I am even more confused...

I have my WP site hosted on AWS, running on an EC2 instance, I have an ElasticLoadBalancer and then am setting up my Route53 to connect to the site thought CloudFront. I have full SSL setup on the site.

When I am accessing the site on the domain, I have the error I described above... But, when I access it thought the IP of the EC2 instance, I do not have this error...

Can anyone explain to me what is going on here??????????

[ShadowGames-Dev]

I have invalidated the caches in-case that was causing any issues, cleared my browser cache completely... No change...

[swissspidy]

When I am accessing the site on the domain, I have the error I described above... But, when I access it thought the IP of the EC2 instance, I do not have this error...

This is usually a sign of some scripts not being loaded.

Do you see any errors in the browser's JavaScript console? Are there any failed requests in the "Network" tab of the developer tools?

[ShadowGames-Dev]

There are no errors in the Console and no failed requested being shown in the F12 developer tools.

[jrsconfitto]

I'm experiencing a similar issue with my .org site: I also cannot add a block. Same screenshot basically:

I cannot switch between visual and code mode in the editor, either. The link's not there and the keyboard shortcuts for it don't work.

• There's no JS errors in the console (in troubleshooting mode, default theme)
• This started in 4.9.8 for me, I was hoping I just goofed something up and a fresh install of 5 would fix it but I'm on 5.0.1 now and still have the issue.

I have a lengthy post on the support forum about it and would be happy to provide any other information that I can, here or there.

A snippet from my post:

The keyboard shortcut to switch between visual and code (CTRL-SHIFT-ALT+M) does nothing.

When I installed the Classic Editor plugin to see if that helped, I can’t see the visual or code tabs:
Classic editor plugin: no visual or code tabs. This was done in troubleshooting mode on 2019 theme and there were no JS errors in the console.

[designsimply]

I tested with WordPress 5.0.1 (no plugins active) using Edge 42 on Windows 10 and was unable to replicate the problem. I'd like to help you find the source of the trouble though! May I ask for additional information?

• List of active plugins
• WordPress version
• Gutenberg plugin version if it is installed*
• OS and browser versions
• Are you using a VPN or behind any firewall which could be blocking something in an unpredictable way?

Note: the Gutenberg plugin is no longer required since WP5.0 and you may uninstall it unless you are a developer working on the Gutenberg project or are helping with beta testing.

[swissspidy]

If you run wp.data.select( 'core/editor' ).getEditorSettings().richEditingEnabled in your browser's JS console, what does it return?

[swissspidy]

Also added some helpful debugging steps in https://github.com/WordPress/gutenberg/issues/12881#issuecomment-448159119. Please try these as well.

[ShadowGames-Dev]

@designsimply

I have no active or installed plugins right now.
I am on WP 5.0.1
Gutenberg is not installed as it is with WP 5.0.1
Windows 10, Chrome Version 70.0.3538.110
No VPN, standard network connection.

@swissspidy That command returns "true".

Again, this issue is happening with the sites live URL going through CloudFront on AWS. When I access the site thought the EC2 IP, it appears to be working fine, but it is not acceptable to access the site through its IP.

[jrsconfitto]

Hi @designsimply,

I saw your post on the support forum, so I've answered there and I think that covers most of your questions.

My site is also live and is operated by a third-party host, so I don't know much about details but they are also hosting on AWS.

Please let me know if there's anything else I can add to this issue.

[ShadowGames-Dev]

I am operating and have setup the hosting myself. All done, configured on an EC2 instance, going through a load balance and through CloudFront with Route53 set to the domain.

[ShadowGames-Dev]

Is anyone else able to add to this?
I still have the same issue!

[designsimply]

There's one StackExchange link that @jrsconfitto pointed to earlier which has a solution posted: https://wordpress.stackexchange.com/questions/126110/visual-editor-missing-server-side-problem-how-would-you-debug-it and it might be worth checking that as well.

[ShadowGames-Dev]

@designsimply This solution does not match with me issue and did not resolve anything...

[designsimply]

Thanks for checking it.

I found something in the support forums which may be more relevant:

I’m using the CloudFront, AWS CDN, and one of the behaviors was not passing the headers to the application. When changing this configuration in CloudFront, everything has returned to work.

Source: https://wordpress.org/support/topic/block-editor-no-longer-working-only-shows-html/page/2/#post-11014978

Can you check for that option?

[jrsconfitto]

I can confirm that CloudFront not passing headers along was the source of the issue, and once those were handled our editor is working great again. My host chose to fix it by adding code to the functions file to force rich editing on.

Thanks again @designsimply for your detective work!

[ShadowGames-Dev]

@jrsconfitto Do you have the code/resolution for this as I am still having issues!

[jrsconfitto]

@ShadowGames-Dev Sure, I can share that. There's two methods for resolution that we've landed on:

1. Change the CloudFront behaviors to pass on headers. This is detailed in this post by user g3luka.
2. Add code to functions.php that will enable the user_can_richedit flag as detailed in my post. Many thanks to https://webhost.io/, our host, for coming up with this one.

[designsimply]

Thank you @jrsconfitto for your persistence and patience and for posting more details about the solution for others!

[designsimply]

Adding webhost.io's notes (linked to above by @jrsconfitto) for reference:

Researching it I found that WP does an odd thing in looking at the UserAgent to determine if it should show the editor or not. […] A CDN strips the UserAgent out to improve caching, so the following code forces it to be shown. […]

function richedit_wp_cloudfront () {
   add_filter('user_can_richedit','__return_true');
}

add_action( 'init', 'richedit_wp_cloudfront', 9 );

[ShadowGames-Dev]

@jrsconfitto Thanks for that. It worked for me!

[andreyugolnik]

Hello, I have some issue with block editor: "+" button disabled. I have tried 5.0.1 and latest 5.0.3 versions.

wp.data.select( 'core/editor' ).getEditorSettings().richEditingEnabled returns false

My config: latest macOS, both Safari and Google Chrome.

[jrsconfitto]

@andreyugolnik hi! Is AWS part of your hosting environment, and if so, have you tried looking into the mitigations given above?

[lapo-luchini]

I solved this by disabling visual editor in user configuratiom, and then re-enabling it again. 🤷🏻‍♂️

[seitenmeister]

@lapo-luchini Thanks! That solved my Problem :-)

[philbirnie]

Thank you @jrsconfitto & @designsimply for leading me to the solution. For all wp-admin paths, I had the following headers whitelisted: Authorization, Origin, Host; however as they suggested, this is insufficient -- adding the User-Agent to the Header whitelist in our cache-policy took care of it. There was no need to make edits to the code.

Also of note, if you are using CloudFront, I had issues with blocks loading/saving -- for those particular paths (i.e. wp-json/*) make sure that the Refer and X-WP-Nonce are also passed to the origin.