WordPress 7.0升级后插入区块样板报错ResizeObserver的解决办法

最近WordPress 7.0发布了，不少小伙伴刚高高兴兴把站点升级到全新的WordPress7.0，但是却发现之前保存的文章编辑器内的区块样板无法启用了，以WordPress子比主题为例，其中用着顺手的WordPress子比主题，准备像往常一样新建一篇文章。结果在点击左侧选择之前保存好的区块样板时，整个古腾堡编辑器直接灰屏崩溃了。如下

后台丢出了一行冷冰冰的报错：

TypeError: Cannot read properties of null (reading 'ResizeObserver')
at https://www.zhutipu.com/wp-includes/js/dist/block-editor.min.js:85:89261
at Id (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:165:137)
at Ji (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:179:431)
at Hi (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:179:278)
at Hk (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:178:329)
at Rk (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:197:312)
at xb (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:196:166)
at Li (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:189:373)
at db (https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:79:182)
at https://www.zhutipu.com/wp-includes/js/dist/vendor/react-dom.min.js:184:289

这绝对能让每一个正在排版排到一半的站长当场砸键盘。其实吧，遇到这个报错你先别急着去骂WordPress子比主题的作者。老实说，这锅还真不在主题身上。这是一个在近期WordPress 7.0发布后被全网站长广泛讨论和反馈的古腾堡编辑器内核严重漏洞。

一、这次崩溃到底是谁的锅？深度解密内核Bug

不单单是WordPress子比主题，包括SWELL、Kadence、PublishPress等众多国外主流主题和第三方区块插件，只要在WordPress 7.0环境下插入「同步样板」（也就是以前大家常说的「可复用区块」），无一例外全都会遭遇这个完全相同的灰屏死锁惨剧。

根据WordPress官方核心开发团队在GitHub上的最新错误排查记录，这个致命报错的底层原因其实挺戏剧性的：

• 触发时机： 当你在编辑器中打开左侧工具栏并点击一个「同步样板」时，古腾堡为了预览效果会强行激活一个叫「缩放退出模式」的机制，重新计算并渲染整个编辑器的iframe画板。
• Bug根源： 就在画板重建的那一瞬间，React引擎尝试去运行区块工具栏气泡组件的布局计算效果。但由于切换得太快，之前选中的DOM元素此时处于孤立或者还未完全挂载的状态，它关联的window对象直接变成了null。
• 缺少非空判断： 最要命的是，WordPress 7.0的核心代码文件block-editor.min.js中居然缺少了非空判断。它没有进行任何安全守卫，就直接执行了读取null对象的ResizeObserver操作。这一脚空油门直接导致React渲染环彻底崩溃，编辑区域当场死锁。

由于这个Bug深深地扎根在WordPress 7.0的核心JS代码里，主题和插件作者根本没办法通过修改主题代码来彻底修复。要想彻底解决，必须等待官方推送WordPress 7.0.1或者下一个日常维护版本。不过咱们干站长的，总不能因为官方墨迹就半个月不发文章。在官方补丁下来之前，我整理了几个能让你完美绕过这个Bug的偏门路子。

二、自救大招：不用左侧面板的复制粘贴大法

既然左侧面板一打开就会触发那个该死的缩放渲染并导致崩溃，那我们索性完全不用左侧面板，直接从后台管理页面里把内容抄出来。

• 在浏览器地址栏直接输入并访问这个隐藏的样板管理链接：你的域名/wp-admin/edit.php?post_type=wp_block（这是WordPress所有同步样板和可复用区块的经典列表页面）。
• 在这个列表里找到你那个会报错的样板，点击「编辑」进入。
• 在编辑器里直接按键盘Ctrl+A全选，然后Ctrl+C复制。
• 倒是不需要做别的，直接新建或者编辑你原本要写的那篇新文章。
• 在文章编辑器的空白处直接按Ctrl+V粘贴。

你会发现所有包含WordPress子比主题专属区块的内容瞬间完美地呈现在了文章里。因为整个过程完全没有去碰左侧的样板选项卡，古腾堡根本没有机会触发那个ResizeObserver漏洞，绝对不会灰屏。

三、彻底根治：如何将同步样板安全转换为非同步样板

如果你觉得每次都要去后台复制太麻烦，希望以后还能在左侧面板里愉快地直接点击插入，那你就得换个思路，解除它的同步锁定。

• 同样先访问样板管理页面：你的域名/wp-admin/edit.php?post_type=wp_block。
• 打开那个会报错的同步样板，全选并复制里面的所有区块内容。
• 点击左上角的WordPress图标返回列表，点击顶部的「新增样板」。
• 在新建页面中，将刚才复制的内容直接粘贴进来。
• 最关键的一步来了：在右侧面板的样板设置里，确保关闭「同步Synced」这个开关。
• 给它起个新名字并保存。

其实吧，现在你就拥有了一个内容一模一样、但属于「普通（非同步）」的样板。以后你在写文章时，可以安全地在左侧面板中点击或者拖拽它，再也不会触发WordPress 7.0的这个崩溃Bug。

说白了，因为非同步样板在被鼠标悬停或插入时，WordPress不需要去启动后台那套复杂的同步画板Gutenberg Synced-Iframe机制，自然也就不会产生window对象为null的奇葩情况，从根本上避开了内核漏洞。

四、退一步讲：临时降级或尝试前沿插件

要是你手里的同步样板实在太多，一个一个改能把人累死，那我也给你准备了另外两个退路。

你可以安装WP Downgrade插件，直接把WordPress版本降回到稳定的6.x系列。等过阵子官方把WordPress 7.0.1的补丁发出来了，咱们再升级也不迟。或者你可以去安装独立的Gutenberg插件。因为这个插件是古腾堡团队的试验田，更新速度极快，GitHub上修复这个ResizeObserver空指针的代码大概率会先合并到这个插件的最新版里。装上它可能就能直接解决7.0核心包报错的问题。

折腾网站就是这样，每次大版本更新都像是在踩雷。遇到问题别慌，多看看底层的报错堆栈，总能找到绕过去的偏门路子。你升级到新版本后还遇到过别的古怪报错吗？