From Article Builder to a live WordPress page

If instead you're hitting a hosted copy (e.g. a URL under deliberatelearners.com/tools/), it may sit behind basic-auth sign-in like the prompt below — enter the credentials once and the builder loads as a normal page.

The stacked panels are Article Header, Add a Part, and Parts in this Article. The whole article lives in the page's memory until Done — build article.html compiles it.

Watch the live preview update field-by-field as you type — it's the fastest way to catch a typo before it's buried in HTML. Reset / Erase only clears this panel, not the rest of the article.

Leave Numbered step selected. Keep the Zone 1 summary to one sentence. Tick "Show an always-visible command line" only if the step has a literal command to run — it renders as its own you type block regardless of whether the reader ever opens Zone 2.

Zone 2 (and every long text field) accepts light formatting: a blank line starts a new paragraph, **bold** and `code` work inline, ## makes a sub-heading, lines starting with - or * become a bullet list, 1. becomes a numbered list, a line starting with $ becomes a "you type" command, and a fenced ```…``` block becomes a "you'll see" output block.

When the part is ready, click Append to Article.

After appending, the live preview shows the step collapsed behind a "More detailed info" toggle — the exact component wrapping this very paragraph. Click it: it should relabel to "Less info" and reveal Zone 2. This show/hide interaction is the entire reason the tool exists, so get in the habit of testing every toggle you add.

The form resets its fields after each append but keeps building the same article underneath. Skip the command-line checkbox on steps that don't need one. Done — build article.html is what finally compiles everything, so don't click it until every step is in.

Each row is matched to its card in the live preview. Every row carries three controls: ↑ and ↓ swap a part with its neighbor (grayed out at whichever end doesn't apply), and × deletes it outright. Moving a part re-renders the live preview immediately — including step numbers, since a Numbered Step that moves past a Text block or Optional Section renumbers itself automatically.

A step tag that was explicitly restarted (see the next two steps below) shows a small ↻ next to its number in this outline — e.g. STEP 01 ↻ — so you can tell at a glance which "01" is the actual start of the article and which one is a deliberate restart further down.

Switch Add a Part to Optional section for content that isn't a numbered step — a troubleshooting note, a "why this matters" aside. It adds an Eyebrow label, a Section title, a one-line teaser (Zone 1), and an Accent color picker — Neutral, Amber for "proceed with care," or Rust for "troubleshooting." Zone 2 holds the full write-up, hidden the same way as a step's detailed info.

Not every part of an article is a numbered step or an aside — sometimes you just need a line of narrative between two steps, or an intro before the first one. Switch Add a Part to Text block for that: one textarea, parsed with the exact same formatting rules as a step's Zone 2 (headings, lists, bold, code, command blocks, and ![alt text](image url) for images), rendered directly into the article with no title field and no "More detailed info" toggle to click through.

It's also unstyled on purpose — no card, no border, no background — so it reads as plain body copy flowing between the boxed step and section cards around it, the way an intro paragraph or a closing note would in a normal article.

A Text block or an Optional Section can now sit between two Numbered Steps, which raises a question the builder used to answer for you silently: does the next step continue the sequence, or start a new one? Every step form has a Step numbering dropdown for this — Continue from the previous step (the default) keeps counting through whatever's in between, and Restart at 01 begins a fresh sequence right there, useful for something like a separate troubleshooting mini-list later in the same article.

This isn't cosmetic renumbering after the fact — the live preview, the exported HTML, and the outline's "STEP NN" tags all derive their numbers from the same one calculation, so whichever you pick is reflected consistently everywhere, immediately.

Images aren't a separate part type — they're an optional field on whichever part they illustrate, the same way a step can optionally carry an always-visible command line. Check Add an image on a Numbered Step or an Optional Section, and two tabs appear: Media Library URL and Embed a file directly.

The builder doesn't host images itself — a Custom HTML block just renders whatever markup you paste into it, so an <img> tag needs a URL WordPress can actually serve. In wp-admin, go to Media → Add New, upload the image, open it, and copy its File URL (something like https://yoursite.com/wp-content/uploads/2026/07/photo.jpg). Paste that URL into the Image URL field, and fill in Alt text — it's required, not optional: the builder blocks Append until it's filled in.

This Media-Library route is the one to prefer: WordPress generates responsive sizes for it and the tag ships with loading="lazy", so it behaves like every other image on the site.

No Media Library access yet, or just prototyping? Switch to Embed a file directly and pick a local file — the builder reads it with FileReader.readAsDataURL() and embeds it as a base64 data URI right inside the exported HTML, no upload step at all. Reach for this only when you have to, though. It skips WordPress's responsive sizing and loading="lazy" entirely — there's nothing left to defer, the bytes are already sitting in the document — and it means the image's full weight travels inside the Custom HTML block's saved content on every page load: the same "nothing is actually deferred" tradeoff as hiding a screenshot behind a toggle in a single self-contained file, except here it's living permanently in the database instead of a one-off page.

Once every step and section is in the outline, click Done — build article.html. This triggers a download and prints the same markup into a Final HTML box — use Copy to clipboard there if you'd rather not dig through your Downloads folder. The output starts with <!-- wp:html --> followed by a <style> block, your confirmation it's pre-shaped for a Gutenberg Custom HTML block — no separate stylesheet to install.