Styling

Every block in Templatical carries a styles property for layout and appearance, plus visibility for per-viewport control.

BlockStyles

The BlockStyles interface controls padding and background.

interface BlockStyles {
  padding: SpacingValue;
  backgroundColor?: string;
}

import { createParagraphBlock } from '@templatical/types';

const block = createParagraphBlock({
  content: '<p>Styled text</p>',
});

block.styles = {
  padding: { top: 16, right: 24, bottom: 16, left: 24 },
  backgroundColor: '#f0f9ff',
};

SpacingValue

Padding uses the SpacingValue type with four directional values in pixels.

interface SpacingValue {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

All four properties are required. Use 0 for sides that need no spacing:

block.styles = {
  padding: { top: 0, right: 16, bottom: 0, left: 16 },
};

Block visibility

The visibility property on any block controls whether it renders at each breakpoint.

interface BlockVisibility {
  desktop: boolean;
  mobile: boolean;
}

Both default to true. Set a breakpoint to false to hide the block at that size:

// Show only on desktop
block.visibility = {
  desktop: true,
  mobile: false,
};

This is useful for showing different content at different screen sizes -- for example, a detailed table on desktop and a simplified list on mobile.

Template-level settings

Beyond individual block styles, the template itself has global settings that affect the overall layout.

Setting	Type	Description
width	number	Template content width in px (typically 600)
backgroundColor	string	Outer background color behind the template
fontFamily	string	Default font family for all blocks

These are configured through the editor's init() config or by modifying the template JSON directly:

import { init } from '@templatical/editor';

const editor = await init({
  container: '#editor',
  content: {
    settings: {
      width: 640,
      backgroundColor: '#f8fafc',
      fontFamily: 'Inter, system-ui, sans-serif',
    },
    blocks: [],
  },
});

Individual blocks can override the template-level fontFamily by setting their own fontFamily property. When a block does not specify a font family, it inherits from the template settings.