@brilo/base-blocks 0.1.0

package/src/blocks/contact/contact-item/edit.tsx

@@ -0,0 +1,93 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  RangeControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import type {CSSProperties} from 'react'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
+import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_SIZE_RANGE, CONTACT_ICON_SIZES, CONTACT_ICON_TYPES} from './constants'
+import type {ContactIconSizeVariant, ContactItemAttributes, ContactItemOptions} from './types'
+
+export function createContactItemEdit(options: ContactItemOptions) {
+  const iconOptions = {icons: options.icons ?? [], iconsSrc: options.iconsSrc ?? ''}
+
+  return function Edit({
+    attributes,
+    setAttributes,
+    context,
+  }: {
+    attributes: ContactItemAttributes
+    setAttributes: (a: Partial<ContactItemAttributes>) => void
+    context: Record<string, unknown>
+  }) {
+    const {colSpan, icon, iconSize} = attributes
+    const columns = Number(context[CONTACT_COLUMNS_CONTEXT] ?? 3)
+    const span = Math.min(colSpan, columns)
+
+    const sizePreset = CONTACT_ICON_SIZES.find((s) => s.value === iconSize.variant)
+    const iconPx =
+      iconSize.variant === 'custom' ? iconSize.custom : sizePreset && 'size' in sizePreset ? sizePreset.size : CONTACT_ICON_SIZE_DEFAULT
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-contact'),
+      containerClassName: [options.containerClassName ?? 'i-contact__inner'],
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      orientation: 'vertical',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Šířka', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={String(span)}
+              onChange={(v) => setAttributes({colSpan: Number(v)})}
+            >
+              {Array.from({length: columns}, (_, i) => i + 1).map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={CONTACT_ICON_TYPES} options={iconOptions} />
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost ikony', 'brilo-blocks')}
+              value={iconSize.variant}
+              onChange={(v) => setAttributes({iconSize: {...iconSize, variant: v as ContactIconSizeVariant}})}
+            >
+              {CONTACT_ICON_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            {iconSize.variant === 'custom' && (
+              <RangeControl
+                label={__('Vlastní velikost (px)', 'brilo-blocks')}
+                value={iconSize.custom}
+                min={CONTACT_ICON_SIZE_RANGE.min}
+                max={CONTACT_ICON_SIZE_RANGE.max}
+                onChange={(v) => setAttributes({iconSize: {...iconSize, custom: v ?? CONTACT_ICON_SIZE_RANGE.min}})}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps} style={{...(blockProps.style as CSSProperties), '--col-span': span} as CSSProperties}>
+          <div className="i-contact__icon-wrap" style={{'--icon-size': `${iconPx}px`} as CSSProperties}>
+            <ItemIconPreview icon={icon} className="i-contact__icon" setAttributes={setAttributes} options={iconOptions} />
+          </div>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/contact/contact-item/editor.scss

@@ -0,0 +1,38 @@
+// WP core centers `.wp-block` children (`margin-left/right: auto`) and caps their
+// `max-width` when the parent isn't is-layout-flex/grid. The item content lives in
+// `.i-contact__inner` (plain `display:flex`, no WP layout class), so kill it here.
+// Unlayered + (0,3,0) to beat core's unlayered (0,2,0) rule.
+.editor-styles-wrapper .i-contact__inner > .wp-block {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: none;
+}
+
+.i-contact {
+  grid-column: span var(--col-span, 1);
+  margin-inline: 0;
+  width: 100%;
+
+  .i-contact__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    p,
+    h3,
+    h2,
+    h4 {
+      margin-block: 4px;
+    }
+  }
+
+  .i-contact__icon-wrap {
+    --icon-size: 32px;
+  }
+
+  .i-contact__icon img {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    object-fit: contain;
+  }
+}

package/src/blocks/contact/contact-item/factory.tsx

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
+import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_TYPES} from './constants'
+import {createContactItemEdit} from './edit'
+import type {ContactItemAttributes, ContactItemOptions} from './types'
+
+export type {ContactItemAttributes, ContactItemOptions}
+
+export function createContactItemBlock(options: ContactItemOptions): BlockConfiguration<ContactItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Kontaktní položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'id-alt',
+    supports: {html: false, customClassName: false},
+    usesContext: [CONTACT_COLUMNS_CONTEXT],
+    attributes: {
+      colSpan: {type: 'number', default: 1},
+      icon: {
+        type: 'object',
+        default: {type: CONTACT_ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+      iconSize: {
+        type: 'object',
+        default: {variant: 'md', custom: CONTACT_ICON_SIZE_DEFAULT},
+      },
+    },
+    edit: createContactItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ContactItemAttributes>
+}

package/src/blocks/contact/contact-item/index.ts

@@ -0,0 +1,23 @@
+export type {ContactIconSize, ContactIconSizeVariant, ContactItemAttributes, ContactItemOptions} from './types'
+export {createContactItemBlock} from './factory'
+export {CONTACT_ICON_SIZE_RANGE, CONTACT_ICON_SIZES, CONTACT_ICON_TYPES} from './constants'
+
+import type {ContactItemOptions} from './types'
+
+export const contactItemDefaults: ContactItemOptions = {
+  name: 'brilo/contact-item',
+  parent: ['brilo/contact-group'],
+  allowedBlocks: [
+    'core/heading',
+    'core/paragraph',
+    'core/list',
+    'core/image',
+    'core/table',
+    'brilo/column-group',
+    'brilo/responsive-grid-group',
+  ],
+  template: [
+    ['core/heading', {level: 3}],
+    ['core/paragraph', {}],
+  ],
+}

package/src/blocks/contact/contact-item/types.ts

@@ -0,0 +1,21 @@
+import type {BriloBlockType, Icon} from '~/types'
+import type {IconType} from '~/components/IconControl'
+import type {CONTACT_ICON_SIZES} from './constants'
+
+export type ContactIconSizeVariant = (typeof CONTACT_ICON_SIZES)[number]['value']
+
+export interface ContactIconSize {
+  variant: ContactIconSizeVariant
+  custom: number
+}
+
+export interface ContactItemAttributes extends Record<string, unknown> {
+  colSpan: number
+  icon: Icon
+  iconSize: ContactIconSize
+}
+
+export interface ContactItemOptions extends BriloBlockType {
+  icons?: IconType[]
+  iconsSrc?: string
+}

package/src/blocks/core/basic-button/constants.ts

@@ -0,0 +1,17 @@
+import {__} from '@wordpress/i18n'
+
+export const DEFAULT_VARIANTS = [
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_SIZES = [
+  {value: 'default', label: __('Výchozí', 'brilo-blocks')},
+  {value: 'sm', label: __('Malá', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_FULL_WIDTH_OPTIONS = [
+  {value: 'false', label: __('Ne', 'brilo-blocks')},
+  {value: 'mobile', label: __('Mobil', 'brilo-blocks')},
+  {value: 'true', label: __('Vždy', 'brilo-blocks')},
+] as const

package/src/blocks/core/basic-button/edit.tsx

@@ -0,0 +1,107 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
+import type {BasicButtonAttributes, BasicButtonOptions, ButtonFullWidth, ButtonSize, ButtonVariant} from './types'
+
+export function createBasicButtonEdit(options: BasicButtonOptions) {
+  const VARIANTS = options.variants ?? DEFAULT_VARIANTS
+  const SIZES = options.sizes ?? DEFAULT_SIZES
+  const FULL_WIDTH_OPTIONS = options.fullWidthOptions ?? DEFAULT_FULL_WIDTH_OPTIONS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BasicButtonAttributes
+    setAttributes: (a: Partial<BasicButtonAttributes>) => void
+  }) {
+    const {title, variant, outline, fullWidth, size, url} = attributes
+    const blockProps = useBlockProps({
+      className: clsx(
+        options.blockClassName ?? 'i-button',
+        `--variant-${variant}`,
+        `--size-${size}`,
+        outline && '--outline',
+        fullWidth !== 'false' && `--full-width-${fullWidth}`,
+      ),
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Tlačítko', 'brilo-blocks')}>
+            <TextControl
+              label={__('Text tlačítka', 'brilo-blocks')}
+              value={title}
+              onChange={(value) => setAttributes({title: value})}
+              placeholder={__('Text tlačítka...', 'brilo-blocks')}
+            />
+            <ToggleGroupControl
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(value) => setAttributes({variant: value as ButtonVariant})}
+              isBlock
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleControl label={__('Outline', 'brilo-blocks')} checked={outline} onChange={(value) => setAttributes({outline: value})} />
+            <ToggleGroupControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={size}
+              onChange={(value) => setAttributes({size: value as ButtonSize})}
+              isBlock
+            >
+              {SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Celá šířka', 'brilo-blocks')}
+              value={fullWidth}
+              onChange={(value) => setAttributes({fullWidth: value as ButtonFullWidth})}
+              isBlock
+            >
+              {FULL_WIDTH_OPTIONS.map((o) => (
+                <ToggleGroupControlOption key={o.value} value={o.value} label={o.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Odkaz', 'brilo-blocks')}>
+            <TextControl
+              label={__('URL', 'brilo-blocks')}
+              value={url.src}
+              onChange={(value) => setAttributes({url: {...url, src: value}})}
+            />
+            <ToggleControl
+              label={__('Otevřít v nové záložce', 'brilo-blocks')}
+              checked={url.blank}
+              onChange={(value) => setAttributes({url: {...url, blank: value}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className="i-button__inner">
+            <RichText
+              tagName="span"
+              className="i-button__label"
+              value={title}
+              onChange={(value) => setAttributes({title: value})}
+              placeholder={__('Text tlačítka...', 'brilo-blocks')}
+              allowedFormats={[]}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/core/basic-button/editor.scss

@@ -0,0 +1,80 @@
+@layer base {
+  .i-button {
+    --background: transparent;
+    --font-color: inherit;
+    --border-color: transparent;
+    --padding-y: 10px;
+    --padding-x: 20px;
+    --font-size: 14px;
+    --font-weight: 600;
+    --border-radius: 4px;
+
+    display: contents;
+
+    &.--variant-primary {
+      --background: #0073aa;
+      --font-color: #fff;
+      --border-color: #0073aa;
+
+      &.--outline {
+        --background: transparent;
+        --font-color: #0073aa;
+        --border-color: #0073aa;
+      }
+    }
+
+    &.--variant-secondary {
+      --background: #5a6e8b;
+      --font-color: #fff;
+      --border-color: #5a6e8b;
+
+      &.--outline {
+        --background: transparent;
+        --font-color: #5a6e8b;
+        --border-color: #5a6e8b;
+      }
+    }
+
+    &.--variant-neutral {
+      --background: #e2e8f0;
+      --font-color: #1a202c;
+      --border-color: transparent;
+
+      &.--outline {
+        --background: transparent;
+        --font-color: #1a202c;
+        --border-color: #1a202c;
+      }
+    }
+
+    &.--variant-ghost {
+      --background: transparent;
+      --font-color: #1a202c;
+      --border-color: transparent;
+    }
+
+    &.--size-sm {
+      --padding-y: 6px;
+      --padding-x: 14px;
+      --font-size: 12px;
+    }
+  }
+
+  .i-button__inner {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--padding-y) var(--padding-x);
+    border-radius: var(--border-radius);
+    background-color: var(--background);
+    color: var(--font-color);
+    border: 1px solid var(--border-color);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .i-button__label {
+    pointer-events: auto;
+  }
+}

package/src/blocks/core/basic-button/factory.tsx

@@ -0,0 +1,54 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
+import {createBasicButtonEdit} from './edit'
+import type {BasicButtonAttributes, BasicButtonOptions} from './types'
+
+export type {BasicButtonAttributes, BasicButtonOptions}
+
+export function createBasicButtonBlock<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  TSizes extends OptionArray = typeof DEFAULT_SIZES,
+  TFullWidthOptions extends OptionArray = typeof DEFAULT_FULL_WIDTH_OPTIONS,
+>(
+  options: BasicButtonOptions<TVariants, TSizes, TFullWidthOptions>,
+): BlockConfiguration<BasicButtonAttributes<TVariants[number]['value'], TSizes[number]['value'], TFullWidthOptions[number]['value']>> {
+  const variants = options.variants ?? DEFAULT_VARIANTS
+  const sizes = options.sizes ?? DEFAULT_SIZES
+  const fullWidthOptions = options.fullWidthOptions ?? DEFAULT_FULL_WIDTH_OPTIONS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Tlačítko', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'common',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'button',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      outline: {type: 'boolean', default: false},
+      fullWidth: {
+        type: 'string',
+        default: fullWidthOptions[0].value,
+        enum: fullWidthOptions.map((o) => o.value),
+      },
+      size: {
+        type: 'string',
+        default: sizes[0].value,
+        enum: sizes.map((s) => s.value),
+      },
+      url: {type: 'object', default: {src: '', blank: false}},
+    },
+    edit: createBasicButtonEdit(options as unknown as BasicButtonOptions),
+    save: () => null,
+  } as unknown as BlockConfiguration<
+    BasicButtonAttributes<TVariants[number]['value'], TSizes[number]['value'], TFullWidthOptions[number]['value']>
+  >
+}

package/src/blocks/core/basic-button/index.ts

@@ -0,0 +1,8 @@
+export type {BasicButtonAttributes, BasicButtonOptions} from './types'
+export {createBasicButtonBlock} from './factory'
+
+import type {BasicButtonOptions} from './types'
+
+export const basicButtonDefaults: BasicButtonOptions = {
+  name: 'brilo/basic-button',
+}

package/src/blocks/core/basic-button/types.ts

@@ -0,0 +1,29 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
+
+export type ButtonVariant = (typeof DEFAULT_VARIANTS)[number]['value']
+export type ButtonSize = (typeof DEFAULT_SIZES)[number]['value']
+export type ButtonFullWidth = (typeof DEFAULT_FULL_WIDTH_OPTIONS)[number]['value']
+
+export interface BasicButtonAttributes<
+  TVariant extends string = ButtonVariant,
+  TSize extends string = ButtonSize,
+  TFullWidth extends string = ButtonFullWidth,
+> extends Record<string, unknown> {
+  title: string
+  variant: TVariant
+  outline: boolean
+  fullWidth: TFullWidth
+  size: TSize
+  url: {src: string; blank: boolean}
+}
+
+export interface BasicButtonOptions<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  TSizes extends OptionArray = typeof DEFAULT_SIZES,
+  TFullWidthOptions extends OptionArray = typeof DEFAULT_FULL_WIDTH_OPTIONS,
+> extends BriloBlockType {
+  variants?: TVariants
+  sizes?: TSizes
+  fullWidthOptions?: TFullWidthOptions
+}

package/src/blocks/core/basic-heading/constants.ts

@@ -0,0 +1 @@
+export {HEADING_LEVELS as DEFAULT_LEVELS, HEADING_STYLES as DEFAULT_STYLES} from '~/constants'

package/src/blocks/core/basic-heading/edit.tsx

@@ -0,0 +1,76 @@
+import {BlockControls, InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  ToolbarButton,
+  ToolbarGroup,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
+import type {BasicHeadingAttributes, BasicHeadingOptions, HeadingStyle} from './types'
+
+export function createBasicHeadingEdit(options: BasicHeadingOptions) {
+  const LEVELS = options.levels ?? DEFAULT_LEVELS
+  const STYLES = options.styles ?? DEFAULT_STYLES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BasicHeadingAttributes
+    setAttributes: (a: Partial<BasicHeadingAttributes>) => void
+  }) {
+    const {title, level, style} = attributes
+    const blockProps = useBlockProps({
+      className: clsx(options.blockClassName ?? 'i-heading', `--heading-style-${style}`),
+    })
+
+    return (
+      <>
+        <BlockControls>
+          <ToolbarGroup>
+            {LEVELS.map((l) => (
+              <ToolbarButton key={l} isActive={level === l} onClick={() => setAttributes({level: l as BasicHeadingAttributes['level']})}>
+                {`H${l}`}
+              </ToolbarButton>
+            ))}
+          </ToolbarGroup>
+        </BlockControls>
+        <InspectorControls>
+          <PanelBody title={__('Nadpis', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Úroveň', 'brilo-blocks')}
+              value={String(level)}
+              onChange={(value) => setAttributes({level: Number(value) as BasicHeadingAttributes['level']})}
+              isBlock
+            >
+              {LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl', 'brilo-blocks')}
+              value={style}
+              onChange={(value) => setAttributes({style: value as HeadingStyle})}
+              isBlock
+            >
+              {STYLES.map((s) => (
+                <ToggleGroupControlOption key={s} value={s} label={s.toUpperCase()} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <RichText
+          {...blockProps}
+          tagName={`h${level}` as 'h1' | 'h2' | 'h3' | 'h4'}
+          value={title}
+          onChange={(value) => setAttributes({title: value})}
+          placeholder={__('Nadpis...', 'brilo-blocks')}
+          allowedFormats={['core/bold', 'core/italic']}
+        />
+      </>
+    )
+  }
+}

package/src/blocks/core/basic-heading/editor.scss

@@ -0,0 +1,8 @@
+@layer base {
+  .i-heading {
+    font-weight: 700;
+    font-size: var(--heading-size, 24px);
+    margin: 0;
+    padding: 4px;
+  }
+}

package/src/blocks/core/basic-heading/factory.tsx

@@ -0,0 +1,40 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {NumberArray, StringArray} from '~/types'
+import {DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
+import {createBasicHeadingEdit} from './edit'
+import type {BasicHeadingAttributes, BasicHeadingOptions} from './types'
+
+export type {BasicHeadingAttributes, BasicHeadingOptions}
+
+export function createBasicHeadingBlock<
+  TLevels extends NumberArray = typeof DEFAULT_LEVELS,
+  TStyles extends StringArray = typeof DEFAULT_STYLES,
+>(options: BasicHeadingOptions<TLevels, TStyles>): BlockConfiguration<BasicHeadingAttributes<TLevels[number], TStyles[number]>> {
+  const levels = options.levels ?? DEFAULT_LEVELS
+  const styles = options.styles ?? DEFAULT_STYLES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Nadpis', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'text',
+    supports: {html: false, customClassName: false},
+    icon: options.icon ?? 'heading',
+    attributes: {
+      title: {type: 'string', default: ''},
+      level: {
+        type: 'number',
+        default: levels[1] ?? levels[0],
+        enum: [...levels],
+      },
+      style: {
+        type: 'string',
+        default: styles[1] ?? styles[0],
+        enum: [...styles],
+      },
+    },
+    edit: createBasicHeadingEdit(options as unknown as BasicHeadingOptions),
+    save: () => null,
+  } as unknown as BlockConfiguration<BasicHeadingAttributes<TLevels[number], TStyles[number]>>
+}

package/src/blocks/core/basic-heading/index.ts

@@ -0,0 +1,8 @@
+export type {BasicHeadingAttributes, BasicHeadingOptions} from './types'
+export {createBasicHeadingBlock} from './factory'
+
+import type {BasicHeadingOptions} from './types'
+
+export const basicHeadingDefaults: BasicHeadingOptions = {
+  name: 'brilo/basic-heading',
+}

package/src/blocks/core/basic-heading/types.ts

@@ -0,0 +1,20 @@
+import type {BriloBlockType, NumberArray, StringArray} from '~/types'
+import type {DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
+
+export type HeadingLevel = (typeof DEFAULT_LEVELS)[number]
+export type HeadingStyle = (typeof DEFAULT_STYLES)[number]
+
+export interface BasicHeadingAttributes<TLevel extends number = HeadingLevel, TStyle extends string = HeadingStyle>
+  extends Record<string, unknown> {
+  title: string
+  level: TLevel
+  style: TStyle
+}
+
+export interface BasicHeadingOptions<
+  TLevels extends NumberArray = typeof DEFAULT_LEVELS,
+  TStyles extends StringArray = typeof DEFAULT_STYLES,
+> extends BriloBlockType {
+  levels?: TLevels
+  styles?: TStyles
+}