WordPress升级到7.0后元框分离成两个独立窗口的解决办法

不知道大家发现没有，在没有升级WordPress 7.0之前，如果安装了WordPress主题或者插件的话，都是可以直接显示在文章编辑页面的最下方的，将滚动条拖到文章内容最下方，然后就会出现WordPress主题或者插件突出的拓展功能界面。这样操作既不影响文章的编辑，也能使用拓展功能。结果升级到WordPress 7.0后，这个习惯被打破了。主题铺发现在文章编辑页面中，出现了一个元框，这个元框将古腾堡编辑器和扩展功能界面活生生的分割成两个独立框架的窗口，也就是各有各的滚动条，至于古腾堡编辑器的页面和扩展功能界面在屏幕上的显示屏蔽，可以自行通过元框拖动来进行分配显示。

如下图

问题通过元框进行操作的话，本来屏幕显示高度是有限的，你拖动了古腾堡编辑器页面多显示一些，必然会压缩扩展功能界面显示的比例，反之亦然。能不能像之前未升级前的一样，也就是和未升级前的操作方法保持一致。主题铺捣鼓了不少时间，最终解决了。

一、为什么升级后会变成“双窗口、双滚动条”？

先说一下，为什么升级后会变成“双窗口、双滚动条”？在旧版本中，编辑器和下方的元框（Meta Boxes）是在同一个页面文档流里自然排列的。
但从 WordPress 6.7 起，为了防止主题的样式和编辑器的样式互相污染，官方强行将古腾堡编辑器放入了一个 <iframe> 隔离沙盒（画布） 中。因为元框是传统的 PHP 渲染，无法放进沙盒，所以官方设计了一个 “双窗格分割（Split View）”：

• 上窗口：带独立滚动条的古腾堡 Iframe 编辑器。
• 下窗口：带独立滚动条的元框区域（WordPress子比主题的付费功能、独立 SEO 等）。
• 中间：一条带拖拽手柄的分割线。

这导致无法像以前那样一卷到底，操作极其反人类。

二、解决办法

这里以主题铺的WordPress子比主题为例，利用WordPress 的 admin_head钩子，向后台精准注入一段 CSS，强行解除高度限制、隐藏分割线、并将编辑器 Iframe 的高度设为自适应。

请将以下代码添加到你当前子比主题（建议是子主题）的 functions.php 或者func.php文件最底部：

/**
 * 强行恢复 WordPress 古腾堡编辑器单窗口滚动（解决元框拆分双滚动条问题）
 * 完美兼容 WordPress 6.7 / 6.8 / 6.9 及后续版本
 */
add_action('admin_head', 'ztp_restore_single_scroll_for_gutenberg');
function ztp_restore_single_scroll_for_gutenberg() {
    $screen = get_current_screen();
    // 仅在文章、页面、帖子等编辑页面生效，不污染其他后台页面
    if ( ! $screen || $screen->base !== 'post' ) {
        return;
    }
    ?>
    <style>
    /* 1. 强制最外层骨架布局采用块流，恢复整页主滚动条 */
    .interface-interface-skeleton__content {
        display: block !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    /* 2. 强行展开古腾堡可视化编辑器容器，防止内部出现独立滚动条 */
    .components-resizable-box__container.editor-resizable-editor {
        height: auto !important;
    }
    .editor-visual-editor {
        overflow: visible !important;
    }

    /* 3. 让编辑器的 Iframe 画布高度自适应，随文章内容自动撑高 */
    .block-editor-iframe__scale-container iframe[name="editor-canvas"] {
        min-height: 80vh !important;
        height: auto !important;
    }

    /* 4. 解除下方元框（子比主题扩展功能区）的高度和滚动条限制 */
    .edit-post-meta-boxes-main {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 5. 隐藏多余的拖拽分割线条及调整手柄，恢复视觉无缝衔接 */
    .edit-post-meta-boxes-main button[role="separator"],
    .edit-post-meta-boxes-main .components-resizable-box__handle {
        display: none !important;
    }
    
    /* 6. 保留“元框”标题折叠栏的样式优化，使其更自然 */
    .edit-post-meta-boxes-main__presenter {
        border-top: 1px solid #e0e0e0;
        background: #f0f0f2;
    }
    </style>
    <?php
}

代码介绍：

1. .interface-interface-skeleton__content：这是最外层的布局大容器。代码将其从 flex/grid 布局强制改成传统的 block（块级），使其失去内部视窗锁定。
2. .edit-post-meta-boxes-main：子比主题扩展面板的外壳。代码移除了它的 height 限制，并将 overflow 设为 visible。
3. iframe[name=”editor-canvas”]：古腾堡的沙盒。代码通过 height: auto 强行逼迫沙盒根据里面写了多少字就自动变多高，这样它自身就不会产生滚动条。
4. button[role=”separator”]：隐藏了那个用来上下拖动分隔窗口的灰色按钮，使其界面变回一整张干净的页面。

三、操作步骤

1. 将上述 PHP 代码复制到你主题的 functions.php 或者func.php文件最底部中保存。
2. 如果你使用了任何对象缓存（Redis）、OpCache 或CDN，请清理一次缓存。
3. 进入文章编辑页面，使用 Ctrl + F5 强制刷新。

你会发现：双滚动条彻底消失，中间的拖拽条也没了。你直接往下拉就能自然滑到最底部的子比主题付费功能和 SEO 面板上，和升级前一模一样。如下图