ACF Chat Fridays 解读 WordPress 7.1、ACF Blocks v3 与编辑器定制

ACF Chat Fridays 让 Advanced Custom Fields 社区有机会直接聆听这款插件背后的团队发声。9 月场次重点讨论如何应对 WordPress 7.1 中的编辑器变化、如何使用 ACF PRO 6.8.9 版本，以及如何充分发挥 ACF Blocks v3、内联编辑和自定义工具栏控件的优势。 

无论你是在 ACF Blocks v2 上管理现有客户项目，还是希望通过真正的内联编辑简化内容编辑工作流，本场次都将提供实用建议和技术演示，让你的自定义区块工作流保持顺畅并面向未来。

由 Iain Poulson、Phil Johnston、Matt Shaw 和 Anthony Burchell 主持。 

报名参加下一场次 →

场次录像

在下方观看完整场次，或直接跳转到摘要中的精彩内容。

场次摘要

我们的讨论涵盖从处理 WordPress 7.1 中的 iframe 变化，到自定义 Gutenberg 内部编辑体验等各项内容。主要议题包括：

• WordPress 7.1 与 Canvas 变化：了解 WP 核心为何强制实行 iframe 隔离，以及这会如何影响区块编辑器渲染。
• ACF PRO 6.8.9 版本：解决旧版区块兼容性和编辑器布局偏移问题。
• ACF Blocks v2 Compatibility Plugin：这是一个独立的变通方案，可按需恢复旧版 Edit Mode。
• 掌握 ACF Blocks v3：利用 Expanded Editor Panel 处理复杂字段和重复器。
• 通过 block.json 精细调整 UI：隐藏拥挤的侧边栏并控制按钮位置。
• 内联编辑与工具栏控件：启用零 JS 可视化编辑和自定义工具栏按钮。
• 社区问答：深入解答有关 Local JSON、多种文章类型字段组以及顺畅完成区块迁移的问题。

Canvas Edit Mode 为何发生变化

WordPress 7.1 在区块编辑器 Canvas 中引入了更严格的 iframe 隔离。在旧版 Gutenberg 中，WP Admin 的样式常常会渗入区块预览区域——例如，在 Canvas 预览中呈现管理后台的蓝色按钮，而不是实际的前端样式。

为了隔离 CSS 和 JavaScript 的样式渗透，WordPress 软件强制在各个区块中使用 iframe 渲染。然而，这一变化直接影响了 ACF Blocks v2 的“Edit Mode”——在该模式下，字段表单会直接显示在区块 Canvas 预览内。由于管理后台表单无法在前端 Canvas iframe 中渲染，WordPress 7.1 会自动将这些字段输入项移至编辑器侧边栏，从而使重复器、Flexible Content 或 WYSIWYG 等复杂字段组的体验变得十分拥挤。

ACF Blocks v2 Compatibility Plugin

对于仍在维护现有客户网站、且内容编辑人员依赖经典内联表单布局的机构，ACF 团队随 ACF 6.8.9 发布了一个临时变通方案。

ACF Blocks v2 Iframe Compatibility Plugin：一款可通过 GitHub 单独获取的插件，可在 WordPress 7.1 中恢复旧版 v2 Edit Mode 行为。

虽然该插件为旧版项目提供了一层保障，但 ACF 团队强调，它只是一个临时变通方案。随着 WordPress 软件不断演进，强烈建议开发者将自定义区块迁移至 ACF Blocks v3。

升级至 ACF Blocks v3：扩展编辑器

ACF Blocks v3 最初在 ACF 6.6 中推出，它以 Expanded Editor Panel 取代了 Canvas 表单编辑。这是一种宽裕的弹出界面，专为管理复杂字段组而设计，无需挤占编辑器 Canvas，也不必依赖狭窄的侧边栏。

如果你的区块没有在其 block.json 文件中明确指定 ACF 版本，那么在 WordPress 7.1 上运行时，ACF 会自动默认使用 Blocks v3。

在 block.json 中自定义区块界面

Blocks v3 让开发者能够精确控制字段表单和预览按钮在区块编辑器中的显示方式。你可以直接在区块的 block.json 文件中配置这些设置：

JSON

{

  "name": "acf/testimonial",

  "title": "Testimonial",

  "acf": {

    "mode": "preview",

    "blockVersion": 3,

    "hide_fields_in_sidebar": true,

    "render_preview": true,

    "expanded_editor_button": ["toolbar", "sidebar"]

  }

}

Blocks v3 定制新增的主要属性包括：

• hide_fields_in_sidebar: 设置为 true 可彻底从右侧边栏中移除字段输入项，避免表单控件杂乱拥挤。
• render_preview: 设置为 true 可在编辑其他位置的字段时，继续在画布中保持区块的视觉呈现。
• expanded_editor_button: 传入一个数组，用于定义 Expanded Editor 启动按钮出现的位置（[“toolbar”]、[“sidebar”]，或用 [] 将其彻底隐藏）。

内联编辑与顶部工具栏控件

内联编辑首次推出于 ACF 6.7，可将区块预览转变为真正的可视化编辑界面。在 block.json 中开启自动内联编辑后，ACF 会自动扫描你的渲染模板中的字段值（例如 get_field()），并让这些值支持点击编辑：

JSON

{

  "name": "acf/testimonial",

  "title": "Testimonial",

  "acf": {

    "mode": "preview",

    "blockVersion": 3,

    "auto_inline_editing": true

  }

}

最重要的是，内联编辑完全通过渲染模板中的 PHP 辅助函数实现。它不需要 JavaScript 构建步骤、React 代码或复杂依赖项。

自定义顶部工具栏字段

对于页面上没有直接可视化元素的字段，例如背景颜色选择器或布局切换器，你可以使用 acf/blocks/top_toolbar_fields PHP 过滤器，将 ACF 字段直接映射到区块的顶部工具栏：

PHP

function my_block_top_toolbar_fields( $fields, $block ) {

    if ( $block['name'] === 'acf/testimonial' ) {

        $fields[] = array(

            'field' => 'background_color',

            'icon'  => 'art',

            'label' => 'Background Color'

        );

    }

    return $fields;

}

add_filter( 'acf/blocks/top_toolbar_fields', 'my_block_top_toolbar_fields', 10, 2 );

这允许编辑器点击一个简单的工具栏图标，在快捷弹出窗口中切换区块选项，完全无需使用冗长的字段表单。

进一步了解 ACF 与 AI

WP Engine 的 Iain Poulson 与 The WP Minute 探讨了 ACF 的未来，以及该插件如何为 AI 时代发展。点击这里了解更多！

资源与链接

• ACF 6.8.9 发布公告
• GitHub 上的 ACF Blocks v2 兼容插件
• ACF Blocks v3 迁移指南
• block.json 元数据与 ACF 属性
• ACF 内联编辑指南

我们的下一场 ACF Chat Fridays 活动定于 October 9, 2026 举行。在此期间，请务必填写我们的 2026 年度 ACF 社区调查！我们希望你的反馈能帮助塑造 ACF 的未来发展路线！ 

注册参加下一场 ACF Chat Fridays 活动 → 

在 X 上使用 #ACFChatFridays 标签给我们留言或私信，提出建议或反馈。

文章 ACF Chat Fridays：WordPress 7.1、ACF Blocks v3 与编辑器定制最早发布于 ACF。