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

Merged

thatguygriff merged 1 commits from feature/editor-blocks into main 2026-06-12 15:14:03 +00:00

Conversation 0 Commits 1 Files Changed 10

+624 -20

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

Owner

Copy Link

Copy Source

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 ... 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 <noreply@anthropic.com>

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.

Reviewers

No Reviewers

Labels

Clear labels

bug

Something isn't working

enhancement

Extends an existing feature

feature

New user-facing capability

payments

Billing, Stripe, receipts, reporting

security

Security vulnerability or hardening

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

thatguygriff (James Griffin-Allwood)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Unsupervised/unsupervised-scheduler#45