Build pipeline demo
This page exists to review the Vite build pipeline on the preview environment. Every asset on it is resolved through the build manifest, and none of it is served from source. Scroll to the bottom to check the back to top button, which is the script that started all of this.
Background Slider
A dynamic block rendered from render.php, with its editor script, view script, editor styles and front end styles all built and registered from block.json alone. On main, inserting this block in the editor crashed it.
Podcast Video Playlist
Rendered through ServerSideRender in the editor. With no playlist ID configured it shows its own notice, which is the expected state here: the point is that the block registers, loads its dependencies in the right order, and renders rather than crashing.
Please enter a YouTube Playlist ID in the block settings.
Featured Video
Renders the post’s video or featured image. On a page with neither it deliberately renders nothing on the front end, and shows a placeholder in the editor only. Open this page in the editor to see that placeholder.
Per block stylesheets
Each core block below has its own stylesheet in the theme. WordPress inlines those in the head, and only for blocks that actually appear on the page, so viewing source here should show inlined rules for the blocks present and nothing for the ones that are not.
A quote block, which should offer no style variations in the editor. Plain and default are both unregistered from the editor entry point.
A details block
Its arrow marker is an SVG that used to be emitted as a separate file. Because these stylesheets are inlined into the head, a relative URL would resolve against the page instead of the stylesheet, so image references are inlined as data URIs.
Filler, so the page scrolls
The back to top button is driven by an IntersectionObserver watching the first heading on the page. It only appears once that heading has scrolled out of view, so the page has to be tall enough for that to happen. Everything below this point exists purely to give it room.
The button itself lives in the footer template part that ships with the theme. On production and on the shared staging site it does not render at all, because the footer was customized in the Site Editor in February and WordPress serves the database copy in preference to the theme file. This preview has a clean database, so the theme file wins and the button is present.
The script behind it is bundled into a single front end entry point. Adding another front end feature means dropping a module into the features directory and importing it, with no enqueue to update and no build config to touch.
Assets are addressed in PHP by their source path and resolved through the manifest, so nothing in PHP ever names a built filename. A renamed or deleted source fails loudly rather than emitting a URL that returns 404 in production, which is the failure this branch exists to make impossible.
Source directories are excluded from the deployed artifact, so a runtime reference into them would work locally and break in production. CI fails any such reference, in either the theme file helper form or the string concatenation form the original bug was written in.
Custom block dependencies are extracted per entry rather than as one shared list, so each script declares exactly the WordPress packages it imports and loads after them. Getting that wrong is silent: the script simply runs before the package it needs exists.
Keep scrolling.
Almost there.
Back to top
The button should now be visible in the bottom right corner. Clicking it should scroll smoothly to the top of the page, and the button should hide itself again once the first heading is back in view.