Gutenberg 区块开发入门指南

Block Development
1

欢迎来到区块开发分类！这里是讨论 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"
}

学习资源

获取帮助

有区块开发问题？可以 @gutenberg 提问，我们的区块编辑器专家会为你解答！

欢迎在此分类发布你的区块开发问题和经验分享！