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

1. liaison-site-prober writes activity logs into the database.
2. The REST API (wp-json/site-prober/v1/logs) exposes logs in JSON format.
3. The dynamic Gutenberg block (Edit component) calls apiFetch({ path: '/site-prober/v1/logs' }).
4. The block maintains internal state:
   • loading → shows Spinner
   • error → shows Notice
   • logs → renders table rows
5. 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.