Azure App Service上WordPress的Gutenberg编辑器样式与图片异常问题

环境与已安装组件 #

• Azure App Service部署的WordPress站点
• 主题：KadenceWP
• 已安装插件：Azure App Service默认插件、Kadence Blocks、GeneratePress Blocks

问题表现 #

• 后台Gutenberg编辑器仅桌面模式能显示部分样式，移动端和平板模式无法加载样式与图片，但前端显示完全正常
• 激活GeneratePress Blocks插件后，仅桌面模式编辑器样式恢复，移动端和平板模式问题依旧

控制台报错信息 #

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:10
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:10
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:10
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:10
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:10
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

异常与正常显示说明 #

• 编辑器异常表现：移动端/平板模式下编辑器无样式渲染、图片无法加载，内容排版错乱
• 前端正常表现：前端页面样式完整，图片加载正常，排版显示正确

已尝试操作与当前状态 #

• 推测问题与Azure App Service的WordPress部署方式相关，但未找到同类案例
• 已修改wp-config.php配置修复样式问题，但图片仍无法加载，寻求完整解决方案

内容的提问来源于stack exchange，提问作者Qiuzman