Developers
Start building
Themes/Theme SDK/Modules/elements/Definers

Definers

The definers of @poltura/theme-sdk/elements.

On this page
import { … } from '@poltura/theme-sdk/elements';

defineSection

Declares a section: its type key, inspector settings, children and the component that draws it.

defineSection<S extends SettingsSchema = Record<never, never>>(definition: SectionDefinition<S>): SectionElement

Parameters

  • definition: SectionDefinition<S>: Literal data plus component; the compiler reads everything but component statically.

Returns: The declared section; export it from a file under src/sections.

Example

import { defineSection, field } from '@poltura/theme-sdk/elements';

export const story = defineSection({
  type: 'story',
  label: 'Story',
  description: 'A heading and a paragraph about the brand',
  settings: {
    heading: field.text({ label: 'Heading', default: 'Our story' }),
    body: field.textarea({ label: 'Text' }),
  },
  style: ['spacing', 'background'],
  component: ({ settings, attrs }) => (
    <section {...attrs}>
      <h2>{settings.heading}</h2>
      <p>{settings.body}</p>
    </section>
  ),
});

defineBlock

Declares a block that draws itself inside the frame the platform puts around each instance.

defineBlock<S extends SettingsSchema = Record<never, never>>(definition: BlockDefinition<S>): BlockElement

Parameters

  • definition: BlockDefinition<S>: Literal data plus component; the compiler reads everything but component statically.

Returns: The declared block; export it from a file under src/blocks or src/sections.

Example

import { EditableText, defineBlock, field } from '@poltura/theme-sdk/elements';

export const promoCard = defineBlock({
  type: 'promo-card',
  label: 'Promo card',
  settings: { title: field.text({ label: 'Title', default: 'Summer sale' }) },
  style: ['spacing', 'background', 'border'],
  component: () => <EditableText setting='title' as='h3' className='text-lg font-semibold' />,
});

defineThemeSettings

Declares the theme settings panel in src/settings.ts: its groups and their field.* settings, keyed by their path in the theme's values.

defineThemeSettings<const D extends ThemeSettingsDefinition>(definition: D): D

The platform generates settings/schema.json from it on every save, so it is read without running: every value is a literal, a field.* call, a field set or a const of those.

Parameters

  • definition: D: The panel's groups, in order.

Returns: The definition; export it.

Example

import { defineThemeSettings, field } from '@poltura/theme-sdk/elements';

export const settings = defineThemeSettings({
  groups: [
    {
      id: 'colors',
      label: 'Colors',
      settings: {
        'colors.primary': field.color({ label: 'Primary', default: '#1f3a8a', darkDefault: '#93b4ff' }),
      },
    },
  ],
});
Last updated