文章编辑后台为某个块设置仅管理员可见

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. 打开"仅管理员可见"开关即可

这样就完成了所需功能的实现！

---

前端显示逻辑代码解释

这个过滤器的工作方式是这样的：

1. WordPress在渲染页面时，会逐个处理每个块
2. 对每个块，WordPress都会触发一次render_block过滤器
3. 我们的函数会被调用，但只处理当前块，不是循环

页面内容： [块1] -> 没有adminOnly属性 -> 直接返回原内容 [块2] -> 有adminOnly=true -> 检查权限 [块3] -> 没有adminOnly属性 -> 直接返回原内容

当普通访客访问时，该块不会输出到客户端浏览器：

1. 服务器端处理：

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. 维护更简单

使用方法就是在编辑器中插入"仅管理员可见"块，然后在里面放入需要保护的内容即可。非管理员访问时这些内容会自动隐藏。