New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ShadowGames-Dev opened this Issue Dec 16, 2018 · 23 comments

Comments

Projects
None yet
5 participants
@ShadowGames-Dev
Copy link

ShadowGames-Dev commented Dec 16, 2018

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

block-grey

edit

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

profile

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

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 16, 2018

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

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 16, 2018

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

@swissspidy

This comment has been minimized.

Copy link
Member

swissspidy commented Dec 17, 2018

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

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 17, 2018

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

@jrsconfitto

This comment has been minimized.

Copy link

jrsconfitto commented Dec 17, 2018

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

This comment has been minimized.

Copy link
Contributor

designsimply commented Dec 18, 2018

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

This comment has been minimized.

Copy link
Member

swissspidy commented Dec 18, 2018

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

@swissspidy

This comment has been minimized.

Copy link
Member

swissspidy commented Dec 18, 2018

Also added some helpful debugging steps in #12881 (comment). Please try these as well.

@ShadowGames-Dev

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 18, 2018

@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

This comment has been minimized.

Copy link

jrsconfitto commented Dec 18, 2018

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

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 18, 2018

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

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 20, 2018

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

@designsimply

This comment has been minimized.

Copy link
Contributor

designsimply commented Dec 20, 2018

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

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 21, 2018

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

@designsimply

This comment has been minimized.

Copy link
Contributor

designsimply commented Dec 21, 2018

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

This comment has been minimized.

Copy link

jrsconfitto commented Dec 28, 2018

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

This comment has been minimized.

Copy link

ShadowGames-Dev commented Dec 31, 2018

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

@jrsconfitto

This comment has been minimized.

Copy link

jrsconfitto commented Jan 2, 2019

@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

This comment has been minimized.

Copy link
Contributor

designsimply commented Jan 7, 2019

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

@designsimply

This comment has been minimized.

Copy link
Contributor

designsimply commented Jan 7, 2019

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 );

@designsimply designsimply changed the title Cannot add block for any post or any user! Cannot add block for any post or any user! (solved by configuring CloudFront AWS CDN to pass headers to the application) Jan 7, 2019

@ShadowGames-Dev

This comment has been minimized.

Copy link

ShadowGames-Dev commented Jan 8, 2019

@jrsconfitto Thanks for that. It worked for me!

@andreyugolnik

This comment has been minimized.

Copy link

andreyugolnik commented Jan 10, 2019

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

This comment has been minimized.

Copy link

jrsconfitto commented Jan 10, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment