---
canonical: https://meta.cyberforums.com/t/gutenberg/2412
webpage: https://wpcy.com/community/t/2412-gutenberg
language: zh-Hans
---

# Gutenberg 区块开发入门指南

> 文派叶子支持论坛的只读副本，本页不能回复。
> 讨论原文：https://meta.cyberforums.com/t/gutenberg/2412
> 网页版：https://wpcy.com/community/t/2412-gutenberg

## 1 · system

- 发布时间：2026年1月29日 16:37

欢迎来到区块开发分类！这里是讨论 WordPress Gutenberg 区块开发的专区。
区块开发基础
开发环境准备
# 安装 @wordpress/create-block 脚手架
npx @wordpress/create-block my-first-block

# 进入目录并启动开发
cd my-first-block
npm start

区块结构
一个标准的区块包含：

block.json - 区块元数据
edit.js - 编辑器中的渲染
save.js - 前端保存的内容
style.scss - 前端样式
editor.scss - 编辑器样式

block.json 示例
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-plugin/my-block",
  "title": "我的区块",
  "category": "widgets",
  "icon": "smiley",
  "description": "一个示例区块",
  "textdomain": "my-plugin",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

学习资源

Block Editor Handbook
区块开发教程
区块 API 参考

获取帮助
有区块开发问题？可以 @gutenberg 提问，我们的区块编辑器专家会为你解答！
欢迎在此分类发布你的区块开发问题和经验分享！