# humayunahmed8/gutenberg-test-block architecture

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

- Interactive diagram: https://gitdiagram.com/humayunahmed8/gutenberg-test-block
- Repository: https://github.com/humayunahmed8/gutenberg-test-block

## Overview

1. **What this repo is**
   - This is a **WordPress Gutenberg block plugin**. The architecture centers on a PHP plugin wrapper that exposes one or more custom blocks to the WordPress editor, with the block behavior implemented in JavaScript.

2. **Main runtime boundary**
   - There are two execution environments:
     - **PHP / WordPress server side**: plugin bootstrap and registration.
     - **JavaScript / Gutenberg editor side**: block editing UI, serialization, and block-specific styles.
   - The diagram should show WordPress loading the plugin, which then registers block assets and block types.

3. **Plugin bootstrap layer**
   - `plugin.php` is the likely main plugin entry point.
   - `inc/Plugin.php` suggests a PHP class that encapsulates plugin initialization, hooks, and registration logic.
   - This layer is the boundary between WordPress core and the custom block code.

4. **Block feature modules**
   - The `src/blocks/` directory contains three separate block modules:
     - `block-test`
     - `bootstrap`
     - `card`
   - Each block is self-contained with:
     - `block.json` for metadata/registration
     - `index.js` as the block entry
     - `edit.js` for editor behavior
     - `save.js` for saved content output
     - `editor.scss` and `style.scss` for editor/front-end styling

5. **Editor data flow**
   - In Gutenberg, the editor loads the block’s `index.js`, which wires the block definition to `edit.js` and `save.js`.
   - `edit.js` defines the interactive editing experience inside the block editor.
   - `save.js` defines the static markup that gets stored in post content.

6. **Content/output model**
   - These blocks appear to be **static blocks** rather than server-rendered blocks, because each block has a `save.js`.
   - That means the saved HTML is generated on the client and persisted in WordPress content, then rendered directly on the front end.

7. **Shared utilities**
   - `src/utilities/colors-palette.js` is a shared helper module, likely used by one or more blocks for consistent color choices.
   - This is the main cross-cutting front-end dependency visible in the tree.

8. **Global JS entry points**
   - `src/index.js` is the top-level source entry for the block package.
   - `includes/js/plugin.js` suggests a compiled or legacy plugin script that may initialize editor behavior or plugin-wide JS outside the block folders.
   - The architecture likely has both:
     - a **global plugin script**
     - and **per-block entrypoints**

9. **Styling boundaries**
   - Each block has two style layers:
     - `editor.scss` for appearance in the Gutenberg editor
     - `style.scss` for front-end/shared block styling
   - This separation is important for the diagram because editor-only CSS and public-facing CSS are different concerns.

10. **Build/tooling layer**
    - `package.json`, `package-lock.json`, ESLint config, and `.wp-env.json` indicate a modern JS build/test workflow.
    - The repo is set up for WordPress local development and likely bundles JS/Sass into distributable assets.

11. **Likely deployment shape**
    - The source under `src/` is the human-authored block code.
    - The PHP entrypoint and `includes/js/plugin.js` imply there is a packaged plugin distribution that WordPress loads.
    - The diagram should distinguish **source modules** from **loaded plugin assets**.

12. **What to show in an architecture diagram**
    - WordPress admin/editor as the host.
    - A PHP plugin bootstrap layer that registers blocks/assets.
    - Three independent Gutenberg block modules.
    - Shared utilities used by blocks.
    - Separate editor vs front-end style paths.
    - Static block content flow: editor interaction → saved markup → persisted post content → front-end rendering.

Main entry points: [`src/index.js`](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/index.js) (Source entry), [`package.json`](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/package.json) (Build setup), [`inc/Plugin.php`](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/inc/Plugin.php) (Plugin class), [`src/blocks/block-test/index.js`](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/blocks/block-test/index.js) (Test block)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime_php["PHP runtime"]
  node_wordpress(("WordPress<br/>cms host"))
  node_plugin_entry["Plugin entry<br/>bootstrap<br/>[plugin.php]"]
  node_plugin_class["Plugin class<br/>registration<br/>[Plugin.php]"]
end

subgraph group_runtime_js["JS runtime"]
  node_gutenberg_editor(("Editor"))
  node_legacy_js["Plugin JS<br/>global script<br/>[plugin.js]"]
  node_src_index["Source entry<br/>js entry<br/>[index.js]"]
  node_palette["Palette<br/>shared utility<br/>[colors-palette.js]"]
  node_block_test["Test block<br/>gutenberg block<br/>[index.js]"]
  node_bootstrap_block["Bootstrap block<br/>gutenberg block<br/>[index.js]"]
  node_card_block["Card block<br/>gutenberg block<br/>[index.js]"]
end

subgraph group_content_flow["Content flow"]
  node_post_content["Post content<br/>persisted markup"]
  node_frontend(("Front end<br/>public render"))
end

subgraph group_tooling["Tooling"]
  node_build["Build setup<br/>tooling<br/>[package.json]"]
  node_wp_env["WP env<br/>dev env<br/>[.wp-env.json]"]
end

node_wordpress -->|"loads"| node_plugin_entry
node_plugin_entry -->|"initializes"| node_plugin_class
node_plugin_class -->|"registers blocks"| node_src_index
node_plugin_class -->|"enqueues"| node_legacy_js
node_gutenberg_editor -->|"loads"| node_src_index
node_src_index -->|"includes"| node_block_test
node_src_index -->|"includes"| node_bootstrap_block
node_src_index -->|"includes"| node_card_block
node_block_test -->|"uses"| node_palette
node_bootstrap_block -->|"uses"| node_palette
node_card_block -->|"uses"| node_palette
node_block_test -->|"saves HTML"| node_post_content
node_bootstrap_block -->|"saves HTML"| node_post_content
node_card_block -->|"saves HTML"| node_post_content
node_post_content -->|"renders"| node_frontend
node_build -.->|"bundles"| node_src_index
node_build -.->|"bundles"| node_legacy_js
node_build -.->|"configures"| node_wp_env

click node_plugin_entry "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/plugin.php"
click node_plugin_class "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/inc/Plugin.php"
click node_legacy_js "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/includes/js/plugin.js"
click node_src_index "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/index.js"
click node_palette "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/utilities/colors-palette.js"
click node_block_test "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/blocks/block-test/index.js"
click node_bootstrap_block "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/blocks/bootstrap/index.js"
click node_card_block "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/blocks/card/index.js"
click node_build "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/package.json"
click node_wp_env "https://github.com/humayunahmed8/gutenberg-test-block/blob/master/.wp-env.json"

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_wordpress,node_plugin_entry,node_plugin_class toneBlue
class node_gutenberg_editor,node_legacy_js,node_src_index,node_palette,node_block_test,node_bootstrap_block,node_card_block toneAmber
class node_post_content,node_frontend toneMint
class node_build,node_wp_env toneRose
```

## Components

### PHP runtime

WordPress plugin bootstrap and server-side registration

- **WordPress**: cms host · WordPress loads the plugin and hosts the editor/runtime
- [Plugin entry](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/plugin.php): bootstrap · Main plugin entry point for WordPress · `plugin.php`
- [Plugin class](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/inc/Plugin.php): registration · Encapsulates hooks, setup, and block registration logic · `inc/Plugin.php`

### JS runtime

Gutenberg editor-side block code and shared utilities

- **Editor**: block editor · Gutenberg editor where blocks are inserted and edited
- [Plugin JS](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/includes/js/plugin.js): global script · Plugin-wide JavaScript outside the per-block folders · `includes/js/plugin.js`
- [Source entry](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/index.js): js entry · Top-level source entry that wires the block package together · `src/index.js`
- [Palette](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/utilities/colors-palette.js): shared utility · Shared color helper used by blocks · `src/utilities/colors-palette.js`
- [Test block](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/blocks/block-test/index.js): gutenberg block · Static Gutenberg block module with editor and save logic · `src/blocks/block-test/index.js`
- [Bootstrap block](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/blocks/bootstrap/index.js): gutenberg block · Static Gutenberg block module with editor and save logic · `src/blocks/bootstrap/index.js`
- [Card block](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/src/blocks/card/index.js): gutenberg block · Static Gutenberg block module with editor and save logic · `src/blocks/card/index.js`

### Content flow

Static block markup persisted in posts and rendered on the front end

- **Post content**: persisted markup · Saved block HTML stored in WordPress content
- **Front end**: public render · Rendered site output using the saved block markup

### Tooling

Build and local development setup

- [Build setup](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/package.json): tooling · Node, lint, and local WP environment configuration · `package.json`
- [WP env](https://github.com/humayunahmed8/gutenberg-test-block/blob/master/.wp-env.json): dev env · Local WordPress development environment configuration · `.wp-env.json`

## Connections

- WordPress → Plugin entry: loads · WordPress loads the plugin bootstrap file
- Plugin entry → Plugin class: initializes · Bootstrap delegates registration to the plugin class
- Plugin class → Source entry: registers blocks · PHP registers the JS block package and assets
- Plugin class → Plugin JS: enqueues · Registers the plugin-wide JavaScript asset
- Editor → Source entry: loads · Editor loads the block package entry
- Source entry → Test block: includes · Top-level source wires the block modules together
- Source entry → Bootstrap block: includes · Top-level source wires the block modules together
- Source entry → Card block: includes · Top-level source wires the block modules together
- Test block → Palette: uses · Block shares color choices through the palette helper
- Bootstrap block → Palette: uses · Block shares color choices through the palette helper
- Card block → Palette: uses · Block shares color choices through the palette helper
- Test block → Post content: saves HTML · Client-side save output becomes persisted post markup
- Bootstrap block → Post content: saves HTML · Client-side save output becomes persisted post markup
- Card block → Post content: saves HTML · Client-side save output becomes persisted post markup
- Post content → Front end: renders · Persisted block HTML is rendered directly on the front end
- Build setup → Source entry: bundles · Tooling builds the JS source into distributable assets
- Build setup → Plugin JS: bundles · Tooling builds the plugin-wide JS asset
- Build setup → WP env: configures · Local development environment for WordPress