Gutenberg dynamic block wrappers for shortcodes with editor previews #44

New Issue

2026-06-12T14:49:59Z

thatguygriff commented

2026-06-12 14:49:59 +00:00

Problem

The plugin's four shortcodes — [us_booking], [us_student_login], [us_student_register], [us_group_classes] — show up in the block editor as plain grey shortcode text. There is no way to preview them in the page editor, which makes it hard to style pages to match a theme/layout.

Proposal

Wrap each shortcode in a dynamic block (us-scheduler/booking, us-scheduler/student-login, us-scheduler/student-register, us-scheduler/group-classes):

A new BlockRegistrar class (alongside ShortcodeRegistrar) registers the blocks via register_block_type() with render_callbacks that delegate to the existing page render methods — no duplicated rendering logic. Shortcodes stay for back-compat.
A small vanilla-JS editor script (no build step) registers the editor side using wp.serverSideRender, so the editor shows real server-rendered markup, plus transforms.from shortcode transforms so pasting a shortcode auto-converts to the block.
frontend.css is attached as the blocks' style handle so it loads inside the editor too and previews pick up theme styling.
Editor-safe rendering: in the block-renderer REST context the JS-driven pages (booking, group classes) render a static skeleton with representative placeholder content instead of booting live scripts/Stripe; the registration page renders a preview state instead of requiring an invite token; the login page always renders the form markup in preview even though the editing user is logged in.

Acceptance criteria

All four blocks appear in the inserter (with keywords/icons) and preview server-rendered markup in the editor
Pasting any of the four shortcodes converts to the matching block
Front-end output via blocks is identical to the shortcodes
No live REST calls, redirects, or Stripe.js in editor previews
Unit tests for BlockRegistrar and preview rendering; feature doc in docs/features/
composer test, composer lint, composer cs all pass

## Problem The plugin's four shortcodes — `[us_booking]`, `[us_student_login]`, `[us_student_register]`, `[us_group_classes]` — show up in the block editor as plain grey shortcode text. There is no way to preview them in the page editor, which makes it hard to style pages to match a theme/layout. ## Proposal Wrap each shortcode in a **dynamic block** (`us-scheduler/booking`, `us-scheduler/student-login`, `us-scheduler/student-register`, `us-scheduler/group-classes`): - A new `BlockRegistrar` class (alongside `ShortcodeRegistrar`) registers the blocks via `register_block_type()` with `render_callback`s that delegate to the existing page render methods — no duplicated rendering logic. Shortcodes stay for back-compat. - A small vanilla-JS editor script (no build step) registers the editor side using `wp.serverSideRender`, so the editor shows real server-rendered markup, plus `transforms.from` shortcode transforms so pasting a shortcode auto-converts to the block. - `frontend.css` is attached as the blocks' style handle so it loads inside the editor too and previews pick up theme styling. - **Editor-safe rendering:** in the block-renderer REST context the JS-driven pages (booking, group classes) render a static skeleton with representative placeholder content instead of booting live scripts/Stripe; the registration page renders a preview state instead of requiring an invite token; the login page always renders the form markup in preview even though the editing user is logged in. ## Acceptance criteria - All four blocks appear in the inserter (with keywords/icons) and preview server-rendered markup in the editor - Pasting any of the four shortcodes converts to the matching block - Front-end output via blocks is identical to the shortcodes - No live REST calls, redirects, or Stripe.js in editor previews - Unit tests for `BlockRegistrar` and preview rendering; feature doc in `docs/features/` - `composer test`, `composer lint`, `composer cs` all pass

thatguygriff referenced this issue from a commit

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

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

thatguygriff referenced a pull request that will close this issue

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

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

thatguygriff closed this issue

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

Sign in to join this conversation.