WordPress 6.7 中的 “帖子编辑器 ”iframing 与元框

在尝试将帖子编辑器 iframe 化之后，元框的存在成为一个阻碍条件，阻止编辑器内容在iframe中加载，并使 iframe 的这些好处不可用：

• 将块和主题CSS与编辑器UI隔离
• 媒体查询和视口相关 CSS 单位的准确性

这些优势对于支持编辑器和前端的 CSS 重用以及简化块和主题开发非常重要。即使存在元框，社区成员也一直在努力将它们引入帖子编辑器，但经过多次尝试才确定 如何调整界面以将元框与帖子内容分开。

现在实现了分割视图，支持编辑器内容和元框同时可见。此更改可确保编辑器和前端视图之间一致的所见即所得体验。此外，它使元框比以前更容易使用，并允许在使用任何元框时直观地引用帖子内容的任何部分，反之亦然。

iframe 的剩余例外情况

目前，阻止 iframe 始终使用的最后一个条件是是否有任何块使用其apiVersion小于注册3。然而，即使这个条件也可能会在未来的版本中被删除，并且如果网站使用Gutenberg 插件并且基于块的主题处于活动状态，它已经有一个例外。

边缘情况和兼容性

添加元框的插件开发人员应该注意两件事。第一，元框容器现在会剪切溢出元素，因此如果一些弹出式 UI（例如下拉菜单）从元框容器向上延伸，它们将被切断。但是，如果它们被渲染到容器外部的 DOM 的一部分，这将不是问题。第二，如果您的插件还添加了任何富文本格式，并且编辑 UI 锚定在文本选择上，那么它们的实现必须与 iframe 兼容。这不是一个新的要求，但对于仅扩展帖子编辑器的插件来说可能被忽视了。

溢出裁剪

为了确保这不是问题，可以使任何类似弹出窗口的 UI 在元框中向下打开，或者通过将弹出窗口渲染到不在元框容器内的 DOM 部分。例如，后者是 和 组件的默认工作方式Popover，Dropdown使用DropDownMenu它们@wordpress/components将确保即使 UI 超出元框容器的顶部也不会被裁剪。

富文本格式 UI 锚定

如果插件实现了自定义代码来锚定或定位 UI，那么这可能只是令人担忧的。如果插件已经使用了useAnchor来自@wordpress/rich-texteverything 的推荐钩子，那么它应该可以正常工作。如果不是，可以参考 Gutenberg 自己的链接编辑 UI组件，了解其用法的典型示例。