How to fix wordpress gutenberg editor on Wordpress on App Services

Question

Hi,

We host a very performant app service plan on Azure and have migrated old sites as well as created many new sites on on Azure using Wordpres on App Service. However, they are all plagued with the exact same issue when hosted on Azure. You cannot use the gutenberg editor. The styles and images just do not load to the interface. I do not see any console errors or even network errors (all 200 Ok). The editor just looks completely buggy and unusable so something is off with Azure wordpress. I have created fresh installs using both cdn, azure front door, and no options as well and it still has this issue. The crazy thing is the frontend of the website looks perfect so this is a backend editor issue only!

Strangely enough, I installed a block plugin such as kadenceblocks and it still does not work however I did install generateblocks free plugin and the styles and images will work on the desktop view only!! As soon as you switch to tablet or mobile bam the editor is broken again. So its strange adding this one plugin does slightly fix the issue but it is by far no means to a solution.

If someone could please spin up a azure wordpress instance on app services and confirm this is not just an issue with me (tho as stated I have done multiple fresh installs and this issue persists on every site). I want to stay on azure because I love azure portal and I love all the security features but I cannot even have our employees try to edit these sites we host as the editor is broken. I do not want to switch away but if we cannot get this resolved I have no choice unfortunately!!!!

Answer 1

Hi @Shaun , let me summarize the issue and solution here.

Issue:

• Images Missing Styling: In the Gutenberg editor, images appear without the proper styling, making them look incorrect or unformatted. This issue is noticeable in the editor interface but not on the frontend of the website.
• This seems to happen only with Wordpress on Azure App Service.

Potential Cause:

• URL Path Issues: The URLs for the images or CSS files might be incorrect, leading to missing styles.

Solution:

• Install a Wordpress plugin to make sure that Images and CSS use absolute URLs instead of relative URLs.

Please accept an answer if correct. Original posters help the community find answers faster by identifying the correct answer. Here is how.