Preserve interactive canvas surfaces and account for their conversion

[chubes4]

Reproduction

Import a static HTML page with <canvas id="canvas">, a self-contained same-origin script that paints a particle ripple on pointer movement, and several DOM text spans whose text changes after timers/clicks. The LIQUID BONSAI source runs this exact interaction. At 1440×900 headless Chromium, pointer motion changes the rendered canvas bytes; the text also progresses from Synchronizing to ALL SYSTEMS ACTIVE within 12 seconds. Its Data Liberation 0.6.7 portable artifact currently strips the script while retaining frozen text and a blank canvas (capture issue Automattic/data-liberation-agent#425).

In the subsequent Static Site Importer 1.19.2 / bundled Blocks Engine import, the <canvas> is absent entirely. The report declares zero fallback and interaction candidates despite this lost visual/behavioral surface. The clock and status are static. Without a source-side runtime artifact we cannot yet prove a PHP transformer fix end-to-end; this issue tracks the downstream generic conversion and explicit loss reporting.

Acceptance

• Account for visible canvas and source script interactions in the conversion receipt and block editor. Native Gutenberg content stays editable and a custom interactive block, if necessary, is a generic reusable primitive rather than source-specific JavaScript.
• Coordinate with upstream portable capture contract; do not silently discard an interactive surface while reporting full fidelity.
• Verify source/capture/WordPress rendered canvas after pointer motion, clock/status time progression, click replay, and Gutenberg save at phone/tablet/desktop widths with a neutral fixture and fresh import.

AI assistance: GPT-6 Sol via OpenCode investigated the source/capture/import gap and authored this issue; Chris Huber directs the goal and retains merge authority.

[chubes4]

Additional browser reproduction: after transiently injecting the original canvas and same-origin script into the imported page (without changing site files), the script throws Cannot read properties of null (reading classList) and Cannot set properties of null (setting textContent). The imported block DOM retains #legal-text, #clock-time, #hours, #minutes, and #status-text, but drops source #colon and #timezone IDs while converting their spans to synthetic paragraphs/marks. Animation parity thus also needs stable script-target anchor preservation and a canvas surface, beyond upstream script capture. AI assistance: GPT-6 Sol via OpenCode ran the Playwright DOM/runtime probe and wrote this comment.

[chubes4]

Review finding on current Homeboy candidate: its canvas block registration is in packages/blocks-engine/src/wp/bootstrap.ts (Node/JSDOM raw conversion), while the observed Studio import uses php-transformer/src/HtmlToBlocks via SSI. The candidate changes no PHP conversion path or WordPress frontend/editor block registration in the imported theme, so a fresh Studio import still drops canvas. Please prove a paired SSI+BE import emits the canvas at runtime and that Gutenberg can edit/save the registered block before calling this parity work complete. Source #colon/#timezone also need native anchor preservation. AI assistance: GPT-6 Sol via OpenCode reviewed the proposed diff against the actual production import path.

[chubes4]

Follow-up from the released canvas/inline-shell import: the native canvas block now preserves an editable DOM target, but replaying the original same-origin script is insufficient for editable parity. In the captured LIQUID BONSAI resources/script.js, animateLocation, animateLegalStatus, animateID, and animateStatus reset text to hardcoded source strings (Madrid / SPAIN, LIMITED COMPANY, B01682616, ALL SYSTEMS ACTIVE); click handlers invoke them again. Reattaching that script would overwrite saved Gutenberg text edits, even if the canvas animates. The source script also recreates #sync-dots through innerHTML after the capture removed the executable runtime. A viable generic block/runtime contract must read authored current block content for replay targets, preserve the startup/click/timer sequence and canvas pointer behavior, and pass editor save/reload plus 390/768/1440 browser tests. Simply preserving script bytes or canvas markup must not count as converted behavior. Evidence: the captured script under the retained 2026-09-28 LIQUID BONSAI source and DLA #425. AI assistance: GPT-6 Sol via OpenCode inspected source JS and importer runtime paths and wrote this constraint; Chris Huber directs the work.

[chubes4]

Final paired WordPress proof (September 29)

BE #2332 landed and shipped in php-transformer-v0.26.0; all ten PHP/integration/visual checks and the retried solved-site-promotion gate are green (CI run). The live clock, Unicode font subsets and readiness were already shipped in v0.25.0.

After Homeboy’s disk reserve recovered, SSI 8a8200dc4446 built a dev package from BE 13f7003c62b3 through npm run build:dev-package -- --blocks-engine-path /Users/chubes/Developer/blocks-engine@feat-2293-motion-pending-phase --output-dir /Users/chubes/Studio/liquidbonsai-motion-pending-package. A fresh Studio import of the retained DLA capture using that zip created /Users/chubes/Studio/liquidbonsai-motion-pending-built-20260929 at http://localhost:8915: one page, 31 compiled blocks, zero fallbacks, unsupported losses, runtime islands or import errors. The native canvas came from the importer; live clock and text-motion blocks were manually authored from this exact BE generator branch, and the canvas effect was explicitly enabled in Gutenberg. Thus behavior remains opt-in, not automatically inferred from arbitrary scripts.

Real Gutenberg inserted, configured, saved and reloaded both optional blocks, with 21/21 blocks valid. A separate actual edit of the native legal paragraph survived save/reload and animated click replay using the edited text; restoring it through Gutenberg re-established source parity. The independent source-versus-WordPress DLA contract passed settled and first-visible startup text, visitor-local clock/date, five click replays and idle-controlled pointer-painted canvas at 390/768/1440px. DLA visual snapshots also passed all three widths (pixel evidence displayed as 1.0000 rounded, not an exact-pixel gate), while independent section boxes and the 905px document height matched. 1600/1728px default typography/text comparisons passed. A finite startup ripple occasionally outlasted the earlier comparator’s fixed idle delay; DLA #454 fixed this with a bounded quiet-window test and shipped in v0.7.3.

Boundary: source → portable HTML capture remains motion-unreproduced at 390/768/1440px (and still shows 185 vs 186 text chars plus 78% typography coverage); the interactive editable WordPress candidate passes its independent browser gate. The static capture is not an interactive deliverable. DLA #425 tracks that remaining capture contract. Keep promotion/status claims scoped to the authored WordPress candidate until the portable capture itself is proven.

AI disclosure: GPT-6 Sol via OpenCode built and imported the exact BE branch package, configured and edited the fresh Gutenberg site, ran the independent real-browser, visual and editor checks, diagnosed and landed a comparator timing repair, and wrote this evidence. Chris Huber directs acceptance.

[chubes4]

Source → portable capture → native WordPress conversion proven

DLA #458 shipped in v0.8.0: the newly authored, independently verified portable LIQUID BONSAI artifact animates clock, pending status/click replay and pointer canvas without the original hardcoded source JS. Plain DLA compare against the fresh portable run passes at 390/768/1440px without a --candidate override.

BE #2346 merged with green PHP/visual/integration/solved-site CI and shipped in php-transformer-v0.26.5. It carries authored canvas effect attributes into the native drawing block, lowers hidden JSON motion/clock markers into existing editable blocks, and animates the sole native paragraph leaf when an authored selector points at its retained wrapper. A fresh SSI 8a8200dc4446 + BE d52c7f4dfd1b paired package imported the actual portable artifact, automatically producing 33 blocks including all three motion companions; zero fallbacks, islands, content loss, and runtime dependency findings. No manual block insertion or source-script replay was required.

Real Gutenberg save/reload validated the imported blocks and pending config. Changing the legal text in its native paragraph, saving/reloading and clicking replay animated the new text, and a subsequent Gutenberg restoration reinstated the original source parity. Real Chromium source→WordPress and separately portable→WordPress first-phase visibility, text, local clock/date, all five clicks and canvas response passed 390/768/1440px; source/WordPress screenshot evidence was 0.9998/0.9999/1.0000 rounded at these widths. Evidence and capture caveat are on DLA #425. This is opt-in authored behavior, not automatic arbitrary-script conversion.

AI disclosure: GPT-6 Sol via OpenCode performed all three stages of real browser and Gutenberg verification, authored BE native integration fixes and PHP contracts, and wrote this tracker update. Chris Huber directs acceptance.