@brilo/base-blocks 0.1.43 → 0.1.45

package/src/blocks/gallery/gallery-group/edit.tsx

@@ -9,6 +9,7 @@ import {__} from '@wordpress/i18n'
 import {useDispatch} from '@wordpress/data'
 import {createBlock} from '@wordpress/blocks'
 import clsx from 'clsx'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {DEFAULT_COLUMNS, DEFAULT_RATIOS} from './constants'
 import type {GalleryGroupAttributes, GalleryGroupOptions, GalleryRatio} from './types'
@@ -31,7 +32,7 @@ export function createGalleryGroupEdit(options: GalleryGroupOptions) {
     setAttributes: (a: Partial<GalleryGroupAttributes>) => void
     clientId: string
   }) {
-    const {columns, ratio, galleryId} = attributes
+    const {columns, ratio, galleryId, spacing} = attributes
     const {insertBlock} = useDispatch('core/block-editor')
 
     const addNewBlock = (imageId: number) => {
@@ -69,6 +70,7 @@ export function createGalleryGroupEdit(options: GalleryGroupOptions) {
       containerStyle: {
         '--grid-max-col-count': columns,
         '--gallery-aspect-ratio': ratio.replace(':', '/'),
+        ...itemSpacingStyle(spacing),
       },
       allowedBlocks: options.allowedBlocks,
       renderAppender: CustomAppender,
@@ -107,6 +109,7 @@ export function createGalleryGroupEdit(options: GalleryGroupOptions) {
               help={__('ID pro oddělení/spojení galerií', 'brilo-blocks')}
             />
           </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

package/src/blocks/gallery/gallery-group/factory.tsx

@@ -1,5 +1,6 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
 import {createGalleryGroupEdit} from './edit'
 import {DEFAULT_COLUMNS, DEFAULT_RATIOS} from './constants'
 import type {GalleryGroupAttributes, GalleryGroupOptions} from './types'
@@ -29,6 +30,7 @@ export function createGalleryGroupBlock(options: GalleryGroupOptions): BlockConf
         type: 'string',
         default: 'gallery',
       },
+      ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createGalleryGroupEdit(options),
     save: () => <InnerBlocks.Content />,

package/src/blocks/gallery/gallery-group/types.ts

@@ -9,6 +9,7 @@ export interface GalleryGroupAttributes<TColumn extends number = GalleryColumns,
   columns: TColumn
   ratio: TRatio
   galleryId: string
+  spacing?: number
 }
 
 export interface GalleryGroupOptions<

package/src/blocks/groups/text-and-media-group/index.ts

@@ -11,6 +11,7 @@ export const textAndMediaGroupDefaults: TextAndMediaGroupOptions = {
     'brilo/basic-heading',
     'brilo/basic-overline',
     'brilo/button-group',
+    'brilo/list-group',
     'core/heading',
     'core/list',
     'core/paragraph',

package/src/blocks/list/list-group/constants.ts

@@ -0,0 +1,15 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as DEFAULT_CONTENT_SIZES} from '~/constants'
+
+export const DEFAULT_BULLET_SIZE = 24
+export const BULLET_SIZE_MIN = 8
+export const BULLET_SIZE_MAX = 96
+
+export const DEFAULT_BULLET_SIZE_PRESETS = [
+  {value: 16, label: __('XS', 'brilo-blocks')},
+  {value: 20, label: __('SM', 'brilo-blocks')},
+  {value: 24, label: __('MD', 'brilo-blocks')},
+  {value: 32, label: __('LG', 'brilo-blocks')},
+  {value: 48, label: __('XL', 'brilo-blocks')},
+] as const

package/src/blocks/list/list-group/edit.tsx

@@ -0,0 +1,102 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  Button,
+  RangeControl,
+  BaseControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {BULLET_SIZE_MAX, BULLET_SIZE_MIN, DEFAULT_BULLET_SIZE_PRESETS, DEFAULT_CONTENT_SIZES} from './constants'
+import type {ListBulletSizePreset, ListContentSize, ListGroupAttributes, ListGroupOptions} from './types'
+
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly ListBulletSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`list-group-size-${label}`}>
+      <div style={{display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap'}}>
+        {presets.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={(v) => onChange(v ?? min)} min={min} max={max} step={1} withInputField />
+    </BaseControl>
+  )
+}
+
+export function createListGroupEdit(options: ListGroupOptions) {
+  const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+  const BULLET_SIZE_PRESETS = options.bulletSizePresets ?? DEFAULT_BULLET_SIZE_PRESETS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ListGroupAttributes
+    setAttributes: (a: Partial<ListGroupAttributes>) => void
+  }) {
+    const {content, bullet, spacing} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-list wp-block-section'),
+      containerClassName: options.containerClassName ?? 'g-list__items',
+      containerStyle: {'--bullet-size': `${bullet.size}px`, ...itemSpacingStyle(spacing)},
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost textu', 'brilo-blocks')}
+              value={content.size}
+              onChange={(v) => setAttributes({content: {size: v as ListContentSize}})}
+            >
+              {CONTENT_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Velikost odrážek', 'brilo-blocks')}>
+            <PresetSizeControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={bullet.size}
+              presets={BULLET_SIZE_PRESETS}
+              min={BULLET_SIZE_MIN}
+              max={BULLET_SIZE_MAX}
+              onChange={(v) => setAttributes({bullet: {...bullet, size: v}})}
+            />
+          </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/list/list-group/editor.scss

@@ -0,0 +1,14 @@
+@layer base {
+  .g-list {
+    --bullet-size: 24px;
+
+    padding: 8px;
+    min-height: 40px;
+
+    .g-list__items {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
+}

package/src/blocks/list/list-group/factory.tsx

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
+import type {OptionArray} from '~/types'
+import {DEFAULT_BULLET_SIZE, DEFAULT_CONTENT_SIZES} from './constants'
+import {createListGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {ListGroupAttributes, ListGroupOptions} from './types'
+
+export type {ListGroupAttributes, ListGroupOptions}
+
+export function createListGroupBlock<TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES>(
+  options: ListGroupOptions<TContentSizes>,
+): BlockConfiguration<ListGroupAttributes<TContentSizes[number]['value']>> {
+  const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Seznam s odrážkami', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    providesContext: {'brilo/list-bullet': 'bullet', 'brilo/list-content': 'content'},
+    attributes: {
+      content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
+      bullet: {type: 'object', default: {size: DEFAULT_BULLET_SIZE}},
+      ...ITEM_SPACING_ATTRIBUTE,
+    },
+    edit: createListGroupEdit(options as unknown as ListGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ListGroupAttributes<TContentSizes[number]['value']>>
+}

package/src/blocks/list/list-group/icon.tsx

@@ -0,0 +1,11 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>List Group</title>
+    <circle cx="3.5" cy="5" r="1.5" fill="black" />
+    <circle cx="3.5" cy="10" r="1.5" fill="black" />
+    <circle cx="3.5" cy="15" r="1.5" fill="black" />
+    <path d="M7 4H17V6H7V4Z" fill="black" />
+    <path d="M7 9H17V11H7V9Z" fill="black" />
+    <path d="M7 14H17V16H7V14Z" fill="black" />
+  </svg>
+)

package/src/blocks/list/list-group/index.ts

@@ -0,0 +1,15 @@
+export type {ListContentSize, ListGroupAttributes, ListGroupOptions} from './types'
+export {createListGroupBlock} from './factory'
+
+import type {ListGroupOptions} from './types'
+
+export const listGroupDefaults: ListGroupOptions = {
+  name: 'brilo/list-group',
+  parent: ['brilo/base-section', 'brilo/text-and-media-group', 'brilo/compare-item'],
+  allowedBlocks: ['brilo/list-item'],
+  template: [
+    ['brilo/list-item', {}],
+    ['brilo/list-item', {}],
+    ['brilo/list-item', {}],
+  ],
+}

package/src/blocks/list/list-group/types.ts

@@ -0,0 +1,21 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_CONTENT_SIZES} from './constants'
+
+export type ListContentSize = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
+
+export interface ListBulletSizePreset {
+  value: number
+  label: string
+}
+
+export interface ListGroupAttributes<TContentSize extends string = ListContentSize> extends Record<string, unknown> {
+  content: {size: TContentSize}
+  bullet: {size: number}
+  spacing?: number
+}
+
+export interface ListGroupOptions<TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES> extends BriloBlockType {
+  allowedBlocks: string[]
+  contentSizes?: TContentSizes
+  bulletSizePresets?: readonly ListBulletSizePreset[]
+}

package/src/blocks/list/list-item/buildPreviewStyle.ts

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+
+export interface ListSharedBullet {
+  size?: number
+}
+
+export interface ListSharedContent {
+  size?: string
+}
+
+export interface ListBulletStyle {
+  color?: string
+  background?: string
+  backgroundShape?: string
+  borderColor?: string
+  borderWidth?: number
+}
+
+export interface ListPreviewStyle {
+  rootClassName: string
+  bulletClassName: string
+  cssVars: Record<string, string>
+}
+
+export function buildListPreviewStyle(
+  sharedBullet: ListSharedBullet | undefined,
+  bulletStyle: ListBulletStyle | undefined,
+  sharedContent: ListSharedContent | undefined,
+  resolveHex: (value: string) => string = (value) => value,
+): ListPreviewStyle {
+  const bullet = bulletStyle ?? {}
+
+  const rootClassName = clsx(
+    sharedContent?.size && `--text-${sharedContent.size}`,
+    bullet.background && bullet.background !== 'none' && '--has-bg',
+    bullet.color && bullet.color !== 'none' && '--has-color',
+    bullet.borderColor && '--bordered',
+  )
+
+  const bulletClassName = clsx(bullet.backgroundShape && bullet.backgroundShape !== 'none' && `--shape --shape-${bullet.backgroundShape}`)
+
+  const cssVars: Record<string, string> = {}
+  if (sharedBullet?.size) cssVars['--bullet-size'] = `${sharedBullet.size}px`
+  if (bullet.color && bullet.color !== 'none') cssVars['--bullet-color'] = resolveHex(bullet.color)
+  if (bullet.background && bullet.background !== 'none') cssVars['--bullet-bg'] = resolveHex(bullet.background)
+  if (bullet.borderColor) {
+    cssVars['--bullet-outline-color'] = resolveHex(bullet.borderColor)
+    cssVars['--bullet-outline-width'] = `${bullet.borderWidth || 1}px`
+  }
+
+  return {rootClassName, bulletClassName, cssVars}
+}

package/src/blocks/list/list-item/constants.ts

@@ -0,0 +1,18 @@
+import {__} from '@wordpress/i18n'
+
+export const ICON_TYPES = [
+  {value: 'preselected', label: __('Předvolená', 'brilo-blocks')},
+  {value: 'media', label: __('Obrázek', 'brilo-blocks')},
+  {value: 'number', label: __('Číslo', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_BULLET_SHAPES = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'circle', label: __('Kruh', 'brilo-blocks')},
+  {value: 'triangle', label: __('Trojúhelník', 'brilo-blocks')},
+  {value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks')},
+  {value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks')},
+  {value: 'bevel', label: __('Zkosený', 'brilo-blocks')},
+  {value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks')},
+  {value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,108 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, RangeControl, BaseControl, ColorPalette, SelectControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {buildListPreviewStyle, type ListBulletStyle, type ListSharedBullet, type ListSharedContent} from './buildPreviewStyle'
+import {DEFAULT_BULLET_SHAPES, ICON_TYPES} from './constants'
+import type {ListBulletShape, ListItemAttributes, ListItemOptions} from './types'
+
+export function createListItemEdit(options: ListItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+    context,
+  }: {
+    attributes: ListItemAttributes
+    setAttributes: (a: Partial<ListItemAttributes>) => void
+    context?: {'brilo/list-bullet'?: ListSharedBullet; 'brilo/list-content'?: ListSharedContent}
+  }) {
+    const {text, icon, bulletStyle} = attributes
+    const {paletteColors, resolveHex} = useTenantColorPalette()
+    const {rootClassName, bulletClassName, cssVars} = buildListPreviewStyle(
+      context?.['brilo/list-bullet'],
+      bulletStyle as ListBulletStyle,
+      context?.['brilo/list-content'],
+      resolveHex,
+    )
+
+    const blockProps = useBlockProps({className: clsx('i-list', rootClassName), style: cssVars})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ICON_TYPES} options={options} />
+          </PanelBody>
+          <PanelBody title={__('Vzhled odrážky', 'brilo-blocks')}>
+            <BaseControl label={__('Barva', 'brilo-blocks')} id="list-item-bullet-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={bulletStyle.color || undefined}
+                onChange={(value) => setAttributes({bulletStyle: {...bulletStyle, color: value ?? ''}})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Pozadí', 'brilo-blocks')} id="list-item-bullet-background">
+              <ColorPalette
+                colors={paletteColors}
+                value={bulletStyle.background || undefined}
+                onChange={(value) => setAttributes({bulletStyle: {...bulletStyle, background: value ?? ''}})}
+              />
+            </BaseControl>
+            {(bulletStyle.background || bulletStyle.borderColor) && (
+              <SelectControl<string>
+                label={__('Tvar odrážky', 'brilo-blocks')}
+                value={bulletStyle.backgroundShape}
+                options={[...DEFAULT_BULLET_SHAPES]}
+                onChange={(v) => setAttributes({bulletStyle: {...bulletStyle, backgroundShape: v as ListBulletShape}})}
+              />
+            )}
+            <BaseControl
+              label={__('Barva ohraničení', 'brilo-blocks')}
+              help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+              id="list-item-bullet-border-color"
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={bulletStyle.borderColor || undefined}
+                onChange={(value) => setAttributes({bulletStyle: {...bulletStyle, borderColor: value ?? ''}})}
+              />
+            </BaseControl>
+            {bulletStyle.borderColor && (
+              <RangeControl
+                label={__('Šířka ohraničení (px)', 'brilo-blocks')}
+                value={bulletStyle.borderWidth}
+                onChange={(v) => setAttributes({bulletStyle: {...bulletStyle, borderWidth: v ?? 0}})}
+                min={0}
+                max={10}
+                step={1}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-list__inner wp-block-inner">
+            <ItemIconPreview
+              icon={icon}
+              className="i-list__bullet"
+              modifierClassName={bulletClassName}
+              style={cssVars}
+              setAttributes={setAttributes}
+              options={options}
+            />
+            <RichText
+              tagName="p"
+              className="i-list__text u-text-editable"
+              value={text}
+              onChange={(v) => setAttributes({text: v})}
+              placeholder={__('Text položky…', 'brilo-blocks')}
+              allowedFormats={['core/bold', 'core/italic']}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,108 @@
+.i-list {
+  width: 100%;
+  margin: 0 !important;
+  --bullet-size: 24px;
+
+  .i-list__inner {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: flex-start;
+  }
+
+  &.--text-sm .i-list__text {
+    font-size: 14px;
+  }
+
+  &.--text-lg .i-list__text {
+    font-size: 18px;
+  }
+}
+
+.i-list__text {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.i-list__bullet {
+  --bullet-box-size: var(--bullet-size, 24px);
+
+  width: var(--bullet-box-size);
+  height: var(--bullet-box-size);
+  flex: 0 0 var(--bullet-box-size);
+  display: grid;
+  grid-template-areas: "pile";
+  place-items: center;
+  isolation: isolate;
+
+  &::before,
+  &::after {
+    content: "";
+    grid-area: pile;
+    width: var(--bullet-box-size);
+    height: var(--bullet-box-size);
+    clip-path: var(--bullet-shape, none);
+  }
+
+  &::before {
+    z-index: 0;
+    background-color: var(--bullet-outline-color, transparent);
+  }
+
+  &::after {
+    z-index: 1;
+    width: calc(var(--bullet-box-size) - var(--bullet-outline-width, 0px) * 2);
+    height: calc(var(--bullet-box-size) - var(--bullet-outline-width, 0px) * 2);
+    background-color: var(--bullet-bg, transparent);
+  }
+
+  img,
+  svg,
+  span {
+    grid-area: pile;
+    position: relative;
+    z-index: 2;
+    width: var(--bullet-size, 24px);
+    height: var(--bullet-size, 24px);
+    object-fit: contain;
+  }
+
+  svg path {
+    fill: var(--bullet-color, currentcolor);
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bullet-color, currentcolor);
+  }
+
+  &.--shape-circle {
+    --bullet-shape: circle(50% at 50% 50%);
+  }
+
+  &.--shape-triangle {
+    --bullet-shape: polygon(50% 0%, 0% 100%, 100% 100%);
+  }
+
+  &.--shape-rhombus {
+    --bullet-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  }
+
+  &.--shape-octagon {
+    --bullet-shape: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+  }
+
+  &.--shape-bevel {
+    --bullet-shape: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
+  }
+
+  &.--shape-rabbet {
+    --bullet-shape: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
+  }
+
+  &.--shape-parallelogram {
+    --bullet-shape: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
+  }
+}

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

@@ -0,0 +1,33 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {ICON_TYPES} from './constants'
+import {createListItemEdit} from './edit'
+import type {ListItemAttributes, ListItemOptions} from './types'
+
+export type {ListItemAttributes, ListItemOptions}
+
+export function createListItemBlock(options: ListItemOptions): BlockConfiguration<ListItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Položka seznamu', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'editor-ul',
+    supports: {html: false, customClassName: false},
+    usesContext: ['brilo/list-bullet', 'brilo/list-content'],
+    attributes: {
+      text: {type: 'string', default: ''},
+      icon: {
+        type: 'object',
+        default: {type: ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+      bulletStyle: {
+        type: 'object',
+        default: {color: '', background: '', backgroundShape: 'none', borderColor: '', borderWidth: 1},
+      },
+    },
+    edit: createListItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<ListItemAttributes>
+}

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

@@ -0,0 +1,11 @@
+export type {ListBulletShape, ListItemAttributes, ListItemOptions} from './types'
+export {createListItemBlock} from './factory'
+
+import type {ListItemOptions} from './types'
+
+export const listItemDefaults: ListItemOptions = {
+  name: 'brilo/list-item',
+  parent: ['brilo/list-group'],
+  icons: [],
+  iconsSrc: '',
+}

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

@@ -0,0 +1,23 @@
+import type {BriloBlockType, Icon} from '~/types'
+import type {IconType} from '~/components/IconControl'
+import type {DEFAULT_BULLET_SHAPES, ICON_TYPES} from './constants'
+
+export type ListIconType = (typeof ICON_TYPES)[number]['value']
+export type ListBulletShape = (typeof DEFAULT_BULLET_SHAPES)[number]['value']
+
+export interface ListItemAttributes extends Record<string, unknown> {
+  text: string
+  icon: Icon
+  bulletStyle: {
+    color: string
+    background: string
+    backgroundShape: string
+    borderColor: string
+    borderWidth: number
+  }
+}
+
+export interface ListItemOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}