@brilo/base-blocks 0.1.16 → 0.1.18

package/build/components/ItemIconControl/ItemIconPreview.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useState } from '@wordpress/element';
 import { useMediaUrl } from '../../components/ImagePicker';
 import { ItemIconModal } from './ItemIconModal';
-export function ItemIconPreview({ icon, className, options, setAttributes }) {
+export function ItemIconPreview({ icon, className, modifierClassName, style, options, setAttributes }) {
     var _a;
     var _b;
     const [isModalOpen, setModalOpen] = useState(false);
@@ -13,19 +13,19 @@ export function ItemIconPreview({ icon, className, options, setAttributes }) {
         var _a;
         if (icon.type === 'preselected') {
             if (preselectedIconUrl) {
-                return (_jsx("div", { className: clsx('i-item-icon', className), children: _jsx("img", { src: preselectedIconUrl, alt: "", className: clsx(className ? `${className}-img` : 'i-item-icon__img'), width: 40, height: 40 }) }));
+                return (_jsx("div", { className: clsx('i-item-icon', className, modifierClassName), style: style, children: _jsx("img", { src: preselectedIconUrl, alt: "", className: clsx(className ? `${className}-img` : 'i-item-icon__img'), width: 40, height: 40 }) }));
             }
             return (_jsx("button", { type: "button", className: clsx('i-item-icon', className ? `${className}-placeholder` : null, 'i-item-icon__placeholder', !isModalOpen && '--clickable'), onClick: () => setModalOpen(true), children: _jsx("span", { children: "\u2606" }) }));
         }
         if (icon.type === 'media') {
             if (((_a = icon.media) === null || _a === void 0 ? void 0 : _a.id) && mediaIconUrl) {
-                return (_jsx("div", { className: clsx('i-item-icon', className), children: _jsx("img", { src: mediaIconUrl, alt: icon.media.alt, className: clsx(className ? `${className}-img` : null, 'i-item-icon__img') }) }));
+                return (_jsx("div", { className: clsx('i-item-icon', className, modifierClassName), style: style, children: _jsx("img", { src: mediaIconUrl, alt: icon.media.alt, className: clsx(className ? `${className}-img` : null, 'i-item-icon__img') }) }));
             }
             return (_jsx("div", { className: clsx('i-item-icon', className ? `${className}-placeholder` : 'i-item-icon__placeholder'), children: _jsx("span", { children: "\u2606" }) }));
         }
         if (icon.type === 'number') {
             if (icon.src) {
-                return (_jsx("div", { className: clsx('i-item-icon', className), children: _jsx("span", { className: clsx(className ? `${className}-number` : 'i-item-icon__number'), children: icon.src }) }));
+                return (_jsx("div", { className: clsx('i-item-icon', className, modifierClassName), style: style, children: _jsx("span", { className: clsx(className ? `${className}-number` : 'i-item-icon__number'), children: icon.src }) }));
             }
             return (_jsx("div", { className: clsx('i-item-icon', className ? `${className}-placeholder` : 'i-item-icon__placeholder'), children: _jsx("span", { children: "\u2606" }) }));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",

package/src/blocks/groups/text-and-media-group/editor.scss

@@ -82,6 +82,12 @@
   .g-text-and-media__inner-blocks {
     margin-top: 8px;
     min-height: 40px;
+
+    p,
+    ul,
+    ol {
+      margin-block: 8px;
+    }
   }
 
   .g-text-and-media__chip {
@@ -121,3 +127,11 @@
     }
   }
 }
+
+.g-text-and-media__inner-blocks {
+  p,
+  ul,
+  ol {
+    margin-block: 8px;
+  }
+}

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

@@ -6,5 +6,5 @@ import type {SignpostItemOptions} from './types'
 export const signpostItemDefaults: SignpostItemOptions = {
   name: 'brilo/signpost-item',
   parent: ['brilo/signpost-group'],
-  allowedBlocks: ['core/paragraph', 'core/list', 'core/heading'],
+  allowedBlocks: ['core/heading', 'core/paragraph', 'core/list', 'core/group', 'brilo/link-item'],
 }

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

@@ -25,27 +25,39 @@ export const DEFAULT_SHADOWS = [
   {value: 'md', label: __('Střední', 'brilo-blocks')},
 ] as const
 
-export const DEFAULT_ICON_SIZES = [
-  {value: 'xs', label: __('Extra Malá', 'brilo-blocks'), description: __('48px', 'brilo-blocks')},
-  {value: 'sm', label: __('Malá', 'brilo-blocks'), description: __('64px', 'brilo-blocks')},
-  {value: 'default', label: __('Výchozí', 'brilo-blocks'), description: __('88px', 'brilo-blocks')},
-  {value: 'lg', label: __('Velká', 'brilo-blocks'), description: __('104px', 'brilo-blocks')},
-  {value: 'xl', label: __('Extra Velká', 'brilo-blocks'), description: __('128px', 'brilo-blocks')},
+export const DEFAULT_ICON_SIZE = 88
+export const ICON_SIZE_MIN = 4
+export const ICON_SIZE_MAX = 128
+
+export const DEFAULT_ICON_SIZE_PRESETS = [
+  {value: 8, label: __('XS', 'brilo-blocks')},
+  {value: 16, label: __('SM', 'brilo-blocks')},
+  {value: 24, label: __('MD', 'brilo-blocks')},
+  {value: 32, label: __('LG', 'brilo-blocks')},
+  {value: 48, label: __('XL', 'brilo-blocks')},
 ] as const
 
-export const DEFAULT_ICON_COLORS = [
-  {value: 'none', label: __('Žádná', 'brilo-blocks')},
-  {value: 'primary', label: __('Primární', 'brilo-blocks')},
-  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
-  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
-  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
+export const DEFAULT_ICON_BACKGROUND_SIZE = 88
+export const ICON_BACKGROUND_SIZE_MIN = 16
+export const ICON_BACKGROUND_SIZE_MAX = 240
+
+export const DEFAULT_ICON_BACKGROUND_SIZE_PRESETS = [
+  {value: 48, label: __('XS', 'brilo-blocks')},
+  {value: 64, label: __('SM', 'brilo-blocks')},
+  {value: 88, label: __('Výchozí', 'brilo-blocks')},
+  {value: 104, label: __('LG', 'brilo-blocks')},
+  {value: 128, label: __('XL', 'brilo-blocks')},
 ] as const
 
-export const DEFAULT_ICON_BACKGROUNDS = [
-  {value: 'none', label: __('Žádné', 'brilo-blocks')},
-  {value: 'primary', label: __('Primární', 'brilo-blocks')},
-  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
-  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+export const DEFAULT_ICON_BACKGROUND_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
 
 export const DEFAULT_ALIGNMENTS = [

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

@@ -1,10 +1,11 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
   PanelBody,
-  SelectControl,
-  ToggleControl,
+  Button,
+  RangeControl,
   BaseControl,
   ColorPalette,
+  SelectControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
@@ -18,11 +19,15 @@ import {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_DIRECTIONS,
   DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE_PRESETS,
+  DEFAULT_ICON_SIZE_PRESETS,
   DEFAULT_SHADOWS,
   HEADING_LEVELS,
+  ICON_BACKGROUND_SIZE_MAX,
+  ICON_BACKGROUND_SIZE_MIN,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
 } from './constants'
 import type {
   UspAlignment,
@@ -32,20 +37,48 @@ import type {
   UspGroupOptions,
   UspHeadingLevel,
   UspHeadingStyle,
-  UspIconBackground,
-  UspIconColor,
-  UspIconSize,
+  UspIconBackgroundShape,
+  UspSizePreset,
   UspShadow,
 } from './types'
 
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly UspSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`usp-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 createUspGroupEdit(options: UspGroupOptions) {
   const COLUMNS = options.columns ?? DEFAULT_COLUMNS
   const DIRECTIONS = options.directions ?? DEFAULT_DIRECTIONS
   const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
   const SHADOWS = options.shadows ?? DEFAULT_SHADOWS
-  const ICON_SIZES = options.iconSizes ?? DEFAULT_ICON_SIZES
-  const ICON_COLORS = options.iconColors ?? DEFAULT_ICON_COLORS
-  const ICON_BACKGROUND = options.iconBackgrounds ?? DEFAULT_ICON_BACKGROUNDS
+  const ICON_SIZE_PRESETS = options.iconSizePresets ?? DEFAULT_ICON_SIZE_PRESETS
+  const ICON_BACKGROUND_SIZE_PRESETS = options.iconBackgroundSizePresets ?? DEFAULT_ICON_BACKGROUND_SIZE_PRESETS
+  const ICON_BACKGROUND_SHAPES = options.iconBackgroundShapes ?? DEFAULT_ICON_BACKGROUND_SHAPES
   const ALIGNMENTS = options.alignments ?? DEFAULT_ALIGNMENTS
   const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
 
@@ -110,6 +143,18 @@ export function createUspGroupEdit(options: UspGroupOptions) {
                 ))}
               </ToggleGroupControl>
             )}
+            {style.direction === 'vertical' && (
+              <ToggleGroupControl
+                isBlock
+                label={__('Zarovnání textu', 'brilo-blocks')}
+                value={style.textAlign}
+                onChange={(v) => setAttributes({style: {...style, textAlign: (v as string) ?? ''}})}
+              >
+                {ALIGNMENTS.map((a) => (
+                  <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+                ))}
+              </ToggleGroupControl>
+            )}
             <ToggleGroupControl
               isBlock
               label={__('Úroveň nadpisu položek', 'brilo-blocks')}
@@ -180,33 +225,63 @@ export function createUspGroupEdit(options: UspGroupOptions) {
             </BaseControl>
           </PanelBody>
           <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
-            <ToggleGroupControl
-              isBlock
+            <PresetSizeControl
               label={__('Velikost', 'brilo-blocks')}
               value={style.icon.size}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v as UspIconSize}}})}
-            >
-              {ICON_SIZES.map((s) => (
-                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} aria-label={s.description} showTooltip />
-              ))}
-            </ToggleGroupControl>
-            <SelectControl<string>
-              label={__('Barva', 'brilo-blocks')}
-              value={style.icon.color}
-              options={[...ICON_COLORS]}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, color: v as UspIconColor}}})}
+              presets={ICON_SIZE_PRESETS}
+              min={ICON_SIZE_MIN}
+              max={ICON_SIZE_MAX}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v}}})}
             />
-            <SelectControl<string>
-              label={__('Pozadí', 'brilo-blocks')}
-              value={style.icon.background}
-              options={[...ICON_BACKGROUND]}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, background: v as UspIconBackground}}})}
+            <BaseControl label={__('Barva', 'brilo-blocks')} id="usp-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="usp-group-icon-background-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.background || undefined}
+                onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, background: value ?? ''}}})}
+              />
+            </BaseControl>
+            <PresetSizeControl
+              label={__('Velikost pozadí', 'brilo-blocks')}
+              value={style.icon.backgroundSize}
+              presets={ICON_BACKGROUND_SIZE_PRESETS}
+              min={ICON_BACKGROUND_SIZE_MIN}
+              max={ICON_BACKGROUND_SIZE_MAX}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, backgroundSize: v}}})}
             />
-            {style.icon.background !== 'none' && (
-              <ToggleControl
-                label={__('Ohraničení ikony', 'brilo-blocks')}
-                checked={style.icon.bordered ?? false}
-                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, bordered: v}}})}
+            {style.icon.background && (
+              <SelectControl<string>
+                label={__('Tvar pozadí', 'brilo-blocks')}
+                value={style.icon.backgroundShape}
+                options={[...ICON_BACKGROUND_SHAPES]}
+                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, backgroundShape: v as UspIconBackgroundShape}}})}
+              />
+            )}
+            <BaseControl
+              label={__('Barva ohraničení', 'brilo-blocks')}
+              help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+              id="usp-group-icon-border-color"
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.borderColor || undefined}
+                onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, borderColor: value ?? ''}}})}
+              />
+            </BaseControl>
+            {style.icon.borderColor && (
+              <RangeControl
+                label={__('Šířka ohraničení (px)', 'brilo-blocks')}
+                value={style.icon.borderWidth}
+                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, borderWidth: v ?? 0}}})}
+                min={0}
+                max={10}
+                step={1}
               />
             )}
           </PanelBody>

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

@@ -8,9 +8,9 @@ import {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_DIRECTIONS,
   DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE,
+  DEFAULT_ICON_SIZE,
   DEFAULT_SHADOWS,
   HEADING_LEVELS,
 } from './constants'
@@ -25,32 +25,18 @@ export function createUspGroupBlock<
   TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
   THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
   TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
-  TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES,
-  TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS,
-  TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS,
+  TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES,
   TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
   TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
 >(
-  options: UspGroupOptions<
-    TColumns,
-    TDirections,
-    THeadingStyles,
-    TShadows,
-    TIconSizes,
-    TIconColors,
-    TIconBackgrounds,
-    TAlignments,
-    TContentSizes
-  >,
+  options: UspGroupOptions<TColumns, TDirections, THeadingStyles, TShadows, TIconBackgroundShapes, TAlignments, TContentSizes>,
 ): BlockConfiguration<
   UspGroupAttributes<
     TColumns[number],
     TDirections[number]['value'],
     THeadingStyles[number]['value'],
     TShadows[number]['value'],
-    TIconSizes[number]['value'],
-    TIconColors[number]['value'],
-    TIconBackgrounds[number]['value'],
+    TIconBackgroundShapes[number]['value'],
     TAlignments[number]['value'],
     TContentSizes[number]['value']
   >
@@ -59,9 +45,7 @@ export function createUspGroupBlock<
   const directions = options.directions ?? DEFAULT_DIRECTIONS
   const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
   const shadows = options.shadows ?? DEFAULT_SHADOWS
-  const iconSizes = options.iconSizes ?? DEFAULT_ICON_SIZES
-  const iconColors = options.iconColors ?? DEFAULT_ICON_COLORS
-  const iconBackgrounds = options.iconBackgrounds ?? DEFAULT_ICON_BACKGROUNDS
+  const iconBackgroundShapes = options.iconBackgroundShapes ?? DEFAULT_ICON_BACKGROUND_SHAPES
   const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
   const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
 
@@ -73,6 +57,7 @@ export function createUspGroupBlock<
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? {src: defaultIcon},
     supports: {html: false, customClassName: false},
+    providesContext: {'brilo/usp-style': 'style'},
     attributes: {
       columns: {
         type: 'number',
@@ -91,10 +76,19 @@ export function createUspGroupBlock<
           card: false,
           direction: directions[0].value,
           align: alignments[0].value,
+          textAlign: '',
           borderColor: '',
           backgroundColor: '',
           textColor: '',
-          icon: {size: iconSizes[2]?.value ?? iconSizes[0].value, color: iconColors[0].value, background: iconBackgrounds[0].value},
+          icon: {
+            size: DEFAULT_ICON_SIZE,
+            color: '',
+            background: '',
+            backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+            backgroundShape: iconBackgroundShapes[0].value,
+            borderColor: '',
+            borderWidth: 1,
+          },
         },
       },
     },
@@ -106,9 +100,7 @@ export function createUspGroupBlock<
       TDirections[number]['value'],
       THeadingStyles[number]['value'],
       TShadows[number]['value'],
-      TIconSizes[number]['value'],
-      TIconColors[number]['value'],
-      TIconBackgrounds[number]['value'],
+      TIconBackgroundShapes[number]['value'],
       TAlignments[number]['value'],
       TContentSizes[number]['value']
     >

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

@@ -5,9 +5,7 @@ import type {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_DIRECTIONS,
   DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
   DEFAULT_SHADOWS,
   HEADING_LEVELS,
 } from './constants'
@@ -18,19 +16,20 @@ export type UspHeadingLevel = (typeof HEADING_LEVELS)[number]
 export type UspHeadingStyle = (typeof DEFAULT_HEADING_STYLES)[number]['value']
 export type UspShadow = (typeof DEFAULT_SHADOWS)[number]['value']
 export type UspAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
-export type UspIconSize = (typeof DEFAULT_ICON_SIZES)[number]['value']
-export type UspIconColor = (typeof DEFAULT_ICON_COLORS)[number]['value']
-export type UspIconBackground = (typeof DEFAULT_ICON_BACKGROUNDS)[number]['value']
 export type UspContentSize = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
+export type UspIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value']
+
+export interface UspSizePreset {
+  value: number
+  label: string
+}
 
 export interface UspGroupAttributes<
   TColumn extends number = UspColumns,
   TDirection extends string = UspDirection,
   THeadingStyle extends string = UspHeadingStyle,
   TShadow extends string = UspShadow,
-  TIconSize extends string = UspIconSize,
-  TIconColor extends string = UspIconColor,
-  TIconBackground extends string = UspIconBackground,
+  TIconBackgroundShape extends string = UspIconBackgroundShape,
   TAlignment extends string = UspAlignment,
   TContentSize extends string = UspContentSize,
 > extends Record<string, unknown> {
@@ -42,10 +41,19 @@ export interface UspGroupAttributes<
     card: boolean
     direction: TDirection
     align: TAlignment
+    textAlign: string
     borderColor: string
     backgroundColor: string
     textColor: string
-    icon: {size: TIconSize; color: TIconColor; background: TIconBackground; bordered?: boolean}
+    icon: {
+      size: number
+      color: string
+      background: string
+      backgroundSize: number
+      backgroundShape: TIconBackgroundShape
+      borderColor: string
+      borderWidth: number
+    }
   }
 }
 
@@ -54,9 +62,7 @@ export interface UspGroupOptions<
   TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
   THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
   TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
-  TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES,
-  TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS,
-  TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS,
+  TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES,
   TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
   TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
 > extends BriloBlockType {
@@ -65,9 +71,9 @@ export interface UspGroupOptions<
   directions?: TDirections
   headingStyles?: THeadingStyles
   shadows?: TShadows
-  iconSizes?: TIconSizes
-  iconColors?: TIconColors
-  iconBackgrounds?: TIconBackgrounds
+  iconSizePresets?: readonly UspSizePreset[]
+  iconBackgroundSizePresets?: readonly UspSizePreset[]
+  iconBackgroundShapes?: TIconBackgroundShapes
   alignments?: TAlignments
   contentSizes?: TContentSizes
 }

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

@@ -0,0 +1,66 @@
+import clsx from 'clsx'
+
+export interface UspSharedStyle {
+  direction?: string
+  align?: 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 UspPreviewStyle {
+  rootClassName: string
+  iconClassName: string
+  cssVars: Record<string, string>
+}
+
+export function buildUspPreviewStyle(shared?: UspSharedStyle, resolveHex: (value: string) => string = (value) => value): UspPreviewStyle {
+  if (!shared) {
+    return {rootClassName: '', iconClassName: '', cssVars: {}}
+  }
+
+  const icon = shared.icon ?? {}
+
+  const rootClassName = clsx(
+    shared.direction && `--direction-${shared.direction}`,
+    shared.align && `--align-${shared.align}`,
+    shared.textAlign && `--body-align-${shared.textAlign}`,
+    shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`,
+    icon.background && '--icon-background',
+    icon.color && '--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) cssVars['--icon-background-color'] = resolveHex(icon.background)
+  if (icon.color) cssVars['--icon-color'] = resolveHex(icon.color)
+  if (icon.size) cssVars['--icon-size'] = `${icon.size}px`
+  if (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/usp/usp-item/edit.tsx

@@ -3,6 +3,8 @@ import {PanelBody, ToggleControl, TextControl} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {buildUspPreviewStyle, type UspSharedStyle} from './buildPreviewStyle'
 import {ICON_TYPES} from './constants'
 import type {UspItemAttributes, UspItemOptions} from './types'
 
@@ -10,13 +12,17 @@ export function createUspItemEdit(options: UspItemOptions) {
   return function Edit({
     attributes,
     setAttributes,
+    context,
   }: {
     attributes: UspItemAttributes
     setAttributes: (a: Partial<UspItemAttributes>) => void
+    context?: {'brilo/usp-style'?: UspSharedStyle}
   }) {
     const {title, content, url, icon} = attributes
+    const {resolveHex} = useTenantColorPalette()
+    const {rootClassName, iconClassName, cssVars} = buildUspPreviewStyle(context?.['brilo/usp-style'], resolveHex)
 
-    const blockProps = useBlockProps({className: 'i-usp'})
+    const blockProps = useBlockProps({className: clsx('i-usp', rootClassName), style: cssVars})
 
     return (
       <>
@@ -36,7 +42,14 @@ export function createUspItemEdit(options: UspItemOptions) {
 
         <div {...blockProps}>
           <div className="i-usp__inner wp-block-inner">
-            <ItemIconPreview icon={icon} className="i-usp__icon" setAttributes={setAttributes} options={options} />
+            <ItemIconPreview
+              icon={icon}
+              className="i-usp__icon"
+              modifierClassName={iconClassName}
+              style={cssVars}
+              setAttributes={setAttributes}
+              options={options}
+            />
 
             <div className={clsx('i-usp__body', 'grow')}>
               <RichText