@brilo/base-blocks 0.1.43 → 0.1.44

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

@@ -0,0 +1,34 @@
+import type {IconType} from '~/components/IconControl'
+import type {BriloBlockType, Icon} from '~/types'
+import type {DEFAULT_ALIGNMENTS, DEFAULT_ICON_BACKGROUND_SHAPES} from './constants'
+
+export type BasicIconAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
+export type BasicIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value']
+
+export interface BasicIconSizePreset {
+  value: number
+  label: string
+}
+
+export interface BasicIconStyle {
+  align: BasicIconAlignment
+  icon: {
+    size: number
+    color: string
+    background: string
+    backgroundSize: number
+    backgroundShape: BasicIconBackgroundShape
+    borderColor: string
+    borderWidth: number
+  }
+}
+
+export interface BasicIconAttributes extends Record<string, unknown> {
+  icon: Icon
+  style: BasicIconStyle
+}
+
+export interface BasicIconOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}

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

@@ -9,3 +9,21 @@ export const DEFAULT_ICON_VARIANTS = [
   {value: 'info', label: __('Informace', 'brilo-blocks')},
   {value: 'message', label: __('Zpráva', 'brilo-blocks')},
 ] as const
+
+export const DEFAULT_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_SIZE = 24
+export const ICON_SIZE_MIN = 12
+export const ICON_SIZE_MAX = 64
+
+export const DEFAULT_ICON_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: 40, label: __('XL', 'brilo-blocks')},
+] as const

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

@@ -1,12 +1,60 @@
 import {InspectorControls} from '@wordpress/block-editor'
-import {PanelBody, SelectControl} from '@wordpress/components'
+import {
+  BaseControl,
+  Button,
+  ColorPalette,
+  PanelBody,
+  RangeControl,
+  SelectControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
-import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {
+  DEFAULT_ICON_SIZE_PRESETS,
+  DEFAULT_ICON_VARIANTS,
+  DEFAULT_SHADOWS,
+  FAQ_HEADING_LEVELS,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
+} from './constants'
+import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant, FaqShadow, FaqSizePreset} from './types'
+
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly FaqSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`faq-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 createFaqGroupEdit(options: FaqGroupOptions) {
   const ICON_VARIANTS = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+  const ICON_SIZE_PRESETS = options.iconSizePresets ?? DEFAULT_ICON_SIZE_PRESETS
+  const exclude = options.exclude ?? []
 
   return function Edit({
     attributes,
@@ -15,7 +63,8 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
     attributes: FaqGroupAttributes
     setAttributes: (a: Partial<FaqGroupAttributes>) => void
   }) {
-    const {headingLevel, iconVariant} = attributes
+    const {headingLevel, iconVariant, style} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: options.blockClassName ?? 'g-faq wp-block-section',
@@ -44,7 +93,72 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
               options={ICON_VARIANTS.map((v) => ({value: v.value, label: v.label}))}
               onChange={(value) => setAttributes({iconVariant: value as FaqIconVariant})}
             />
+            {!exclude.includes('colors') && style && (
+              <>
+                <PresetSizeControl
+                  label={__('Velikost', 'brilo-blocks')}
+                  value={style.icon.size}
+                  presets={ICON_SIZE_PRESETS}
+                  min={ICON_SIZE_MIN}
+                  max={ICON_SIZE_MAX}
+                  onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v}}})}
+                />
+                <BaseControl label={__('Barva', 'brilo-blocks')} id="faq-group-icon-color">
+                  <ColorPalette
+                    colors={paletteColors}
+                    value={style.icon.color || undefined}
+                    onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, color: value ?? ''}}})}
+                  />
+                </BaseControl>
+                <BaseControl label={__('Pozadí', 'brilo-blocks')} id="faq-group-icon-background-color">
+                  <ColorPalette
+                    colors={paletteColors}
+                    value={style.icon.background || undefined}
+                    onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, background: value ?? ''}}})}
+                  />
+                </BaseControl>
+              </>
+            )}
           </PanelBody>
+          {!exclude.includes('colors') && style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as FaqShadow}})}
+              >
+                {DEFAULT_SHADOWS.map((s) => (
+                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+                ))}
+              </ToggleGroupControl>
+              <BaseControl
+                label={__('Barva okraje', 'brilo-blocks')}
+                help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+                id="faq-group-border-color"
+              >
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.borderColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, borderColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id="faq-group-background-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.backgroundColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, backgroundColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva textu', 'brilo-blocks')} id="faq-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+            </PanelBody>
+          )}
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -2,7 +2,7 @@ import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {OptionArray} from '~/types'
-import {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import {DEFAULT_ICON_SIZE, DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
 import {createFaqGroupEdit} from './edit'
 import type {FaqGroupAttributes, FaqGroupOptions} from './types'
 
@@ -12,6 +12,37 @@ export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof D
   options: FaqGroupOptions<TIconVariants>,
 ): BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>> {
   const iconVariants = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+  const exclude = options.exclude ?? []
+
+  const attributes: Record<string, unknown> = {
+    headingLevel: {
+      type: 'string',
+      default: FAQ_HEADING_LEVELS[1],
+      enum: [...FAQ_HEADING_LEVELS],
+    },
+    iconVariant: {
+      type: 'string',
+      default: iconVariants[1]?.value ?? iconVariants[0].value,
+      enum: iconVariants.map((v) => v.value),
+    },
+  }
+
+  if (!exclude.includes('colors')) {
+    attributes.style = {
+      type: 'object',
+      default: {
+        shadow: DEFAULT_SHADOWS[0].value,
+        borderColor: '',
+        backgroundColor: '',
+        textColor: '',
+        icon: {
+          color: '',
+          background: '',
+          size: DEFAULT_ICON_SIZE,
+        },
+      },
+    }
+  }
 
   return {
     name: options.name,
@@ -21,18 +52,7 @@ export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof D
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? 'editor-help',
     supports: {html: false, customClassName: false},
-    attributes: {
-      headingLevel: {
-        type: 'string',
-        default: FAQ_HEADING_LEVELS[1],
-        enum: [...FAQ_HEADING_LEVELS],
-      },
-      iconVariant: {
-        type: 'string',
-        default: iconVariants[1]?.value ?? iconVariants[0].value,
-        enum: iconVariants.map((v) => v.value),
-      },
-    },
+    attributes,
     edit: createFaqGroupEdit(options as unknown as FaqGroupOptions),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>>

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

@@ -1,4 +1,12 @@
-export type {FaqGroupAttributes, FaqGroupOptions} from './types'
+export type {
+  ExcludableFaqAttr,
+  FaqGroupAttributes,
+  FaqGroupOptions,
+  FaqHeadingLevel,
+  FaqIconVariant,
+  FaqShadow,
+  FaqSizePreset,
+} from './types'
 export {createFaqGroupBlock} from './factory'
 
 import type {FaqGroupOptions} from './types'

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

@@ -1,14 +1,35 @@
 import type {BriloBlockType, OptionArray} from '~/types'
-import type {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import type {DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
 
 export type FaqHeadingLevel = (typeof FAQ_HEADING_LEVELS)[number]
 export type FaqIconVariant = (typeof DEFAULT_ICON_VARIANTS)[number]['value']
+export type FaqShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type ExcludableFaqAttr = 'colors'
+
+export interface FaqSizePreset {
+  value: number
+  label: string
+}
 
 export interface FaqGroupAttributes<TIconVariant extends string = FaqIconVariant> extends Record<string, unknown> {
   headingLevel: FaqHeadingLevel
   iconVariant: TIconVariant
+  style: {
+    shadow: FaqShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+    icon: {
+      color: string
+      background: string
+      size: number
+    }
+  }
 }
 
 export interface FaqGroupOptions<TIconVariants extends OptionArray = typeof DEFAULT_ICON_VARIANTS> extends BriloBlockType {
   iconVariants?: TIconVariants
+  iconSizePresets?: readonly FaqSizePreset[]
+  exclude?: ExcludableFaqAttr[]
 }

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

@@ -13,6 +13,12 @@ export const VARIANTS = [
 
 export const COLUMNS = [2, 3, 4] as const
 
+export const DEFAULT_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
 export const IMAGE_MODES = [
   {value: 'avatar', label: __('Zobrazit', 'brilo-blocks')},
   {value: 'none', label: __('Skrýt', 'brilo-blocks')},

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

@@ -1,6 +1,8 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import type {BlockEditProps} from '@wordpress/blocks'
 import {
+  BaseControl,
+  ColorPalette,
   PanelBody,
   SelectControl,
   ToggleControl,
@@ -10,14 +12,17 @@ import {
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {COLUMNS, VARIANTS} from './constants'
-import type {ReviewColumns, ReviewGroupAttributes, ReviewGroupOptions, ReviewImageMode, Variant} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {COLUMNS, DEFAULT_SHADOWS, VARIANTS} from './constants'
+import type {ReviewColumns, ReviewGroupAttributes, ReviewGroupOptions, ReviewImageMode, ReviewShadow, Variant} from './types'
 
 export function createReviewGroupEdit(options: ReviewGroupOptions) {
   const VARIANTS_OPTIONS = options.variants ?? VARIANTS
+  const exclude = options.exclude ?? []
 
   return function ReviewGroupEdit({attributes, setAttributes}: BlockEditProps<ReviewGroupAttributes>) {
-    const {columns, image, variant} = attributes
+    const {columns, image, variant, style} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(
@@ -62,6 +67,45 @@ export function createReviewGroupEdit(options: ReviewGroupOptions) {
               onChange={(checked) => setAttributes({image: (checked ? 'avatar' : 'none') as ReviewImageMode})}
             />
           </PanelBody>
+          {!exclude.includes('colors') && style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as ReviewShadow}})}
+              >
+                {DEFAULT_SHADOWS.map((s) => (
+                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+                ))}
+              </ToggleGroupControl>
+              <BaseControl
+                label={__('Barva okraje', 'brilo-blocks')}
+                help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+                id="review-group-border-color"
+              >
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.borderColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, borderColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id="review-group-background-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.backgroundColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, backgroundColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva textu', 'brilo-blocks')} id="review-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+            </PanelBody>
+          )}
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -2,7 +2,7 @@ import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {OptionArray} from '~/types'
-import {COLUMNS, VARIANTS} from './constants'
+import {COLUMNS, DEFAULT_SHADOWS, VARIANTS} from './constants'
 import {createReviewGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {ReviewGroupAttributes, ReviewGroupOptions} from './types'
@@ -13,6 +13,35 @@ export function createReviewGroupBlock<TVariants extends OptionArray = typeof VA
   options: ReviewGroupOptions<TVariants>,
 ): BlockConfiguration<ReviewGroupAttributes<TVariants[number]['value']>> {
   const variants = options.variants ?? VARIANTS
+  const exclude = options.exclude ?? []
+
+  const attributes: Record<string, unknown> = {
+    variant: {
+      type: 'string',
+      default: variants[0].value,
+      enum: variants.map((v) => v.value),
+    },
+    columns: {
+      type: 'number',
+      default: COLUMNS[1],
+    },
+    image: {
+      type: 'string',
+      default: 'none',
+    },
+  }
+
+  if (!exclude.includes('colors')) {
+    attributes.style = {
+      type: 'object',
+      default: {
+        shadow: DEFAULT_SHADOWS[0].value,
+        borderColor: '',
+        backgroundColor: '',
+        textColor: '',
+      },
+    }
+  }
 
   return {
     name: options.name,
@@ -22,21 +51,7 @@ export function createReviewGroupBlock<TVariants extends OptionArray = typeof VA
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? {src: defaultIcon},
     supports: {html: false, customClassName: false},
-    attributes: {
-      variant: {
-        type: 'string',
-        default: variants[0].value,
-        enum: variants.map((v) => v.value),
-      },
-      columns: {
-        type: 'number',
-        default: COLUMNS[1],
-      },
-      image: {
-        type: 'string',
-        default: 'none',
-      },
-    },
+    attributes,
     edit: createReviewGroupEdit(options as unknown as ReviewGroupOptions),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<ReviewGroupAttributes<TVariants[number]['value']>>

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

@@ -1,6 +1,15 @@
 import type {ReviewGroupOptions} from './types'
 
-export type {ReviewColumns, ReviewGroupAttributes, ReviewGroupOptions, ReviewImageMode, ReviewVariant, Variant} from './types'
+export type {
+  ExcludableReviewAttr,
+  ReviewColumns,
+  ReviewGroupAttributes,
+  ReviewGroupOptions,
+  ReviewImageMode,
+  ReviewShadow,
+  ReviewVariant,
+  Variant,
+} from './types'
 export {createReviewGroupBlock} from './factory'
 
 export const reviewGroupDefaults: ReviewGroupOptions = {

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

@@ -1,17 +1,27 @@
 import type {BriloBlockType, OptionArray} from '~/types'
-import type {COLUMNS, IMAGE_MODES, VARIANTS} from './constants'
+import type {COLUMNS, DEFAULT_SHADOWS, IMAGE_MODES, VARIANTS} from './constants'
 
 export type Variant = (typeof VARIANTS)[number]['value']
 export type ReviewVariant = Variant
 export type ReviewColumns = (typeof COLUMNS)[number]
 export type ReviewImageMode = (typeof IMAGE_MODES)[number]['value']
+export type ReviewShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type ExcludableReviewAttr = 'colors'
 
 export interface ReviewGroupAttributes<TVariant extends string = Variant> extends Record<string, unknown> {
   variant: TVariant
   columns: ReviewColumns
   image: ReviewImageMode
+  style: {
+    shadow: ReviewShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+  }
 }
 
 export interface ReviewGroupOptions<TVariants extends OptionArray = typeof VARIANTS> extends BriloBlockType {
   variants?: TVariants
+  exclude?: ExcludableReviewAttr[]
 }

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

@@ -19,7 +19,7 @@ function extractYoutubeId(url: string): string | null {
 
 export function createVideoGroupEdit(_options: VideoGroupOptions) {
   return function VideoGroupEdit({attributes, setAttributes}: BlockEditProps<VideoGroupAttributes>) {
-    const {type, url, mediaId, caption, size, poster} = attributes
+    const {type, url, mediaId, caption, size, poster, playButtonTitle} = attributes
 
     const youtubeId = type === 'youtube' ? extractYoutubeId(url) : null
     const youtubeThumbnail = youtubeId ? `https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg` : null
@@ -42,6 +42,13 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
                 <ToggleGroupControlOption key={t.value} value={t.value} label={t.label} />
               ))}
             </ToggleGroupControl>
+
+            <TextControl
+              label={__('Text tlačítka přehrát', 'brilo-blocks')}
+              value={playButtonTitle}
+              onChange={(value) => setAttributes({playButtonTitle: value})}
+              placeholder={__('Přehrát video', 'brilo-blocks')}
+            />
           </PanelBody>
 
           {type === 'youtube' && (

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

@@ -44,6 +44,10 @@ export function createVideoGroupBlock(options: VideoGroupOptions): BlockConfigur
           id: 0,
         },
       },
+      playButtonTitle: {
+        type: 'string',
+        default: __('Přehrát video', 'brilo-blocks'),
+      },
     },
     edit: createVideoGroupEdit(options),
     save: () => null,

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

@@ -16,6 +16,7 @@ export interface VideoGroupAttributes extends Record<string, unknown> {
   caption: string
   size: VideoSize
   poster: VideoPoster
+  playButtonTitle: string
 }
 
 export interface VideoGroupOptions extends BriloBlockType {}

package/src/editor.scss

@@ -10,6 +10,7 @@
 @forward "./blocks/contact/contact-item/editor";
 @forward "./blocks/core/basic-button/editor";
 @forward "./blocks/core/basic-heading/editor";
+@forward "./blocks/core/basic-icon/editor";
 @forward "./blocks/core/basic-overline/editor";
 @forward "./blocks/faq/faq-group/editor";
 @forward "./blocks/faq/faq-item/editor";

package/src/index.ts

@@ -48,6 +48,13 @@ export type {BasicHeadingAttributes, BasicHeadingOptions} from './blocks/core/ba
 export {basicHeadingDefaults, createBasicHeadingBlock} from './blocks/core/basic-heading'
 export type {BasicOverlineAttributes, BasicOverlineOptions} from './blocks/core/basic-overline'
 export {basicOverlineDefaults, createBasicOverlineBlock} from './blocks/core/basic-overline'
+export type {
+  BasicIconAlignment,
+  BasicIconAttributes,
+  BasicIconBackgroundShape,
+  BasicIconOptions,
+} from './blocks/core/basic-icon'
+export {basicIconDefaults, createBasicIconBlock} from './blocks/core/basic-icon'
 export type {HeroItemAttributes, HeroItemOptions} from './blocks/hero/hero-item'
 export {createHeroItemBlock, heroItemDefaults} from './blocks/hero/hero-item'
 export type {HeroGroupAttributes, HeroGroupOptions} from './blocks/hero/hero-group'