thatguygriff
fc70cde9d5
CI / No Debug Code (pull_request) Successful in 4s
CI / Tests (PHP 8.2) (pull_request) Successful in 52s
CI / Tests (PHP 8.1) (pull_request) Successful in 54s
CI / Tests (PHP 8.3) (pull_request) Successful in 1m29s
CI / Coding Standards (pull_request) Successful in 1m57s
CI / PHPStan (pull_request) Successful in 2m14s
CI / Build Plugin Zip (pull_request) Has been skipped
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>
67 lines
3.2 KiB
Markdown
67 lines
3.2 KiB
Markdown
# 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`) hooks `init` and registers
|
|
each block with `register_block_type()`: a `render_callback` per block, the
|
|
shared editor script (`assets/js/blocks.js`, handle
|
|
`us-scheduler-blocks`), and the front-end stylesheet
|
|
(`assets/css/frontend.css`, handle `us-scheduler`) as the block `style` so
|
|
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 with `wp.serverSideRender`, which fetches the
|
|
server-rendered markup via the `/wp/v2/block-renderer` REST route.
|
|
- **`BlockPreview`** (`src/BlockPreview.php`) supplies static, script-free
|
|
markup for editor previews. `BlockRegistrar::isEditorPreview()` detects the
|
|
block-renderer context via the `REST_REQUEST` constant (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-app` with sample `.us-day` / `.us-slot` rows and
|
|
disabled Book buttons.
|
|
- **Group classes** — `#us-group-app` with a sample `.us-class` card and a
|
|
disabled Enrol button.
|
|
- **Login** — the real `templates/frontend/login-page.php` template (it has
|
|
no request-state dependencies).
|
|
- **Registration** — a disabled sample of the `.us-register-form` fields.
|
|
|
|
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.
|