You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

是否有用于WordPress admin视图构建的集中参考资源?

Gutenberg区块后台界面核心样式复用参考方案

内置官方组件库

WordPress核心自带了适配Gutenberg设计规范的@wordpress/components组件库,是目前构建区块后台编辑界面的标准方案:

  • 开发时直接通过import { 组件名 } from '@wordpress/components';的方式引入所需组件即可,无需额外引入样式文件,所有组件默认和WordPress后台、系统自带区块的视觉风格完全统一,基本不需要额外编写自定义CSS。
  • 组件库覆盖了后台常用的所有交互元素:普通/主按钮、文本/数字输入框、下拉选择器、颜色/渐变面板、媒体上传器、表单控件、提示弹窗、布局容器等,完全满足常规区块的后台配置界面开发需求。

原生CSS类名复用方案

如果仅需要简单的静态结构,不想引入组件,也可以直接复用核心内置的CSS类名:

  • 所有Gutenberg体系的样式类名均以components-为前缀,比如按钮用components-button,文本输入框用components-text-control__input,提示条用components-notice,直接添加到你自定义的DOM元素上即可继承核心样式。
  • 不要使用古早pre-Gutenberg时期的wp-core-ui前缀类名,这套样式和当前Gutenberg的设计规范不兼容,极易出现样式冲突。
  • 若确实需要少量自定义调整,仅针对差异化属性编写CSS即可,不要覆盖核心类的基础样式,避免WordPress版本更新后出现样式异常。

参考资料查阅方式

无需查找第三方旧资料,可以直接通过本地环境获取最新的对应信息:

  • 打开本地WordPress安装目录下的wp-includes/js/dist/文件夹,components.js和对应的.css文件中包含了所有组件的定义和样式规则。
  • 直接在WordPress后台打开区块编辑器,通过浏览器开发者工具检查系统默认区块的编辑界面元素,即可查看对应使用的类名和结构。

内容的提问来源于stack exchange,提问作者Jez Emery

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 21:39:01