Skip to content

Editor blocks (checklist + collapsibles) & design standardization - #6

Merged
HumbleBee14 merged 4 commits into
mainfrom
feature/editor-and-standardization
Jul 12, 2026
Merged

Editor blocks (checklist + collapsibles) & design standardization#6
HumbleBee14 merged 4 commits into
mainfrom
feature/editor-and-standardization

Conversation

@HumbleBee14

Copy link
Copy Markdown
Member

Two threads in one branch: (1) making the /write editor's offered blocks actually supported end-to-end (no silent data loss), and (2) design standardization. Tests (50) and a production build pass; the editor block rendering was verified end-to-end with a throwaway post.

Editor blocks — support what's offered, drop what isn't

The formatting-toolbar block dropdown offered types our MDX export didn't handle (Check List, Toggle List/Heading, H4–H6) — they'd silently break on the published site. Fixed both directions:

  • Check List → serializes to GFM task lists (- [ ] / - [x]); renders as real checkboxes on the site (accent-colored). Offered in the slash menu too.
  • Toggle List + Toggle Heading → serialize to <details>/<summary>; render as real collapsibles on the site (rotating caret, reduced-motion aware). Markdown inside a collapsible renders correctly (verified: bold + links).
  • H4–H6 removed from the block dropdown via a custom FormattingToolbar — editor H1–H3 map to site h2–h4, which is all a blog post needs (a little more than Medium, no clutter). Toggle headings stay dropdown-only to keep the slash menu clean.
  • /write intro trimmed to one line.

Verified end-to-end: built a temp post with a checklist + a collapsible → checkboxes, <details>, and inner markdown all rendered; then removed it.

Homepage

  • Tools/playground section (core to the site) now sits above the community/"The conversation" section.

Design standardization (in progress on this branch)

  • Border-radius tokens: the dominant radii (6/8/12/99px, 50%, 3px) across pages + global.css now use the --radius-* scale for uniform control. Off-scale one-offs and compound corners left untouched (zero visual change).
  • Still to come on this branch (I'll push more commits before you merge): shared .chip base + variants (collapsing the ~7 pill variants), shared .card/.card--interactive + an IconLinkCard component (the card recipe is copied 5×), and standardizing About/Contact/topics onto the .page-head/.page-h1 masthead (they currently borrow the blog-specific .blog-h1, so titles jump ~4px between pages). These are visual refactors — the Cloudflare preview on this PR is the best way to review them.

Notes

  • Text/background color on selected text (inline) was already supported and theme-aware — confirmed, no change needed.
  • The block-type dropdown restriction and checklist/toggle support mean the editor no longer offers anything that can't be published.

Replace exact-match single-value radii (6/8/12/99px, 50%, 3px) across
pages + global.css with the --radius-* tokens for uniform global control.
Off-scale one-offs (10/4/5/14px) and compound corner values left as-is to
avoid any visual shift.
Writers can now use Check List and Toggle List/Heading in /write, and
they render correctly on the published site (no silent data loss):
- Serializer: checkListItem → GFM task list (- [ ] / - [x]); toggleListItem
  and toggle headings → <details>/<summary> with markdown children
- Slash menu offers Check List + Toggle List (toggle headings stay
  dropdown-only to avoid clutter)
- Block-type dropdown drops H4–H6 (custom FormattingToolbar); editor H1–H3
  map to site h2–h4, which is all a blog post needs
- Site CSS styles task lists (accent checkboxes) and <details> (rotating
  caret, respects reduced-motion)
- Verified end-to-end via a throwaway post: checkboxes, collapsibles, and
  markdown inside collapsibles all render

Also trim the /write intro to a single concise line.
The playground/tools section is core to the site, so it now sits above
the community/discussion section.
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 12, 2026

Copy link
Copy Markdown

Deploying mlsystems with  Cloudflare Pages  Cloudflare Pages

Latest commit: a27a727
Status: ✅  Deploy successful!
Preview URL: https://de10be06.mlsystems.pages.dev
Branch Preview URL: https://feature-editor-and-standardi.mlsystems.pages.dev

View logs

topics/[id] used the blog's 2-column .blog-head/.blog-h1 but had nothing
in the second column, leaving a half-empty grid and a slightly larger H1
than sibling listing pages. Switch it to the standard .page-head/.page-h1
so it matches /topics and the other section pages.
@HumbleBee14
HumbleBee14 merged commit 02708b4 into main Jul 12, 2026
2 checks passed
@HumbleBee14
HumbleBee14 deleted the feature/editor-and-standardization branch July 12, 2026 23:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant