wordpress6.7的縮小模式 zoom out mode給古騰堡正常編輯帶來(lái)了困擾

wordpress6.7之后，只要我們?cè)诰庉嬈髦写蜷_(kāi)樣板，整體的編輯區(qū)域會(huì)被縮小，并且只能插入樣板到最后一個(gè)區(qū)塊，而無(wú)法實(shí)現(xiàn)插入到我們想要的位置，必須關(guān)閉縮小模式才可以，這個(gè)功能對(duì)于企業(yè)官網(wǎng)的編輯來(lái)說(shuō)，帶來(lái)了不少的困擾，也讓第一次使用的用戶(hù)覺(jué)得比較奇怪。

經(jīng)過(guò)我們不斷地對(duì)wordpress6.7源碼的分析，最終找到了禁止這個(gè)功能的方法，這個(gè)方法實(shí)際上也不是徹底禁用，因?yàn)椴还苁菑脑创a分析，還是wordpress官方開(kāi)發(fā)的說(shuō)明來(lái)說(shuō)，都沒(méi)有明確可以直接徹底禁用的方法，我們所給的方法是監(jiān)聽(tīng)編輯器狀態(tài)，當(dāng)縮小模式按鈕出現(xiàn)時(shí)，實(shí)現(xiàn)自動(dòng)點(diǎn)擊按鈕關(guān)閉，這樣在縮小模式打開(kāi)的瞬間就會(huì)被自動(dòng)關(guān)閉，看起來(lái)和禁用的效果是一樣的。

超級(jí)區(qū)塊系列均已經(jīng)更新了此功能，更新到最新版本即可無(wú)需受到縮小模式的困擾，縮小模式的具體說(shuō)明請(qǐng)見(jiàn)：wordpress 6.7 zoom out mode 縮小模式對(duì)編輯的影響說(shuō)明

分享禁用縮小模式的方法

如果你是wordpress古騰堡編輯器的開(kāi)發(fā)者，或者你使用的古騰堡主題也有被縮小模式所困擾，可以參考我們所提供的方法，希望能夠幫助到你解決這一問(wèn)題。

方法如下

首先你需要?jiǎng)?chuàng)建一個(gè)js文件，命名為：disable-zoomed-out-mode.js

文件內(nèi)容：


wp.domReady(() => {
console.log("腳本已加載");
// 監(jiān)聽(tīng) DOM 變化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// 查找縮小模式按鈕
const zoomOutButton = document.querySelector('button[aria-label="縮小"][aria-pressed="true"]');
if (zoomOutButton) {
zoomOutButton.click(); // 模擬點(diǎn)擊關(guān)閉按鈕
}
});
});
// 開(kāi)始觀察 DOM 變化
observer.observe(document.body, {
childList: true, // 監(jiān)聽(tīng)子節(jié)點(diǎn)的變化
subtree: true, // 監(jiān)聽(tīng)所有后代節(jié)點(diǎn)的變化
attributes: true, // 監(jiān)聽(tīng)屬性變化
attributeFilter: ["aria-pressed"], // 只監(jiān)聽(tīng) aria-pressed 屬性的變化
});
// 確保觀察器在頁(yè)面卸載時(shí)斷開(kāi)連接（避免內(nèi)存泄漏）
window.addEventListener("beforeunload", () => {
observer.disconnect();
});
});


disable-zoomed-out-mode.js放入你的主題根目錄下的js文件夾

然后再你的主題functions.php 引用這個(gè)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');

然后進(jìn)入編輯器，強(qiáng)制刷新下，打開(kāi)樣板你就可以發(fā)現(xiàn)，縮小模式不在會(huì)被啟動(dòng)了。