@brilo/base-blocks

Shared Gutenberg block factory library. Tenants consume it as a local file dependency — each tenant calls factory functions, registers the result, and owns only block.json + icon files.

Install (tenant)

Published as @brilo/base-blocks npm package — normal bun install in tenant pulls it.

For local dev against uncommitted base-blocks changes, use bun link:

# in base-blocks
bun run build
bun link

# in tenant gutenberg dir
bun link @brilo/base-blocks

Re-run bun run build in base-blocks after any change — link points at build/, not src/.

Structure

src/
  blocks/
    <domain>/     domain folders, one per content type — mirrors frontoffice
                  twig components 1:1: anchor/, compare/, contact/, faq/,
                  gallery/, hero/, person/, signpost/, step/, testimonial/,
                  usp/ … each with <domain>-group/ and/or <domain>-item/
    core/         atomic, no inner blocks: basic-button · basic-heading · basic-overline
    groups/       generic (non-domain) layout groups: banner-group · basic-header-group ·
                  button-group · content-group · text-and-media-group
    sections/     top-level page sections: base-section
    layout/       aside/content layout blocks
    form/         form-group · form-field
    link/ · map/ · newsletter/ · post/ · responsive-grid/
  components/   IconControl · ImagePicker · ItemIconControl
  hooks/        useGroupBlock · useTenantColorPalette
  utils/        createEditAdapter
  editor.scss   SCSS barrel — @forward all block + component + global styles
  globals.scss  global editor utility classes (flex, gap-*, u-grid-*, …)
  index.ts      JS/TS barrel
  types.ts      shared types (BriloBlockType, SelectOption, Icon, OptionArray, …)

Each block folder: factory.tsx, edit.tsx, types.ts, constants.ts (if any option arrays), icon.tsx (if custom icon), index.ts, editor.scss. Imports reach shared code via the ~/* alias (~/types, ~/hooks/..., ~/components/...), never relative climbing. See BLOCKS_GUIDE.md for the full authoring guide — treat it (and actual src/blocks/*) as source of truth over docs/*.md, which describe an older layout.

Styles (tenant)

In tenant index.scss:

@use "@brilo/base-blocks/src/editor";  /* all block styles in @layer base */
@import "@brilo/gutenberg-toolkit/build/index.css";

@layer base, tenant;  /* tenant layer always wins */

Override any base style in tenant SCSS with @layer tenant { }.

Build

# in base-blocks
bun run build   # tsc compile → build/

# in tenant (prebuild hook runs tsc automatically)
bun run build
bun run start

API

See USAGE.md for factory examples.

All factories return BlockConfiguration<Attributes> — pass directly to registerBlockType.