@gavinrigs/decap-blockcontent

A structured block editor widget for Decap CMS. Authors build a page from typed blocks — paragraphs, headings, lists, tables, callouts, blockquotes, dividers, images, video and raw HTML — and the widget serialises them to clean HTML.

Registering

import CMS from "decap-cms-app";
import { register } from "@gavinrigs/decap-blockcontent";

register(CMS);

# config.yml
- { name: body, label: Body, widget: blockcontent }

Options

| Option | Default | Purpose | | --- | --- | --- | | name | "blockcontent" | Widget name used in config.yml. | | emitUtilityClasses | false | Emit the utility classes this widget derives from block settings (font size, list spacing) into the saved HTML. Leave off when the site styles native elements from its own stylesheet. | | uploadFolders | ["/images", "/images/uploads"] | Media folders indexed when previewing not-yet-saved uploads. |

Classes an author types into a block's own CSS classes field are always emitted, regardless of emitUtilityClasses.

register(CMS, { emitUtilityClasses: true });

Styling

src/blockcontent.css is imported automatically by the entry point. It styles the editing surface only; published output is plain semantic HTML that the site is expected to style.

Preview of unsaved images

Newly-picked images are resolved through the shared blob cache in @gavinrigs/decap-plugin-core, so they render immediately instead of 404ing until the entry is saved. register() installs the capture listener, so this works whether or not the preview plugin is installed.

Dependencies

• @gavinrigs/decap-plugin-core
• Peer: react, react-dom