WP DEVELOP

EP213. “allowed_block_types_all 限制编辑器可用 Block”

首页 WordPress 开发课程 BLOCK THEME(2024 最佳实践) · EP213
约 9 分钟· #EP213#BLOCK THEME(2024 最佳实践)
🔒 登录后可标记已读

📌 并入 EP212 的提醒singleprofessor.php 里「点赞」功能的 <span class="like-box"> 元素,data-like 属性直接输出 $existQuery->posts[0]->ID 在较新 PHP 环境下可能触发「未定义属性/索引」警告。要改成先判断 isset()

data-like="<?php if (isset($existQuery->posts[0]->ID)) echo $existQuery->posts[0]->ID; ?>"

allowed_block_types_all 这个 WordPress 过滤器,实现「普通文章/页面编辑器允许插入任意 Block,全站编辑器(模板)只允许插入指定的几个自定义 Block」——通过回调函数的第二个参数 $editor_context 判断当前是哪种编辑环境,分别 return 不同的允许列表。这对用 WordPress 当内容管理系统(而不是纯设计工具)的场景很实用:模板结构本身不该被随意插入无关的核心段落/图片 Block 破坏,但写文章时依然希望编辑自由度不受限。


涉及文件

  • wp-content/themes/fictional-university-block-theme/functions.php (修改)

代码实现

function myallowedblocks($allowed_block_types, $editor_context) {
  // If you are on a page/post editor screen
  if (!empty($editor_context->post)) {
    return $allowed_block_types;
  }

  // if you are on the FSE screen
  return array('ourblocktheme/header', 'ourblocktheme/footer');
}

add_filter('allowed_block_types_all', 'myallowedblocks', 10, 2);

关键改动点:

  • add_filter('allowed_block_types_all', $回调函数名, $优先级, $参数个数):这是 WordPress 提供的标准过滤器 hook,专门用来动态决定「当前编辑环境允许使用哪些 Block 类型」——第三个参数(优先级)设成 10 是常规默认值,第四个参数 2 表示回调函数要接收两个参数(大多数 add_filter 默认只传一个参数,这里必须显式声明为 2 才能拿到第二个 $editor_context
  • 回调函数固定接收两个参数$allowed_block_types(WordPress 当前默认允许的 Block 列表)、$editor_context(描述当前是在哪个编辑器上下文里,包含 ->post 这类属性)——不管怎么改写这个函数,最终都要 return 一个数组,决定最终允许使用哪些 Block
  • !empty($editor_context->post)——判断「是否在文章/页面编辑器」的关键:如果当前是在编辑某篇文章或页面($editor_context->post 有值),直接把默认的 $allowed_block_types 原样返回,不做任何限制,保留完全自由的编辑体验
  • 判断为「全站编辑器(编辑模板)」的分支$editor_context->post 是空的(不是针对某一篇具体内容),这时候返回一个写死的自定义数组,比如只允许 ourblocktheme/header/ourblocktheme/footer——这样在模板编辑器里插入 Block 时,候选列表只会出现这几个明确允许的类型,核心的段落/图片/按钮等都不会出现,避免终端用户在模板结构里插入不该存在的内容
  • 利用「函数一旦 return 就停止执行」的特性省略 elseif 分支里已经 return 过一次,后面直接写第二种情况要返回的内容,不需要再套一层 else——这门课里反复用到的编程技巧
  • 进阶用法(作者提到的额外思路,未在代码里实现):如果想针对不同的自定义文章类型分别限制,可以判断 $editor_context->post->post_type == 'professor' 这类条件、返回对应的专属允许列表;return 的数组里既能写自己的自定义 Block 名字(ourblocktheme/xxx),也完全可以混搭写 WordPress 核心 Block 名字(比如 core-paragraph/core-list/core-heading
  • 本讲最终把这行 add_filter() 保持注释掉的状态(// add_filter(...):这是一个「按需启用」的可选功能,不是这套主题必须要有的强制限制,写好函数、按需取消注释即可

Hook / Function 速查

名称类型用途
allowed_block_types_allWP 过滤器 hook动态控制当前编辑上下文允许使用哪些 Block 类型
$editor_context->post过滤器回调参数属性判断当前是否处于「针对某篇具体文章/页面」的编辑器(为空则通常是全站编辑器/模板编辑场景)

常见坑

  • add_filter() 忘记把第四个参数(接收参数个数)设成 2——回调函数拿不到第二个 $editor_context 参数,没法区分当前是哪种编辑环境
  • 想让「文章/页面编辑器」和「全站编辑器」用不同的允许列表,却在两个分支之间漏写 return导致两种场景混用同一份逻辑
  • 全站编辑器允许列表里忘记把页头/页脚这类必须使用的自定义 Block 包含进去——会导致连正常搭建模板都做不到

[截图:全站编辑器里点击插入 Block 时,候选列表只显示 Header/Footer 两个自定义 Block,跟普通文章编辑器里可插入任意 Block 的完整候选列表形成对比]


延伸 / 后续讲座会用到

下一讲要讲怎么设置一个完全空白的模板(没有页头页脚),适合搭建落地页这类特殊页面。


Sources

Udemy:

  • Become a WordPress Developer: Unlocking Power With Code — Section 28, EP212, EP213