內容簡介
Liaison Site Prober Viewer 是一款 Gutenberg 動態區塊外掛，透過 REST API 即時擷取並顯示系統活動記錄，讓管理者無需離開編輯器即可監控網站動態，兼顧效能與安全性。
【主要功能】
• 以 Gutenberg 動態區塊即時呈現系統記錄
• 透過 REST API 自動擷取最新活動資料
• 內建權限驗證與 XSS 防護機制
• 自動偵測主外掛安裝狀態與版本相容性
• 支援載入中、錯誤、空資料等多種狀態顯示
• 僅向已授權的管理員回傳記錄資料
外掛標籤
開發者團隊
原文外掛簡介
A dynamic Gutenberg block for Liaison Site Prober that fetches and displays real-time
system logs via the REST API. Engineered for performance and security,
it provides a seamless way to visualize site activity without compromising page speed.
Architecture
Plugin structure:
liaison-site-prober-viewer/
├── src/
│ ├── edit.js # Block editor UI
│ └── editor.scss # Block editor styles
├── build/
│ └── index.js # Compiled block code
├── tests/ # Jest unit tests
├── liaison-site-prober-viewer.php # Plugin bootstrap
└── package.json / node_modules # JS dependencies
Architecture Diagram (textual):
[Database: liaison-site-prober activity table]
|
v
[WordPress REST API endpoint: wp-json/site-prober/v1/logs]
|
v
[Gutenberg dynamic block: liaison-site-prober-viewer]
|
v
[Editor/UI: renders logs in a table inside the block]
Data Flow
liaison-site-prober writes activity logs into the database.
The REST API (wp-json/site-prober/v1/logs) exposes logs in JSON format.
The dynamic Gutenberg block (Edit component) calls apiFetch({ path: '/site-prober/v1/logs' }).
The block maintains internal state:
loading → shows Spinner
error → shows Notice
logs → renders table rows
Logs are displayed dynamically in the block editor and frontend (if rendered).
Why Dynamic Block
Logs are constantly changing; storing static markup would show stale data.
Dynamic block fetches fresh logs each render.
No need for manual updates in post content.
Leverages REST API + React state for live data.
Security Considerations
Permissions:
REST endpoint uses permission_callback to restrict access.
Sanitization:
All output in the block uses esc_html() to prevent XSS.
Deactivation checks:
Plugin checks that liaison-site-prober is installed and meets minimum version.
Avoid exposing sensitive data:
Only logs intended for admin or authorized users are returned.
Use wp_die() for activation errors, preventing unsafe state.
Trade-offs / Limitations
Pros:
Easy to use in Gutenberg editor.
Always shows live logs.
Minimal custom PHP; relies on WordPress REST API.
Cons:
Slightly slower in editor due to API fetch.
Unit testing does not hit real database (mocked).
Requires liaison-site-prober to be installed.
Not fully decoupled from REST API; block depends on API stability.
Testing
Run JS unit tests:
`bash
npm ci
npm test
Block uses Jest with @wordpress/scripts preset.
REST API calls are mocked; tests cover loading, empty, and error states.
