禁用wordpress6.7之后更新的 zoom out mode 缩小模式的方法分享

wordpress6.7的缩小模式 zoom out mode给古腾堡正常编辑带来了困扰

wordpress6.7之后，只要我们在编辑器中打开样板，整体的编辑区域会被缩小，并且只能插入样板到最后一个区块，而无法实现插入到我们想要的位置，必须关闭缩小模式才可以，这个功能对于企业官网的编辑来说，带来了不少的困扰，也让第一次使用的用户觉得比较奇怪。

经过我们不断地对wordpress6.7源码的分析，最终找到了禁止这个功能的方法，这个方法实际上也不是彻底禁用，因为不管是从源码分析，还是wordpress官方开发的说明来说，都没有明确可以直接彻底禁用的方法，我们所给的方法是监听编辑器状态，当缩小模式按钮出现时，实现自动点击按钮关闭，这样在缩小模式打开的瞬间就会被自动关闭，看起来和禁用的效果是一样的。

超级区块系列均已经更新了此功能，更新到最新版本即可无需受到缩小模式的困扰，缩小模式的具体说明请见：wordpress 6.7 zoom out mode 缩小模式对编辑的影响说明

分享禁用缩小模式的方法

如果你是wordpress古腾堡编辑器的开发者，或者你使用的古腾堡主题也有被缩小模式所困扰，可以参考我们所提供的方法，希望能够帮助到你解决这一问题。

方法如下

首先你需要创建一个js文件，命名为：disable-zoomed-out-mode.js

文件内容：


wp.domReady(() => {
console.log("脚本已加载");
// 监听 DOM 变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// 查找缩小模式按钮
const zoomOutButton = document.querySelector('button[aria-label="缩小"][aria-pressed="true"]');
if (zoomOutButton) {
zoomOutButton.click(); // 模拟点击关闭按钮
}
});
});
// 开始观察 DOM 变化
observer.observe(document.body, {
childList: true, // 监听子节点的变化
subtree: true, // 监听所有后代节点的变化
attributes: true, // 监听属性变化
attributeFilter: ["aria-pressed"], // 只监听 aria-pressed 属性的变化
});
// 确保观察器在页面卸载时断开连接（避免内存泄漏）
window.addEventListener("beforeunload", () => {
observer.disconnect();
});
});


disable-zoomed-out-mode.js放入你的主题根目录下的js文件夹

然后再你的主题functions.php 引用这个js脚本加入到编辑器中：

function enqueue_auto_disable_zoomed_out_script() {
if (is_admin()) {
wp_enqueue_script(
'disable-zoomed-out-mode',
get_template_directory_uri() . '/js/disable-zoomed-out-mode.js', // 如果你的路径不一样，可替换为你的 JS 文件路径
array('wp-data', 'wp-edit-post'),
'1.0',
true
);
}
}
add_action('admin_enqueue_scripts', 'enqueue_auto_disable_zoomed_out_script');

然后进入编辑器，强制刷新下，打开样板你就可以发现，缩小模式不在会被启动了。