Qiuzman
Qiuzman

Reputation: 1761

Gutenberg editor is missing styling and images however frontend is displaying correctly

I am hosting a website on azure app services. I sometimes run into unusual issues on wordpress on azure so I am hoping someone here may have a solution as Kadence support has not been able to help or figure out the issue. However, stackoverflow has never let me down for solutions and has some of the greatest developers in the world so here I am! My azure app service has barely any plugins (only the default plugins associated with the azure app service install) and Kadencewp theme, kadence blocks, and generatepress blocks. My issue is the gutenberg editor is not showing styles on the backend except for the desktop version only and there are warnings in the console. The strange this is if I activate the generatepress blocks plugin (despite I am not using any of these blocks only kadence) my gutenberg editor begins to work correctly for the desktop version only. The mobile and the table modes still fail to pull the styles and images. Also oddly enough the frontend is perfect so this issue is only effecting the editor itself. The console warnings I am seeing are as follows:

    block-editor.min.js?ver=28fb4f612c7c613fdd55:21 wp.blockEditor.transformStyles Failed to transform CSS. TypeError: Failed to construct 'URL': Invalid base URL
    at /wp-admin/<input css lUVPeX>:1:12880
    at block-editor.min.js?ver=28fb4f612c7c613fdd55:21:2458
    at e (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:7346)
    at s.walk (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:2863)
    at Declaration (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:2374)
    at x.visitSync (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:23621)
    at x.walkSync (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24691)
    at block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24636
    at r.each (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:8493)
    at x.walkSync (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24615)
    at block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24636
(anonymous) @ block-editor.min.js?ver=28fb4f612c7c613fdd55:21
(anonymous) @ block-editor.min.js?ver=28fb4f612c7c613fdd55:21
Xy @ block-editor.min.js?ver=28fb4f612c7c613fdd55:21
(anonymous) @ block-editor.min.js?ver=28fb4f612c7c613fdd55:21
useMemo @ react-dom.min.js?ver=18.3.1:10
e.useMemo @ react.min.js?ver=18.3.1:10
(anonymous) @ block-editor.min.js?ver=28fb4f612c7c613fdd55:21
ht @ react-dom.min.js?ver=18.3.1:10
vr @ react-dom.min.js?ver=18.3.1:10
mr @ react-dom.min.js?ver=18.3.1:10
pr @ react-dom.min.js?ver=18.3.1:10
Qs @ react-dom.min.js?ver=18.3.1:10
wl @ react-dom.min.js?ver=18.3.1:10
bl @ react-dom.min.js?ver=18.3.1:10
yl @ react-dom.min.js?ver=18.3.1:10
fl @ react-dom.min.js?ver=18.3.1:10
Nn @ react-dom.min.js?ver=18.3.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1:10Understand this warningAI
deprecated.min.js?ver=e1f84915c5e8ae38964c:2 wp.editPost.PluginSidebarMoreMenuItem is deprecated since version 6.6. Please use wp.editor.PluginSidebarMoreMenuItem instead.
i @ deprecated.min.js?ver=e1f84915c5e8ae38964c:2
Ht @ edit-post.min.js?ver=f56f4976c416ccebe712:2
Kt @ edit-post.min.js?ver=f56f4976c416ccebe712:2
ht @ react-dom.min.js?ver=18.3.1:10
Qs @ react-dom.min.js?ver=18.3.1:10
wl @ react-dom.min.js?ver=18.3.1:10
bl @ react-dom.min.js?ver=18.3.1:10
yl @ react-dom.min.js?ver=18.3.1:10
fl @ react-dom.min.js?ver=18.3.1:10
Nn @ react-dom.min.js?ver=18.3.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1:10Understand this warningAI
deprecated.min.js?ver=e1f84915c5e8ae38964c:2 wp.editPost.PluginSidebar is deprecated since version 6.6. Please use wp.editor.PluginSidebar instead.
i @ deprecated.min.js?ver=e1f84915c5e8ae38964c:2
Ht @ edit-post.min.js?ver=f56f4976c416ccebe712:2
Yt @ edit-post.min.js?ver=f56f4976c416ccebe712:2
ht @ react-dom.min.js?ver=18.3.1:10
Qs @ react-dom.min.js?ver=18.3.1:10
wl @ react-dom.min.js?ver=18.3.1:10
bl @ react-dom.min.js?ver=18.3.1:10
yl @ react-dom.min.js?ver=18.3.1:10
fl @ react-dom.min.js?ver=18.3.1:10
Nn @ react-dom.min.js?ver=18.3.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1:10Understand this warningAI
deprecated.min.js?ver=e1f84915c5e8ae38964c:2 wp.blockEditor.RichText onSplit prop is deprecated since version 6.4. Please use block.json support key: "splitting" instead.
i @ deprecated.min.js?ver=e1f84915c5e8ae38964c:2
NM @ block-editor.min.js?ver=28fb4f612c7c613fdd55:21
ht @ react-dom.min.js?ver=18.3.1:10
dr @ react-dom.min.js?ver=18.3.1:10
Qs @ react-dom.min.js?ver=18.3.1:10
wl @ react-dom.min.js?ver=18.3.1:10
bl @ react-dom.min.js?ver=18.3.1:10
yl @ react-dom.min.js?ver=18.3.1:10
fl @ react-dom.min.js?ver=18.3.1:10
Nn @ react-dom.min.js?ver=18.3.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1:10Understand this warningAI
deprecated.min.js?ver=e1f84915c5e8ae38964c:2 wp.date.__experimentalGetSettings is deprecated since version 6.1. Please use wp.date.getSettings instead.
i @ deprecated.min.js?ver=e1f84915c5e8ae38964c:2
R @ date.min.js?ver=aaca6387d1cf924acc51:12
edit @ blocks-postgrid.js?ver=309ada5d89cfbddfaece:9
ht @ react-dom.min.js?ver=18.3.1:10
Qs @ react-dom.min.js?ver=18.3.1:10
wl @ react-dom.min.js?ver=18.3.1:10
bl @ react-dom.min.js?ver=18.3.1:10
yl @ react-dom.min.js?ver=18.3.1:10
fl @ react-dom.min.js?ver=18.3.1:10
Nn @ react-dom.min.js?ver=18.3.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1:10Understand this warningAI
block-editor.min.js?ver=28fb4f612c7c613fdd55:21 wp.blockEditor.transformStyles Failed to transform CSS. TypeError: Failed to construct 'URL': Invalid base URL
    at /wp-admin/<input css fybXpc>:1:12880
    at block-editor.min.js?ver=28fb4f612c7c613fdd55:21:2458
    at e (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:7346)
    at s.walk (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:2863)
    at Declaration (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:2374)
    at x.visitSync (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:23621)
    at x.walkSync (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24691)
    at block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24636
    at r.each (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:8493)
    at x.walkSync (block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24615)
    at block-editor.min.js?ver=28fb4f612c7c613fdd55:21:24636

Some additional images showing strange behavior in editor: enter image description here

Here is what the frontend looks like enter image description here

I know I cannot prove this but I believe it has to do with azure app service and how it hosts wordpress. I just do not see any other users having this error on the internet but also not many people host wordpress on azure (and maybe this is why).

I have found a fix for the styles missing so hopefully this helps however images are still missing: define('WP_CONTENT_URL', '/wp-content'); to define('WP_CONTENT_URL', $http_protocol . $_SERVER['HTTP_HOST'] . '/wp-content'); in wp-config.php.

Upvotes: 0

Views: 96

Answers (0)

Related Questions