Gutenberg dynamic-block wrappers for shortcodes with editor previews #45

2026-06-12T15:05:54Z

thatguygriff commented

2026-06-12 15:05:54 +00:00

Problem

The plugin's four shortcodes — [us_booking], [us_student_login], [us_student_register], [us_group_classes] — appear as plain grey shortcode text in the block editor, so there is no way to preview the pages or style them against a theme/layout.

Resolves #44

What changed

BlockRegistrar (new, wired in Plugin::boot()) registers four dynamic blocks — us-scheduler/booking, us-scheduler/student-login, us-scheduler/student-register, us-scheduler/group-classes — whose render_callbacks delegate to the same page objects the shortcodes use, so front-end output is identical either way. Shortcodes remain for back-compat; ShortcodeRegistrar now receives the shared page instances instead of constructing its own.
assets/js/blocks.js (vanilla JS, no build step) registers the editor side of each block: title, icon, keywords, wp.serverSideRender previews, and transforms.from shortcode transforms so pasting a shortcode auto-converts to the matching block.
BlockPreview (new) renders static, script-free editor previews. BlockRegistrar detects the block-renderer REST context (REST_REQUEST) and serves these instead of the live pages — no live REST calls, redirects, or Stripe.js in the editor. Previews reproduce the live markup and CSS classes (#us-booking-app/.us-slot, #us-group-app/.us-class, the real login template, a disabled sample of the registration form), each with a .us-editor-note explaining what the published page shows.
frontend.css is attached as the blocks' style handle so it loads inside the editor and previews pick up theme styling; added a small .us-editor-note style.
Feature doc at docs/features/editor-blocks.md; CLAUDE.md class table updated.

Checks

composer test (214 tests, 650 assertions), composer lint (PHPStan L6 — no errors), and composer cs (PHPCS) all pass. New BlockRegistrarTest covers hook/block/asset registration, front-end delegation, and preview routing; BlockPreviewTest covers preview markup fidelity.

🤖 Generated with Claude Code

## Problem The plugin's four shortcodes — `[us_booking]`, `[us_student_login]`, `[us_student_register]`, `[us_group_classes]` — appear as plain grey shortcode text in the block editor, so there is no way to preview the pages or style them against a theme/layout. Resolves #44 ## What changed - **`BlockRegistrar`** (new, wired in `Plugin::boot()`) registers four dynamic blocks — `us-scheduler/booking`, `us-scheduler/student-login`, `us-scheduler/student-register`, `us-scheduler/group-classes` — whose `render_callback`s delegate to the same page objects the shortcodes use, so front-end output is identical either way. Shortcodes remain for back-compat; `ShortcodeRegistrar` now receives the shared page instances instead of constructing its own. - **`assets/js/blocks.js`** (vanilla JS, no build step) registers the editor side of each block: title, icon, keywords, `wp.serverSideRender` previews, and `transforms.from` shortcode transforms so pasting a shortcode auto-converts to the matching block. - **`BlockPreview`** (new) renders static, script-free editor previews. `BlockRegistrar` detects the block-renderer REST context (`REST_REQUEST`) and serves these instead of the live pages — no live REST calls, redirects, or Stripe.js in the editor. Previews reproduce the live markup and CSS classes (`#us-booking-app`/`.us-slot`, `#us-group-app`/`.us-class`, the real login template, a disabled sample of the registration form), each with a `.us-editor-note` explaining what the published page shows. - **`frontend.css`** is attached as the blocks' `style` handle so it loads inside the editor and previews pick up theme styling; added a small `.us-editor-note` style. - Feature doc at `docs/features/editor-blocks.md`; CLAUDE.md class table updated. ## Checks `composer test` (214 tests, 650 assertions), `composer lint` (PHPStan L6 — no errors), and `composer cs` (PHPCS) all pass. New `BlockRegistrarTest` covers hook/block/asset registration, front-end delegation, and preview routing; `BlockPreviewTest` covers preview markup fidelity. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

thatguygriff added 1 commit 2026-06-12 15:05:54 +00:00

Add Gutenberg dynamic-block wrappers for the front-end shortcodes

CI / No Debug Code (pull_request) Successful in 4s

Details

CI / Tests (PHP 8.2) (pull_request) Successful in 52s

Details

CI / Tests (PHP 8.1) (pull_request) Successful in 54s

Details

CI / Tests (PHP 8.3) (pull_request) Successful in 1m29s

Details

CI / Coding Standards (pull_request) Successful in 1m57s

Details

CI / PHPStan (pull_request) Successful in 2m14s

Details

CI / Build Plugin Zip (pull_request) Has been skipped

Details

fc70cde9d5

Wrap the four shortcodes (us_booking, us_student_login,
us_student_register, us_group_classes) in dynamic blocks so pages can be
previewed and styled in the block editor. Front-end rendering delegates
to the same page objects the shortcodes use; in the editor's
block-renderer REST preview a static, script-free BlockPreview is
rendered instead (no live REST calls, redirects, or Stripe.js). The
editor script (vanilla JS, no build step) registers each block with
wp.serverSideRender previews and shortcode transforms; frontend.css is
attached as the block style so previews pick up theme styling.

Resolves #44

Co-Authored-By: Claude Fable 5 <[email protected]>

thatguygriff merged commit b23508f726 into main

2026-06-12 15:14:03 +00:00

thatguygriff deleted branch feature/editor-blocks

2026-06-12 15:14:03 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Unsupervised/unsupervised-scheduler#45