thatguygriff
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>
3.2 KiB
Editor Blocks
Gutenberg dynamic-block wrappers for the plugin's four front-end shortcodes, so the pages can be previewed and styled inside the block editor instead of appearing as grey shortcode text.
Blocks
| Block | Wraps shortcode | Front-end renderer |
|---|---|---|
us-scheduler/booking |
[us_booking] |
Booking\BookingPage::render() |
us-scheduler/student-login |
[us_student_login] |
Auth\LoginPage::render() |
us-scheduler/student-register |
[us_student_register] |
Auth\RegistrationPage::render() |
us-scheduler/group-classes |
[us_group_classes] |
GroupClass\GroupClassPage::render() |
The shortcodes remain registered for back-compat; blocks and shortcodes share
the same page objects (constructed once in Plugin::boot()), so front-end
output is identical either way. Pasting a shortcode into the block editor
auto-converts it to the matching block via a transforms.from shortcode
transform.
How it works
BlockRegistrar(src/BlockRegistrar.php) hooksinitand registers each block withregister_block_type(): arender_callbackper block, the shared editor script (assets/js/blocks.js, handleus-scheduler-blocks), and the front-end stylesheet (assets/css/frontend.css, handleus-scheduler) as the blockstyleso it also loads inside the editor and previews pick up theme styling.assets/js/blocks.js(vanilla JS, no build step) registers the client side of each block — title, icon, keywords, shortcode transform — and renders the editor preview withwp.serverSideRender, which fetches the server-rendered markup via the/wp/v2/block-rendererREST route.BlockPreview(src/BlockPreview.php) supplies static, script-free markup for editor previews.BlockRegistrar::isEditorPreview()detects the block-renderer context via theREST_REQUESTconstant (front-end template rendering never happens inside a REST request) and renders the preview instead of the live page.
Editor preview behaviour
Live pages cannot run in the editor: booking and group classes are populated by JavaScript making authenticated REST calls (and may load Stripe.js), registration requires a valid invite token, and login short-circuits for logged-in users (the editing admin always is). Each preview therefore reproduces the live wrapper elements and CSS classes with representative placeholder content:
- Booking —
#us-booking-appwith sample.us-day/.us-slotrows and disabled Book buttons. - Group classes —
#us-group-appwith a sample.us-classcard and a disabled Enrol button. - Login — the real
templates/frontend/login-page.phptemplate (it has no request-state dependencies). - Registration — a disabled sample of the
.us-register-formfields.
Each preview starts with a .us-editor-note paragraph explaining what the
published page shows instead. The note class only appears in editor previews.
Tests
tests/Unit/BlockRegistrarTest.php— hook registration, block/asset registration, front-end delegation to the page objects, preview-mode routing.tests/Unit/BlockPreviewTest.php— preview markup mirrors the live CSS classes/ids and includes the editor note.