WordPress文章后台编辑页面，选中一个块时，右侧出现设置仅管理员可见的选项
完整步骤：
首先创建编辑器专用的JS文件：editor-custom.js
// editor-custom.js
wp.domReady(() => {
// 获取所有块类型
const blockTypes = wp.blocks.getBlockTypes();
blockTypes.forEach(blockType => {
// 扩展现有的块属性
wp.blocks.unregisterBlockType(blockType.name);
const settings = {
...blockType,
attributes: {
...blockType.attributes,
adminOnly: {
type: 'boolean',
default: false,
}
},
edit: function(props) {
const { attributes, setAttributes } = props;
// 创建原始的编辑界面
const originalEdit = blockType.edit;
return wp.element.createElement(
wp.element.Fragment,
null,
originalEdit(props),
wp.element.createElement(
wp.blockEditor.InspectorControls,
{},
wp.element.createElement(
wp.components.PanelBody,
{ title: '访问控制' },
wp.element.createElement(
wp.components.ToggleControl,
{
label: '仅管理员可见',
checked: attributes.adminOnly,
onChange: (value) => setAttributes({ adminOnly: value })
}
)
)
)
);
}
};
wp.blocks.registerBlockType(blockType.name, settings);
});
});
在functions.php中加载编辑器脚本、处理前端显示逻辑：
// 加载编辑器脚本
add_action('enqueue_block_editor_assets', 'my_editor_scripts');
function my_editor_scripts() {
wp_enqueue_script(
'my-editor-custom-js',
get_stylesheet_directory_uri() . '/editor-custom.js',
array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'),
'1.0',
true
);
}
// 处理前端显示逻辑
add_filter('render_block', 'filter_admin_only_blocks', 10, 2);
function filter_admin_only_blocks($block_content, $block) {
// 如果块没有设置adminOnly属性，直接返回原内容
if (empty($block['attrs']) || !isset($block['attrs']['adminOnly'])) {
return $block_content;
}
// 只有设置了adminOnly时才检查权限
if ($block['attrs']['adminOnly'] && !current_user_can('manage_options')) {
return '';
}
return $block_content;
}
这个方案的特点：
1. 为所有块类型都添加了管理员可见选项
2. 在块的右侧面板中显示控制开关
3. 前端会自动过滤非管理员的访问
4. 代码组织清晰，维护方便
使用方法：
1. 在编辑器中选择任意块
2. 在右侧面板中找到”访问控制”选项
3. 打开”仅管理员可见”开关即可
这样就完成了所需功能的实现！
前端显示逻辑代码解释
这个过滤器的工作方式是这样的：
- WordPress在渲染页面时，会逐个处理每个块
- 对每个块，WordPress都会触发一次
render_block过滤器 - 我们的函数会被调用，但只处理当前块，不是循环
页面内容：
[块1] -> 没有adminOnly属性 -> 直接返回原内容
[块2] -> 有adminOnly=true -> 检查权限
[块3] -> 没有adminOnly属性 -> 直接返回原内容
当普通访客访问时，该块不会输出到客户端浏览器：
- 服务器端处理：
if ($block['attrs']['adminOnly'] && !current_user_can('manage_options')) {
return ''; // 返回空字符串
}
这里直接返回空字符串，意味着：
– 这个块的HTML完全不会输出到页面源代码中
– 访客的浏览器不会收到任何相关的HTML代码
– 不会留下任何痕迹（注释等）
举个例子，假设页面有3个段落块：
<!-- 管理员看到的 -->
<p>第一段（公开）</p>
<p>第二段（仅管理员）</p>
<p>第三段（公开）</p>
<!-- 访客看到的 -->
<p>第一段（公开）</p>
<p>第三段（公开）</p>
这样做的好处是：
1. 更安全 – 敏感内容完全不会传输到客户端
2. 更轻量 – 减少了页面大小
3. 无痕迹 – 查看源码也看不到任何相关信息
创建个“仅管理员可见”的区块
啊,这是个非常聪明的解决方案!确实更简单高效。让我们创建一个”管理员可见”区块：
// admin-only-block.js
wp.blocks.registerBlockType('csrwiki/admin-only', {
title: '仅管理员可见',
icon: 'lock',
category: 'common',
description: '此区块中的内容仅管理员可见',
edit: function(props) {
return wp.element.createElement(
'div',
{ className: 'wp-block-csrwiki-admin-only' },
[
wp.element.createElement(
'div',
{ className: 'admin-only-header' },
'🔒 仅管理员可见'
),
wp.element.createElement(
'div',
{ className: 'admin-only-content' },
wp.element.createElement(
wp.blockEditor.InnerBlocks,
{
template: [
['core/paragraph', {}]
],
allowedBlocks: true,
templateLock: false
}
)
)
]
);
},
save: function(props) {
return wp.element.createElement(
'div',
{ className: 'wp-block-csrwiki-admin-only' },
wp.element.createElement(wp.blockEditor.InnerBlocks.Content)
);
}
});
/* 在style.css中 */
.wp-block-csrwiki-admin-only {
border: 2px dashed #666;
padding: 20px;
background: #f9f9f9;
}
.admin-only-header {
color: #666;
font-size: 14px;
margin-bottom: 10px;
font-weight: bold;
}
/* 编辑器中的样式 */
.editor-styles-wrapper .wp-block-csrwiki-admin-only {
border: 2px dashed #ff5722;
background: #fff3e0;
}
// 在functions.php中
function register_admin_only_block() {
wp_register_script(
'admin-only-block',
get_stylesheet_directory_uri() . '/js/admin-only-block.js',
array('wp-blocks', 'wp-element', 'wp-editor')
);
register_block_type('csrwiki/admin-only', array(
'editor_script' => 'admin-only-block',
'render_callback' => 'render_admin_only_block'
));
}
add_action('init', 'register_admin_only_block');
// 渲染回调函数
function render_admin_only_block($attributes, $content) {
if(current_user_can('administrator')) {
return $content;
}
return ''; // 非管理员看不到内容
}
这个方案的优点：
1. 一次性解决问题，不用遍历检查每个块
2. 使用更直观，直接把需要保护的内容放在这个块里
3. 在编辑器中有明显的视觉提示（虚线边框）
4. 可以嵌套任何其他块
5. 维护更简单
使用方法就是在编辑器中插入”仅管理员可见”块，然后在里面放入需要保护的内容即可。非管理员访问时这些内容会自动隐藏。