如何通过编程切换古腾堡区块编辑器的编辑/预览模式并实现单区块编辑

嘿，刚好我之前折腾过类似的需求，给你分享下可行的解决方案！

古腾堡编辑器其实提供了直接的API来控制区块的编辑/预览状态——每个区块的mode属性就是开关，可选值为'edit'（编辑模式）和'preview'（预览模式），我们可以通过wp.data.dispatch('core/block-editor').updateBlockAttributes()方法来修改这个属性。

核心实现逻辑 #

要实现「一次只让选中的区块处于编辑模式」，你可以按以下步骤来写代码：

1. 获取当前区块状态
   先拿到所有区块和当前选中的区块：

   const allBlocks = wp.data.select('core/block-editor').getBlocks();
   const selectedBlock = wp.data.select('core/block-editor').getSelectedBlock();
   

2. 遍历设置区块模式
   循环所有区块，给选中的区块设为编辑模式，其余设为预览模式：

   // 先判断是否有选中的区块，避免报错
   if (!selectedBlock) {
     // 无选中区块时，可将所有区块设为预览模式
     allBlocks.forEach(block => {
       wp.data.dispatch('core/block-editor').updateBlockAttributes(block.clientId, { mode: 'preview' });
     });
     return;
   }
   
   // 有选中区块时，逐个设置模式
   allBlocks.forEach(block => {
     const targetMode = block.clientId === selectedBlock.clientId ? 'edit' : 'preview';
     wp.data.dispatch('core/block-editor').updateBlockAttributes(block.clientId, { mode: targetMode });
   });
   

3. 自动触发逻辑（可选）
   如果你想让这个功能自动跟随用户的选中操作变化，可以订阅古腾堡的状态变化，搭配防抖避免频繁触发：

   wp.data.subscribe(() => {
     const selectedBlock = wp.data.select('core/block-editor').getSelectedBlock();
     const allBlocks = wp.data.select('core/block-editor').getBlocks();
   
     // 防抖处理，避免快速切换选中区块时频繁更新
     clearTimeout(window.blockModeUpdateTimer);
     window.blockModeUpdateTimer = setTimeout(() => {
       if (!selectedBlock) {
         allBlocks.forEach(block => {
           wp.data.dispatch('core/block-editor').updateBlockAttributes(block.clientId, { mode: 'preview' });
         });
         return;
       }
   
       allBlocks.forEach(block => {
         const targetMode = block.clientId === selectedBlock.clientId ? 'edit' : 'preview';
         wp.data.dispatch('core/block-editor').updateBlockAttributes(block.clientId, { mode: targetMode });
       });
     }, 100);
   });
   

一些注意事项 #

• 确保你的代码是在古腾堡编辑器环境下运行的，比如通过WordPress的admin_enqueue_scripts钩子加载到编辑器页面，或者写在自定义区块的脚本里。
• 大部分官方区块和标准自定义区块都支持mode属性，但少数特殊区块可能不兼容，你可以提前测试下。
• 防抖函数是为了优化性能，避免用户快速切换选中区块时触发过多的状态更新。

备注：内容来源于stack exchange，提问作者uvo