How to fix wordpress gutenberg editor on Wordpress on App Services

Question

How to fix wordpress gutenberg editor on Wordpress on App Services

Shaun 0

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

Screenshot 2025-01-13 at 11.02.55 PM

Screenshot 2025-01-13 at 11.03.48 PM

Silvia Wibowo 6,041 Reputation points Microsoft Employee Volunteer Moderator

2025-01-15T01:53:18.7766667+00:00

Hi @Shaun , would this article be helpful for your issue?

[Edited] I deleted URL for the article to prevent spreading of the malware. Issue and solution are summarized in the answer.
Shaun 0 Reputation points

2025-01-15T03:10:48.5266667+00:00

FIrst thank you for the reply but that website link you posted is poluted with ads and popups and all types of spam/malware if you weren't aware. Second there was a point in there regarding the image URLs being the problem which is true but this does also impact the styling. WHy is this only impacting wordpress on Azure? I have not seen this before until azure.
Suresh Chikkam 2,135 Reputation points Microsoft External Staff Moderator

2025-02-07T09:39:34.6266667+00:00
Hi Shaun, instead of plugin, you can manually add URLs to wp-config.php

define('WP_HOME', 'https://yourdomain.com'); define('WP_SITEURL', 'https://yourdomain.com'); define('WP_CONTENT_URL', 'https://yourdomain.com/wp-content');
Suresh Chikkam 2,135 Reputation points Microsoft External Staff Moderator

2025-02-11T10:38:40.7166667+00:00

If the above Comment was helpful and pointed you in the right direction, please clicking "Upvote" to the comment. If you have any further questions, feel free to let us know.

2 answers

Your answer

Silvia Wibowo 6,041 Reputation points Microsoft Employee Volunteer Moderator

2025-01-15T01:53:18.7766667+00:00

Hi @Shaun , would this article be helpful for your issue?

[Edited] I deleted URL for the article to prevent spreading of the malware. Issue and solution are summarized in the answer.
Shaun 0 Reputation points

2025-01-15T03:10:48.5266667+00:00

FIrst thank you for the reply but that website link you posted is poluted with ads and popups and all types of spam/malware if you weren't aware. Second there was a point in there regarding the image URLs being the problem which is true but this does also impact the styling. WHy is this only impacting wordpress on Azure? I have not seen this before until azure.
Suresh Chikkam 2,135 Reputation points Microsoft External Staff Moderator

2025-02-07T09:39:34.6266667+00:00

Hi Shaun, instead of plugin, you can manually add URLs to wp-config.php

define('WP_HOME', 'https://yourdomain.com'); define('WP_SITEURL', 'https://yourdomain.com'); define('WP_CONTENT_URL', 'https://yourdomain.com/wp-content');
Suresh Chikkam 2,135 Reputation points Microsoft External Staff Moderator

2025-02-11T10:38:40.7166667+00:00

If the above Comment was helpful and pointed you in the right direction, please clicking "Upvote" to the comment. If you have any further questions, feel free to let us know.

Answer 1

Silvia Wibowo 6,041 Microsoft Employee Volunteer Moderator

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.

Shaun 0 Reputation points

2025-01-15T13:08:49.87+00:00

Thank you however my default paths are no incorrect. If you look at the frontend and look at the backend of wordpress editor they both use relative paths. That article mentioned using a plugin to change the image paths to absolute. There is no plugin currently to do that and also that is not a solution to fixing wordpess on azue. First, this issue needs to be elevated to someone at microsoft because their docker image has a huge flaw and they are rolling this out to 1000s that use wordpess on Azure.

Based on some experimenting I was able to get the styling to work by changing the default azure wp-config.php from:

define('WP_CONTENT_URL', '/wp-content');

to

define('WP_CONTENT_URL', $http_protocol . $_SERVER['HTTP_HOST'] . '/wp-content');

This does not fix the missing image issue. I am still trying to get this part to work. If you can figure that out then we have a solution.

Answer 2

If the Gutenberg editor is not working correctly on WordPress hosted on Azure App Services, here are a few troubleshooting steps you can try:

Check PHP and Memory Limits

Ensure your App Service is running a compatible PHP version (preferably PHP 8.0 or later).
Increase memory limits in wp-config.php by adding:

define('WP_MEMORY_LIMIT', '256M');

Disable Conflicting Plugins

Some plugins, especially those modifying the editor, may conflict with Gutenberg. Temporarily disable all plugins and check if the issue persists.

Switch to a Default Theme

Try switching to a default theme like Twenty Twenty-Four to rule out theme-related issues.

Check Browser Console for Errors

Open the browser’s developer console (F12 > Console) and check for JavaScript errors. If you see errors related to REST API or blocked scripts, they might be causing the problem.

Verify REST API and Permalink Settings

Gutenberg relies on REST API. Go to Tools > Site Health and see if any REST API issues are reported.
Try resetting permalinks under Settings > Permalinks by switching to Plain and then back to your preferred structure.

Consider Using Elementor as an Alternative

If you continue facing issues, you might want to try Elementor, a powerful visual editor that works independently of Gutenberg and can provide a seamless editing experience.

Check Server Logs and Debug Mode

Enable debug mode by adding this to wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Then, check the wp-content/debug.log file for errors.

These steps should help you identify and fix the issue with Gutenberg and Elementor as well on WordPress App Services. If the problem persists, checking with your hosting provider’s support team might be necessary.

Share via

How to fix wordpress gutenberg editor on Wordpress on App Services

2 answers

Your answer