# wordpress/gutenberg architecture

> Architecture diagram of the GitHub repository wordpress/gutenberg, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/wordpress/gutenberg
- Repository: https://github.com/wordpress/gutenberg

## Overview

Gutenberg is the WordPress block-based editing and site-building project. The principal workflow is an author editing modular post content, with media processing and persistence through WordPress. Separate capabilities include site-wide theme styling and experimental real-time collaboration. The tree and README establish these product areas; sampled code supports the style-generation, global-styles REST, media-upload, and collaboration-storage roles, but does not establish every connection between editor screens and back-end services.

Main entry points: [`packages/block-editor/src`](https://github.com/wordpress/gutenberg/tree/trunk/packages/block-editor/src) (Block editor), [`lib/class-wp-theme-json-gutenberg.php`](https://github.com/wordpress/gutenberg/blob/trunk/lib/class-wp-theme-json-gutenberg.php) (Theme configuration), [`lib/blocks.php`](https://github.com/wordpress/gutenberg/blob/trunk/lib/blocks.php) (Block integration), [`packages/media-editor/src/image-editor`](https://github.com/wordpress/gutenberg/tree/trunk/packages/media-editor/src/image-editor) (Media editing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editing["Content editing"]
  node_block_editor["Block editor"]
  node_block_runtime["Block integration<br/>[blocks.php]"]
end

subgraph group_media["Media handling"]
  node_media_editor["Media editing"]
  node_attachments_api["Media REST API"]
end

subgraph group_themes["Site customization"]
  node_site_editor["Site editor<br/>[site-editor.php]"]
  node_global_styles_api["Global styles API"]
  node_theme_json["Theme configuration"]
  node_theme_resolver["Theme resolver"]
  node_style_engine["Style engine"]
end

subgraph group_collaboration["Collaboration"]
  node_collab_client["Collaboration UI"]
  node_collab_api["Collaboration REST<br/>[rest-api.php]"]
  node_sync_server["Sync server"]
  node_sync_storage["Sync storage"]
end

subgraph group_platform["WordPress services"]
  node_plugin["Gutenberg plugin<br/>[gutenberg.php]"]
  node_post_content[("Posts and pages")]
  node_wordpress_media[("WordPress media")]
  node_theme_storage[("Theme styles")]
end

node_author(("Author"))

node_author -->|"edits content"| node_block_editor
node_block_editor -->|"uses blocks"| node_block_runtime
node_block_runtime -->|"persists content"| node_post_content
node_block_editor -->|"edits media"| node_media_editor
node_media_editor -->|"uploads media"| node_attachments_api
node_attachments_api -->|"stores attachments"| node_wordpress_media
node_author -->|"customizes site"| node_site_editor
node_site_editor -->|"requests styles"| node_global_styles_api
node_global_styles_api -->|"parses configuration"| node_theme_json
node_theme_json -->|"resolves theme data"| node_theme_resolver
node_theme_json -->|"provides styles"| node_style_engine
node_style_engine -->|"generates CSS"| node_theme_storage
node_author -.->|"collaborates"| node_collab_client
node_collab_client -.->|"syncs updates"| node_collab_api
node_collab_api -.->|"dispatches sync"| node_sync_server
node_sync_server -.->|"reads and writes"| node_sync_storage
node_plugin -->|"provides editor"| node_block_editor

click node_plugin "https://github.com/wordpress/gutenberg/blob/trunk/gutenberg.php"
click node_block_editor "https://github.com/wordpress/gutenberg/tree/trunk/packages/block-editor/src"
click node_block_runtime "https://github.com/wordpress/gutenberg/blob/trunk/lib/blocks.php"
click node_media_editor "https://github.com/wordpress/gutenberg/tree/trunk/packages/media-editor/src/image-editor"
click node_attachments_api "https://github.com/wordpress/gutenberg/blob/trunk/lib/media/class-gutenberg-rest-attachments-controller.php"
click node_site_editor "https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/pages/site-editor.php"
click node_global_styles_api "https://github.com/wordpress/gutenberg/blob/trunk/lib/class-wp-rest-global-styles-controller-gutenberg.php"
click node_theme_json "https://github.com/wordpress/gutenberg/blob/trunk/lib/class-wp-theme-json-gutenberg.php"
click node_theme_resolver "https://github.com/wordpress/gutenberg/blob/trunk/lib/class-wp-theme-json-resolver-gutenberg.php"
click node_style_engine "https://github.com/wordpress/gutenberg/blob/trunk/packages/style-engine/src/class-wp-style-engine.php"
click node_collab_client "https://github.com/wordpress/gutenberg/tree/trunk/packages/block-editor/src/components/collab"
click node_collab_api "https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/collaboration/rest-api.php"
click node_sync_server "https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/collaboration/class-wp-sync-save-server.php"
click node_sync_storage "https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/collaboration/class-wp-sync-post-meta-storage.php"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_block_editor,node_block_runtime toneBlue
class node_media_editor,node_attachments_api toneAmber
class node_site_editor,node_global_styles_api,node_theme_json,node_theme_resolver,node_style_engine toneMint
class node_collab_client,node_collab_api,node_sync_server,node_sync_storage toneRose
class node_plugin,node_post_content,node_wordpress_media,node_theme_storage,node_author toneIndigo
```

## Components

### Content editing

- [Block editor](https://github.com/wordpress/gutenberg/tree/trunk/packages/block-editor/src): `packages/block-editor/src`
- [Block integration](https://github.com/wordpress/gutenberg/blob/trunk/lib/blocks.php): `lib/blocks.php`

### Media handling

- [Media editing](https://github.com/wordpress/gutenberg/tree/trunk/packages/media-editor/src/image-editor): `packages/media-editor/src/image-editor`
- [Media REST API](https://github.com/wordpress/gutenberg/blob/trunk/lib/media/class-gutenberg-rest-attachments-controller.php): `lib/media/class-gutenberg-rest-attachments-controller.php`

### Site customization

- [Site editor](https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/pages/site-editor.php): `lib/experimental/pages/site-editor.php`
- [Global styles API](https://github.com/wordpress/gutenberg/blob/trunk/lib/class-wp-rest-global-styles-controller-gutenberg.php): `lib/class-wp-rest-global-styles-controller-gutenberg.php`
- [Theme configuration](https://github.com/wordpress/gutenberg/blob/trunk/lib/class-wp-theme-json-gutenberg.php): `lib/class-wp-theme-json-gutenberg.php`
- [Theme resolver](https://github.com/wordpress/gutenberg/blob/trunk/lib/class-wp-theme-json-resolver-gutenberg.php): `lib/class-wp-theme-json-resolver-gutenberg.php`
- [Style engine](https://github.com/wordpress/gutenberg/blob/trunk/packages/style-engine/src/class-wp-style-engine.php): `packages/style-engine/src/class-wp-style-engine.php`

### Collaboration

- [Collaboration UI](https://github.com/wordpress/gutenberg/tree/trunk/packages/block-editor/src/components/collab): `packages/block-editor/src/components/collab`
- [Collaboration REST](https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/collaboration/rest-api.php): `lib/experimental/collaboration/rest-api.php`
- [Sync server](https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/collaboration/class-wp-sync-save-server.php): `lib/experimental/collaboration/class-wp-sync-save-server.php`
- [Sync storage](https://github.com/wordpress/gutenberg/blob/trunk/lib/experimental/collaboration/class-wp-sync-post-meta-storage.php): `lib/experimental/collaboration/class-wp-sync-post-meta-storage.php`

### WordPress services

- [Gutenberg plugin](https://github.com/wordpress/gutenberg/blob/trunk/gutenberg.php): `gutenberg.php`
- **Posts and pages**
- **WordPress media**
- **Theme styles**

### Other components

- **Author**

## Connections

- Author → Block editor: edits content
- Block editor → Block integration: uses blocks
- Block integration → Posts and pages: persists content
- Block editor → Media editing: edits media
- Media editing → Media REST API: uploads media
- Media REST API → WordPress media: stores attachments
- Author → Site editor: customizes site
- Site editor → Global styles API: requests styles
- Global styles API → Theme configuration: parses configuration
- Theme configuration → Theme resolver: resolves theme data
- Theme configuration → Style engine: provides styles
- Style engine → Theme styles: generates CSS
- Author → Collaboration UI: collaborates
- Collaboration UI → Collaboration REST: syncs updates
- Collaboration REST → Sync server: dispatches sync
- Sync server → Sync storage: reads and writes
- Gutenberg plugin → Block editor: provides editor