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

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>
2026-06-12 12:03:27 -03:00
parent 63e2fbcc5b
commit fc70cde9d5
10 changed files with 624 additions and 20 deletions
@@ -0,0 +1,65 @@
+/* global wp */
+(function () {
+    'use strict';
+
+    const { registerBlockType } = wp.blocks;
+    const { createElement: el } = wp.element;
+    const { useBlockProps } = wp.blockEditor;
+    const ServerSideRender = wp.serverSideRender;
+    const { __ } = wp.i18n;
+
+    const blocks = [
+        {
+            name: 'us-scheduler/booking',
+            title: __('Lesson Booking', 'unsupervised-schedular'),
+            description: __('Lets students browse availability and book lessons. Shows a styled preview in the editor.', 'unsupervised-schedular'),
+            icon: 'calendar-alt',
+            keywords: ['booking', 'lesson', 'schedule'],
+            shortcode: 'us_booking',
+        },
+        {
+            name: 'us-scheduler/student-login',
+            title: __('Student Login', 'unsupervised-schedular'),
+            description: __('The front-end login form for students.', 'unsupervised-schedular'),
+            icon: 'admin-users',
+            keywords: ['login', 'student', 'sign in'],
+            shortcode: 'us_student_login',
+        },
+        {
+            name: 'us-scheduler/student-register',
+            title: __('Student Registration', 'unsupervised-schedular'),
+            description: __('The invite-only student registration form.', 'unsupervised-schedular'),
+            icon: 'welcome-add-page',
+            keywords: ['register', 'student', 'invite'],
+            shortcode: 'us_student_register',
+        },
+        {
+            name: 'us-scheduler/group-classes',
+            title: __('Group Classes', 'unsupervised-schedular'),
+            description: __('Lets students browse and enrol in group classes. Shows a styled preview in the editor.', 'unsupervised-schedular'),
+            icon: 'groups',
+            keywords: ['group', 'class', 'enrol'],
+            shortcode: 'us_group_classes',
+        },
+    ];
+
+    blocks.forEach((def) => {
+        registerBlockType(def.name, {
+            apiVersion: 3,
+            title: def.title,
+            description: def.description,
+            icon: def.icon,
+            category: 'widgets',
+            keywords: def.keywords,
+            supports: { html: false, multiple: false },
+            example: {},
+            edit: function Edit() {
+                return el('div', useBlockProps(), el(ServerSideRender, { block: def.name }));
+            },
+            save: () => null,
+            transforms: {
+                from: [{ type: 'shortcode', tag: def.shortcode }],
+            },
+        });
+    });
+}());