块编辑器开发文档

区块开发基础

💡 云策文档标注

概述

本文档介绍了区块开发的核心概念,包括文件结构、block.json 定义、注册流程、编辑器集成和渲染方式,旨在帮助开发者快速入门 WordPress 区块开发。

关键要点

  • 区块文件结构:解释组成区块插件的每个文件的目的、关系和输出作用。
  • block.json:如何使用 block.json 元数据定义区块,包括 attributes 和 supports 等关键属性。
  • 区块注册:如何在服务器端和客户端注册区块。
  • 区块包装器:如何将属性正确应用到区块的标记包装器。
  • 编辑器中的区块:区块作为 React 组件如何在区块编辑器中加载及其结构概述。
  • 区块的标记表示:区块在数据库、主题模板和模式中的表示方式。
  • 区块的静态或动态渲染:区块如何动态或静态生成前端输出。
  • 区块编辑器中的 JavaScript:开发区块编辑器时如何使用现代 JavaScript。

📄 原文内容

This section provides an introduction to the most relevant concepts in block development. Use the following links to learn more:

  1. File structure of a block: The purpose of each file that composes a block plugin, the relationships between them, and their role in the block output.
  2. block.json: How a block is defined using its block.json metadata and some relevant properties of this file (such as attributes and supports).
  3. Registration of a block: How a block is registered on both the server and in the client.
  4. Block wrapper: How to apply the proper attributes to the block’s markup wrapper.
  5. The block in the Editor: How a block, as a React component, is loaded in the Block Editor and an overview of its structure.
  6. Markup representation of a block: How blocks are represented in the database, theme templates, and patterns.
  7. Static or Dynamic rendering of a block: How blocks generate their front-end output either dynamically or statically.
  8. JavaScript in the Block Editor: How to work with modern JavaScript when developing for the Block Editor.