About this plugin
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/
js # Block editor UI
scss # Block editor styles
├── build/
js # Compiled block code
├── tests / # Jest unit tests
php # Plugin bootstrap
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.