Fundamentals of Block Development

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.