@brilo/base-blocks 0.1.46 → 0.1.48

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

@@ -1,6 +1,14 @@
-export type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
+export type {
+  ContactColumns,
+  ContactDirection,
+  ContactGroupAttributes,
+  ContactGroupOptions,
+  ContactIconBackgroundShape,
+  ContactShadow,
+  ContactTextAlign,
+} from './types'
 export {createContactGroupBlock} from './factory'
-export {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
+export {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT} from './constants'
 
 import type {ContactGroupOptions} from './types'
 

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

@@ -1,23 +1,65 @@
-import type {BriloBlockType, NumberArray} from '~/types'
-import type {CONTACT_COLUMNS, DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
+import type {BriloBlockType, NumberArray, OptionArray} from '~/types'
+import type {
+  CONTACT_COLUMNS,
+  DEFAULT_DIRECTIONS,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_SHADOWS,
+  TEXT_ALIGNS,
+} from './constants'
 
 export type ContactColumns = (typeof CONTACT_COLUMNS)[number]
 
 export type ContactShadow = (typeof DEFAULT_SHADOWS)[number]['value']
 
+export type ContactDirection = (typeof DEFAULT_DIRECTIONS)[number]['value']
+
 export type ContactTextAlign = (typeof TEXT_ALIGNS)[number]['value']
 
-export interface ContactGroupAttributes<TColumns extends number = ContactColumns> extends Record<string, unknown> {
+export type ContactIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value']
+
+export interface ContactSizePreset {
+  value: number
+  label: string
+}
+
+export interface ContactGroupAttributes<
+  TColumns extends number = ContactColumns,
+  TDirection extends string = ContactDirection,
+  TShadow extends string = ContactShadow,
+  TIconBackgroundShape extends string = ContactIconBackgroundShape,
+> extends Record<string, unknown> {
   columns: TColumns
+  groupBackgroundColor: string
   style: {
-    shadow: ContactShadow
+    shadow: TShadow
+    direction: TDirection
+    textAlign: ContactTextAlign
     borderColor: string
     backgroundColor: string
     textColor: string
-    textAlign: ContactTextAlign
+    icon: {
+      size: number
+      color: string
+      background: string
+      backgroundSize: number
+      backgroundShape: TIconBackgroundShape
+      borderColor: string
+      borderWidth: number
+    }
   }
+  spacing?: number
 }
 
-export interface ContactGroupOptions<TColumns extends NumberArray = typeof CONTACT_COLUMNS> extends BriloBlockType {
+export interface ContactGroupOptions<
+  TColumns extends NumberArray = typeof CONTACT_COLUMNS,
+  TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
+  TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
+  TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES,
+> extends BriloBlockType {
   columns?: TColumns
+  directions?: TDirections
+  shadows?: TShadows
+  iconSizePresets?: readonly ContactSizePreset[]
+  iconBackgroundSizePresets?: readonly ContactSizePreset[]
+  iconBackgroundShapes?: TIconBackgroundShapes
 }

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

@@ -0,0 +1,69 @@
+import clsx from 'clsx'
+
+export interface ContactSharedStyle {
+  direction?: string
+  textAlign?: string
+  shadow?: string
+  borderColor?: string
+  backgroundColor?: string
+  textColor?: string
+  icon?: {
+    size?: number
+    color?: string
+    background?: string
+    backgroundSize?: number
+    backgroundShape?: string
+    borderColor?: string
+    borderWidth?: number
+  }
+}
+
+export interface ContactPreviewStyle {
+  rootClassName: string
+  iconClassName: string
+  cssVars: Record<string, string>
+}
+
+export function buildContactPreviewStyle(
+  shared?: ContactSharedStyle,
+  resolveHex: (value: string) => string = (value) => value,
+): ContactPreviewStyle {
+  if (!shared) {
+    return {rootClassName: '', iconClassName: '', cssVars: {}}
+  }
+
+  const icon = shared.icon ?? {}
+
+  const rootClassName = clsx(
+    shared.direction && `--direction-${shared.direction}`,
+    shared.textAlign && `--align-${shared.textAlign}`,
+    shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`,
+    icon.background && icon.background !== 'none' && '--icon-background',
+    icon.color && icon.color !== 'none' && '--icon-color',
+    icon.borderColor && '--icon-bordered',
+    shared.backgroundColor && '--background-color',
+    shared.borderColor && '--border',
+    shared.textColor && '--text-color',
+  )
+
+  const iconClassName = clsx(
+    icon.backgroundShape && icon.backgroundShape !== 'none' && `--background-shape --background-shape-${icon.backgroundShape}`,
+  )
+
+  const cssVars: Record<string, string> = {}
+  if (shared.borderColor) cssVars['--border-color'] = resolveHex(shared.borderColor)
+  if (shared.backgroundColor) cssVars['--background-color'] = resolveHex(shared.backgroundColor)
+  if (shared.textColor) cssVars['--text-color'] = resolveHex(shared.textColor)
+  if (icon.background && icon.background !== 'none') cssVars['--icon-background-color'] = resolveHex(icon.background)
+  if (icon.color && icon.color !== 'none') cssVars['--icon-color'] = resolveHex(icon.color)
+  if (icon.size) cssVars['--icon-size'] = `${icon.size}px`
+  if (icon.background && icon.background !== 'none' && icon.backgroundSize) {
+    cssVars['--icon-background-size'] = `${icon.backgroundSize}px`
+  }
+  if (icon.borderColor) {
+    cssVars['--icon-outline-color'] = resolveHex(icon.borderColor)
+    cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`
+  }
+
+  return {rootClassName, iconClassName, cssVars}
+}

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

@@ -1,7 +1,6 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
   PanelBody,
-  RangeControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
@@ -10,9 +9,11 @@ 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'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT} from '../contact-group/constants'
+import {buildContactPreviewStyle, type ContactSharedStyle} from './buildPreviewStyle'
+import {CONTACT_ICON_TYPES} from './constants'
+import type {ContactItemAttributes, ContactItemOptions} from './types'
 
 export function createContactItemEdit(options: ContactItemOptions) {
   const iconOptions = {icons: options.icons ?? [], iconsSrc: options.iconsSrc ?? ''}
@@ -26,16 +27,18 @@ export function createContactItemEdit(options: ContactItemOptions) {
     setAttributes: (a: Partial<ContactItemAttributes>) => void
     context: Record<string, unknown>
   }) {
-    const {colSpan, icon, iconSize} = attributes
+    const {colSpan, icon} = 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 {resolveHex} = useTenantColorPalette()
+    const {rootClassName, iconClassName, cssVars} = buildContactPreviewStyle(
+      context[CONTACT_STYLE_CONTEXT] as ContactSharedStyle | undefined,
+      resolveHex,
+    )
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(options.blockClassName ?? 'i-contact'),
+      blockClassName: clsx(options.blockClassName ?? 'i-contact', rootClassName),
       containerClassName: [options.containerClassName ?? 'i-contact__inner'],
       allowedBlocks: options.allowedBlocks,
       template: options.template,
@@ -60,29 +63,13 @@ export function createContactItemEdit(options: ContactItemOptions) {
           </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}>
+        <div
+          {...blockProps}
+          style={{...(blockProps.style as CSSProperties), ...cssVars, '--col-span': span} as CSSProperties}
+        >
+          <div className={clsx('i-contact__icon-wrap', iconClassName)}>
             <ItemIconPreview icon={icon} className="i-contact__icon" setAttributes={setAttributes} options={iconOptions} />
           </div>
           <div {...innerBlocksProps} />

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

@@ -9,18 +9,67 @@
 }
 
 .i-contact {
+  --icon-background-size: 0px;
+
   grid-column: span var(--col-span, 1);
   margin-inline: 0;
   width: 100%;
   box-sizing: border-box;
-  border: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   padding: 8px;
+  border-radius: 4px;
+  align-items: var(--align-items, flex-start);
+  text-align: var(--text-align, left);
+
+  &.--direction-horizontal {
+    flex-direction: row;
+  }
+
+  &.--align-left {
+    --align-items: flex-start;
+    --text-align: left;
+  }
+
+  &.--align-center {
+    --align-items: center;
+    --text-align: center;
+  }
+
+  // Background size only reserves space when a background or outline is actually selected.
+  &.--icon-background,
+  &.--icon-bordered {
+    --icon-background-size: 88px;
+  }
+
+  &.--shadow {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  &.--shadow-md {
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
+  }
+
+  &.--border {
+    border: 1px solid var(--border-color, transparent);
+  }
+
+  &.--background-color {
+    background-color: var(--background-color, transparent);
+  }
+
+  &.--text-color {
+    color: var(--text-color);
+  }
 
   .i-contact__inner {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    width: 100%;
+    flex: 1;
+    min-width: 0;
+    text-align: inherit;
 
     p,
     h3,
@@ -29,14 +78,94 @@
       margin-block: 4px;
     }
   }
+}
+
+.i-contact__icon-wrap {
+  --icon-box-size: max(var(--icon-background-size, 0px), var(--icon-size, 88px));
+
+  width: var(--icon-box-size);
+  height: var(--icon-box-size);
+  flex: 0 0 var(--icon-box-size);
+  display: grid;
+  grid-template-areas: "pile";
+  place-items: center;
+  isolation: isolate;
+
+  &::before,
+  &::after {
+    content: "";
+    grid-area: pile;
+    width: var(--icon-background-size, 0px);
+    height: var(--icon-background-size, 0px);
+    border-radius: inherit;
+    clip-path: var(--icon-background-shape, none);
+  }
 
-  .i-contact__icon-wrap {
-    --icon-size: 32px;
+  &::before {
+    z-index: 0;
+    background-color: var(--icon-outline-color, transparent);
   }
 
-  .i-contact__icon img {
-    width: var(--icon-size);
-    height: var(--icon-size);
+  &::after {
+    z-index: 1;
+    width: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
+    height: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
+    background-color: var(--icon-background-color, transparent);
+  }
+
+  .i-contact__icon,
+  img,
+  svg {
+    grid-area: pile;
+    position: relative;
+    z-index: 2;
+    width: var(--icon-size, 88px);
+    height: var(--icon-size, 88px);
     object-fit: contain;
   }
+
+  svg path {
+    fill: var(--icon-color, currentcolor);
+  }
+
+  &.--background-shape-circle {
+    --icon-background-shape: circle(50% at 50% 50%);
+  }
+
+  &.--background-shape-triangle {
+    --icon-background-shape: polygon(50% 0%, 0% 100%, 100% 100%);
+  }
+
+  &.--background-shape-rhombus {
+    --icon-background-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  }
+
+  &.--background-shape-octagon {
+    --icon-background-shape: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+  }
+
+  &.--background-shape-bevel {
+    --icon-background-shape: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
+  }
+
+  &.--background-shape-rabbet {
+    --icon-background-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%
+    );
+  }
+
+  &.--background-shape-parallelogram {
+    --icon-background-shape: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
+  }
 }

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

@@ -3,7 +3,7 @@ import type {BlockConfiguration, BlockEditProps} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {Icon} from '~/types'
 import type {IconType} from '~/components/IconControl/IconControl'
-import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
+import {CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT} from '../contact-group/constants'
 import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_TYPES} from './constants'
 import type {ContactItemAttributes, ContactItemOptions} from './types'
 
@@ -24,7 +24,7 @@ export function createContactItemBlock<T extends ContactItemAttributes = Contact
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? 'id-alt',
     supports: {html: false, customClassName: false},
-    usesContext: [CONTACT_COLUMNS_CONTEXT],
+    usesContext: [CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT],
     attributes: {
       ...(options.attributes as any),
       colSpan: {type: 'number', default: 1},

package/src/blocks/sections/base-section/constants.ts

@@ -87,3 +87,5 @@ export const BACKGROUND_IMAGE_POSITIONS = [
 ] as const
 
 export const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40
+
+export const BACKGROUND_IMAGE_OPACITY_DEFAULT = 100

package/src/blocks/sections/base-section/controls.tsx

@@ -33,6 +33,7 @@ import type {
 } from './types'
 import {
   BACKGROUND_IMAGE_FITS,
+  BACKGROUND_IMAGE_OPACITY_DEFAULT,
   BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT,
   BACKGROUND_IMAGE_POSITIONS,
   BACKGROUND_IMAGE_REPEATS,
@@ -295,6 +296,7 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
   const repeat = value?.repeat ?? 'no-repeat'
   const overlayColor = value?.overlay?.color
   const overlayOpacity = value?.overlay?.opacity ?? BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT
+  const opacity = value?.opacity ?? BACKGROUND_IMAGE_OPACITY_DEFAULT
 
   const update = (patch: Partial<BackgroundImage>) =>
     onChange(mergeUpdate({img, fit, position, repeat, overlay: value?.overlay}, value, patch))
@@ -365,6 +367,14 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
             onChange={(next) => update({repeat: next as BackgroundImageRepeat})}
           />
 
+          <RangeControl
+            label={__('Průhlednost obrázku', 'brilo-blocks')}
+            value={opacity}
+            min={0}
+            max={100}
+            onChange={(next) => update({opacity: next ?? BACKGROUND_IMAGE_OPACITY_DEFAULT})}
+          />
+
           <BaseControl
             label={__('Překryv barvou', 'brilo-blocks')}
             help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}

package/src/blocks/sections/base-section/edit.tsx

@@ -3,7 +3,7 @@ import type {BlockEditProps} from '@wordpress/blocks'
 import type {CSSProperties} from 'react'
 import type {BaseBlockAttributes, BaseSectionOptions} from './types'
 import {BaseControls} from './controls'
-import {BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT} from './constants'
+import {BACKGROUND_IMAGE_OPACITY_DEFAULT, BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT} from './constants'
 
 export function createBaseSectionEdit<TExtra extends Record<string, unknown> = Record<string, never>>(options: BaseSectionOptions<TExtra>) {
   const EXCLUDE = options.exclude ?? []
@@ -12,9 +12,9 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
     const {attributes, setAttributes} = props
     const {background, textColor, gradient, backgroundImage} = attributes as BaseBlockAttributes & {gradient?: string}
     const bgImageSrc = backgroundImage?.img?.src
-    // A plain background-color/gradient always paints behind an image, so it can never tint it. To preview a
-    // translucent color/gradient sitting on top of the image (matching frontend), stack it as its own layer
-    // in front of the `url(...)` layer instead of setting backgroundColor separately.
+    // A plain background-color/gradient always paints behind an image, so it can never tint it.
+    // To preview it sitting on top of the image (matching frontend), it renders as its own
+    // absolutely-positioned layer, separate from the image layer below it and the content above.
     const tintLayer = background ? `linear-gradient(${background}, ${background})` : gradient
     const blockProps = useBlockProps({
       className: options.blockClassName,
@@ -23,26 +23,26 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
         ...(background && !bgImageSrc ? {backgroundColor: background, padding: '16px'} : {}),
         ...(gradient && !bgImageSrc ? {background: gradient, padding: '16px'} : {}),
         ...(textColor ? {color: textColor} : {}),
-        ...(bgImageSrc
-          ? {
-              backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
-              backgroundSize: [
-                tintLayer ? '100% 100%' : null,
-                backgroundImage?.fit === 'custom'
-                  ? (backgroundImage?.sizeValue ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT)
-                  : (backgroundImage?.fit ?? 'cover'),
-              ]
-                .filter(Boolean)
-                .join(', '),
-              backgroundPosition: [tintLayer ? 'center center' : null, backgroundImage?.position ?? 'center center']
-                .filter(Boolean)
-                .join(', '),
-              backgroundRepeat: [tintLayer ? 'no-repeat' : null, backgroundImage?.repeat ?? 'no-repeat'].filter(Boolean).join(', '),
-              padding: '16px',
-            }
-          : {}),
+        ...(bgImageSrc ? {padding: '16px'} : {}),
       },
     })
+    // Opacity applies to the image alone — it must live on its own layer, not on blockProps,
+    // or it would fade the section's inner content (headings, buttons, ...) along with it.
+    const bgImageLayerStyle: CSSProperties = bgImageSrc
+      ? {
+          position: 'absolute',
+          inset: 0,
+          backgroundImage: `url(${bgImageSrc})`,
+          backgroundSize:
+            backgroundImage?.fit === 'custom'
+              ? (backgroundImage?.sizeValue ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT)
+              : (backgroundImage?.fit ?? 'cover'),
+          backgroundPosition: backgroundImage?.position ?? 'center center',
+          backgroundRepeat: backgroundImage?.repeat ?? 'no-repeat',
+          opacity: (backgroundImage?.opacity ?? BACKGROUND_IMAGE_OPACITY_DEFAULT) / 100,
+        }
+      : {}
+    const tintLayerStyle: CSSProperties = tintLayer ? {position: 'absolute', inset: 0, background: tintLayer} : {}
     const innerBlocksProps = useInnerBlocksProps({className: options.containerClassName}, {
       allowedBlocks: options.allowedBlocks,
       orientation: 'vertical',
@@ -60,6 +60,8 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
           {options.extraControls?.(props)}
         </InspectorControls>
         <div {...blockProps}>
+          {!!bgImageSrc && <div style={bgImageLayerStyle} />}
+          {!!bgImageSrc && !!tintLayer && <div style={tintLayerStyle} />}
           <div {...innerBlocksProps} />
         </div>
       </>

package/src/blocks/sections/base-section/types.ts

@@ -67,6 +67,7 @@ export interface BackgroundImage {
   position?: BackgroundImagePosition
   repeat?: BackgroundImageRepeat
   overlay?: BackgroundImageOverlay
+  opacity?: number
 }
 
 export interface Border {

package/src/index.ts

@@ -11,12 +11,17 @@ export {
 } from './blocks/anchor/anchor-item'
 export type {
   ContactColumns,
+  ContactDirection,
   ContactGroupAttributes,
   ContactGroupOptions,
+  ContactIconBackgroundShape,
+  ContactShadow,
+  ContactTextAlign,
 } from './blocks/contact/contact-group'
 export {
   CONTACT_COLUMNS,
   CONTACT_COLUMNS_CONTEXT,
+  CONTACT_STYLE_CONTEXT,
   contactGroupDefaults,
   createContactGroupBlock,
 } from './blocks/contact/contact-group'