Skip to main content

flexweg-blocks

flexweg-blocks ships layout and code primitives for the post editor — the Columns block and the Custom HTML block. It's must-use because disabling it would silently strip those blocks from existing posts on the next render.

What it provides​

Columns block​

2-6 columns side-by-side, with per-column width control and automatic mobile stacking.

  • Inserter category: Layout
  • Per-column widths: equal by default; admins can resize columns by dragging the handles between them.
  • Mobile breakpoint: columns stack vertically below 768px width.
  • Nesting: each column accepts any other block (paragraphs, headings, images, even another Columns block — though deep nesting is discouraged for clarity).

See Editor → Columns for visitor-facing usage.

Custom HTML block​

Raw <script>, <style>, custom microdata — anything dangerouslySetInnerHTML would accept on a normal page.

  • Inserter category: Advanced
  • No sanitisation at publish time. The block's content lands in the published HTML byte-for-byte.
  • Editor preview: rendered live with dangerouslySetInnerHTML so what you see in the editor is what'll publish.

See Editor → Custom HTML for usage examples and security caveats.

How it hooks in​

api.registerBlock(columnsBlock);
api.registerBlock(htmlBlock);
api.addFilter<string>("post.html.body", transformColumnsHtml, 5);
api.addFilter<string>("post.html.body", transformHtmlBlocks, 5);
api.addFilter<string>("page.head.extra", emitColumnsBaselineCss);

Both blocks store as markers inside the post's Markdown:

  • Columns: <div data-cms-columns="..."> with nested <div data-cms-column> containers
  • Custom HTML: <div data-cms-html="..."><!-- raw user code --></div>

At publish time, the two post.html.body filters scan for markers and swap them for the final HTML. Markers from other plugins (embeds, theme blocks) are left untouched — the filter chain composes naturally.

The page.head.extra filter emits a single <style> block with the columns baseline CSS only when at least one columns block was detected on the current page. So a post that doesn't use columns doesn't carry the extra bytes.

Editor styles​

ensureAdminColumnsStyles() runs at module-load to inject the baseline columns CSS into the admin's document head — same baseline as the public site, so the editor preview matches what publishes. This runs once (idempotent).

Internal details​

  • Source: src/mu-plugins/flexweg-blocks/
  • Hooks used: 2 block registrations, 2 post.html.body filters (priority 5), 1 page.head.extra filter
  • Translations: 7 locales

Why must-use​

Disabling would unregister both blocks. Existing posts that contain columns or custom HTML would render their markers as plain <div>s on the next regeneration — visually broken. There's no graceful fallback because the markers carry no presentational hint without the transform filter.

Continue​