Gutenberg中PluginDocumentSettingPanel图标不显示问题求助

针对你在自定义文章类型「Carousel Item」编辑界面中，PluginDocumentSettingPanel指定的palmtree Dashicons不显示的问题，按以下步骤逐一排查：

• 确认Dashicons名称正确性
  确保传递给icon属性的是正确的Dashicons短名称（不带dashicons-前缀）。palmtree是有效短名称，对应CSS类dashicons-palmtree，可核对拼写是否有误。

• 检查脚本依赖是否包含dashicons
  注册Gutenberg自定义脚本时，必须将dashicons加入依赖数组，确保图标字体文件被加载。示例代码：

  wp_enqueue_script(
      'custom-carousel-panel-script',
      get_stylesheet_directory_uri() . '/js/carousel-panel.js',
      array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor', 'dashicons'),
      filemtime(get_stylesheet_directory() . '/js/carousel-panel.js')
  );
  

  若通过register_block_type注册脚本，同样要在script字段的依赖里加上dashicons。

• 验证PluginDocumentSettingPanel的icon属性写法
  确认组件的icon参数传递正确，示例写法：

  import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
  
  const CarouselSettingPanel = () => (
      <PluginDocumentSettingPanel
          name="carousel-item-settings"
          title="Carousel Item Settings"
          icon="palmtree"
      >
          {/* 你的面板内容 */}
      </PluginDocumentSettingPanel>
  );
  

  不要给icon属性加dashicons-前缀，Gutenberg会自动处理前缀拼接。

• 排查CSS样式冲突
  打开浏览器开发者工具，选中面板标题旁的图标元素，检查：

  • font-family是否为dashicons
  • content属性是否对应palmtree图标的Unicode值（\f550）
    若有其他主题或插件的CSS覆盖了这些样式，需调整样式优先级。

• 强制在自定义文章类型编辑界面加载Dashicons
  若上述步骤无效，尝试在自定义文章类型的编辑页面头部强制加载Dashicons样式：

  add_action('admin_head-post.php', 'enqueue_dashicons_for_carousel');
  add_action('admin_head-post-new.php', 'enqueue_dashicons_for_carousel');
  
  function enqueue_dashicons_for_carousel() {
      global $post_type;
      if ('carousel-item' === $post_type) {
          wp_enqueue_style('dashicons');
      }
  }
  

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