Gutenberg区块开发：如何通过代码主动显示区块浮动工具栏？

核心逻辑是通过Gutenberg官方提供的区块数据存储接口手动触发当前区块的选中状态，区块被选中后系统会自动唤起对应上下文工具栏，无需直接操作DOM修改样式。

前置依赖引入 #

在你的自定义区块编辑模块头部引入所需核心API：

import { useSelect, useDispatch } from '@wordpress/data';
import { IconButton } from '@wordpress/components';
import { store as blockEditorStore } from '@wordpress/block-editor';

编辑组件实现步骤 #

1. 从编辑组件props中获取当前区块的唯一标识clientId
2. 调用useDispatch获取selectBlock方法，该方法可手动触发区块选中状态
3. 将IconButton绝对定位在区块顶角，点击事件绑定selectBlock传入当前区块clientId
4. 给外层区块容器设置相对定位，保证IconButton位置正确

完整代码示例 #

// 自定义区块的edit函数
const Edit = (props) => {
  const { clientId } = props;
  const { selectBlock } = useDispatch(blockEditorStore);
  
  // 可选：获取当前区块选中状态，用于控制按钮显隐/样式
  const isBlockSelected = useSelect(
    (select) => select(blockEditorStore).isBlockSelected(clientId),
    [clientId]
  );

  return (
    <div 
      className="your-custom-block-wrapper"
      style={{ position: 'relative', minHeight: '60px' }}
    >
      {/* 顶角唤起工具栏按钮 */}
      <IconButton
        icon="admin-tools" // 可替换为任意WordPress官方icon或自定义svg
        label="显示区块工具栏"
        onClick={() => selectBlock(clientId)}
        style={{
          position: 'absolute',
          top: '8px',
          right: '8px',
          zIndex: 10,
          background: '#fff',
        }}
      />
      {/* 你的InnerBlocks组件 */}
      <InnerBlocks
        allowedBlocks={['core/paragraph', 'core/image']} // 按需配置允许的子区块
        placeholder="添加内容..."
      />
    </div>
  );
};

额外优化（解决InnerBlocks难选中问题） #

• 给外层区块容器设置最小高度，空内容状态下也有可点击热区
• 可给外层容器加鼠标悬浮时的边框提示，提示用户可点击选中当前区块
• 如果不需要子区块可直接选中，可给InnerBlocks添加templateLock="all"属性（按需配置）

内容的提问来源于stack exchange，提问作者GSA