@brilo/base-blocks 0.1.43 → 0.1.45

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

@@ -1,11 +1,22 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import type {PriceplanGroupOptions} from './types'
+import type {PriceplanGroupAttributes, PriceplanGroupOptions} from './types'
 
 export function createPriceplanGroupEdit(options: PriceplanGroupOptions) {
-  return function Edit() {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PriceplanGroupAttributes
+    setAttributes: (a: Partial<PriceplanGroupAttributes>) => void
+  }) {
+    const {spacing} = attributes
+
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: options.blockClassName ?? 'g-priceplan wp-block-section',
       containerClassName: [options.containerClassName ?? 'u-grid-responsive-blocks-list --cols-3'],
+      containerStyle: itemSpacingStyle(spacing),
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
@@ -13,9 +24,14 @@ export function createPriceplanGroupEdit(options: PriceplanGroupOptions) {
     })
 
     return (
-      <div {...blockProps}>
-        <div {...innerBlocksProps} />
-      </div>
+      <>
+        <InspectorControls>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} initialOpen />
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
     )
   }
 }

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

@@ -1,6 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
 import {createPriceplanGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {PriceplanGroupAttributes, PriceplanGroupOptions} from './types'
@@ -16,7 +17,7 @@ export function createPriceplanGroupBlock(options: PriceplanGroupOptions): Block
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? {src: defaultIcon},
     supports: {html: false, customClassName: false},
-    attributes: {},
+    attributes: {...ITEM_SPACING_ATTRIBUTE},
     edit: createPriceplanGroupEdit(options),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<PriceplanGroupAttributes>

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

@@ -1,6 +1,8 @@
 import type {BriloBlockType} from '~/types'
 
-export interface PriceplanGroupAttributes extends Record<string, unknown> {}
+export interface PriceplanGroupAttributes extends Record<string, unknown> {
+  spacing?: number
+}
 
 export interface PriceplanGroupOptions extends BriloBlockType {
   allowedBlocks?: string[]

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,
@@ -9,15 +11,19 @@ import {
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 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, spacing} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(
@@ -26,7 +32,7 @@ export function createReviewGroupEdit(options: ReviewGroupOptions) {
         image === 'none' && '--image-none',
       ),
       containerClassName: [options.containerClassName ?? 'u-grid-responsive-blocks-list', `--col-${columns}`],
-      containerStyle: {'--grid-max-col-count': columns},
+      containerStyle: {'--grid-max-col-count': columns, ...itemSpacingStyle(spacing)},
       allowedBlocks: options.allowedBlocks ?? ['brilo/review-item'],
       template: options.template ?? [
         ['brilo/review-item', {}],
@@ -62,6 +68,46 @@ 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>
+          )}
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -1,8 +1,9 @@
 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 {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 +14,36 @@ 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',
+    },
+    ...ITEM_SPACING_ATTRIBUTE,
+  }
+
+  if (!exclude.includes('colors')) {
+    attributes.style = {
+      type: 'object',
+      default: {
+        shadow: DEFAULT_SHADOWS[0].value,
+        borderColor: '',
+        backgroundColor: '',
+        textColor: '',
+      },
+    }
+  }
 
   return {
     name: options.name,
@@ -22,21 +53,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,28 @@
 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
+  }
+  spacing?: number
 }
 
 export interface ReviewGroupOptions<TVariants extends OptionArray = typeof VARIANTS> extends BriloBlockType {
   variants?: TVariants
+  exclude?: ExcludableReviewAttr[]
 }

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

@@ -58,6 +58,20 @@ export const DECORATION_OFFSET_UNITS = [
 export const BACKGROUND_IMAGE_FITS = [
   {value: 'cover', label: __('Vyplnit (cover)', 'brilo-blocks')},
   {value: 'contain', label: __('Celý obrázek (contain)', 'brilo-blocks')},
+  {value: 'custom', label: __('Vlastní (px)', 'brilo-blocks')},
+] as const
+
+export const FLUID_DECORATION_FITS = [{value: 'auto', label: __('Automaticky (výška)', 'brilo-blocks')}, ...BACKGROUND_IMAGE_FITS] as const
+
+export const BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT = '32px'
+
+export const BACKGROUND_IMAGE_SIZE_UNITS = [{value: 'px', label: 'px', default: 32}]
+
+export const BACKGROUND_IMAGE_REPEATS = [
+  {value: 'no-repeat', label: __('Žádné', 'brilo-blocks')},
+  {value: 'repeat-x', label: __('Vodorovně (X)', 'brilo-blocks')},
+  {value: 'repeat-y', label: __('Svisle (Y)', 'brilo-blocks')},
+  {value: 'repeat', label: __('Obojí', 'brilo-blocks')},
 ] as const
 
 export const BACKGROUND_IMAGE_POSITIONS = [

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

@@ -18,6 +18,7 @@ import type {
   BackgroundImage,
   BackgroundImageFit,
   BackgroundImagePosition,
+  BackgroundImageRepeat,
   BaseBlockAttributes,
   Border,
   Decoration,
@@ -27,12 +28,16 @@ import type {
   DecorationTranslate,
   ExcludableBaseAttr,
   FluidDecoration,
+  FluidDecorationFit,
   FluidDecorationImage,
 } from './types'
 import {
   BACKGROUND_IMAGE_FITS,
   BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT,
   BACKGROUND_IMAGE_POSITIONS,
+  BACKGROUND_IMAGE_REPEATS,
+  BACKGROUND_IMAGE_SIZE_UNITS,
+  BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT,
   DECORATION_DEPTHS,
   DECORATION_MAX_WIDTH_DEFAULT,
   DECORATION_MAX_WIDTH_UNITS,
@@ -41,25 +46,41 @@ import {
   DECORATION_POSITIONS,
   DECORATION_TRANSLATES,
   FLUID_DECORATION_DEFAULT_HEIGHT,
+  FLUID_DECORATION_FITS,
   FLUID_DECORATION_HEIGHT_PRESETS,
   FLUID_DECORATION_UNITS,
   SPACING_POSITIONS,
   SPACING_SIZES,
 } from './constants'
 
+// Shared shape behind every control's `update(patch)`: fill in defaults, layer the current
+// value on top, then the patch — so a patch only needs to name the field(s) actually changing.
+function mergeUpdate<T>(defaults: T, value: T | undefined, patch: Partial<T>): T {
+  return {...defaults, ...value, ...patch}
+}
+
 interface FluidDecorationControlProps {
   label: string
+  placement: 'top' | 'bottom'
   value?: FluidDecoration
   onChange: (value: FluidDecoration | undefined) => void
 }
 
-function FluidDecorationControl({label, value, onChange}: FluidDecorationControlProps) {
+function FluidDecorationControl({label, placement, value, onChange}: FluidDecorationControlProps) {
   const img = value?.img
   const height = value?.height ?? FLUID_DECORATION_DEFAULT_HEIGHT
+  const fit = value?.fit ?? 'auto'
+  const sizeValue = value?.sizeValue ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT
+  // Matches the twig template's per-side default (top/bottom left) so the field only starts
+  // overriding the frontend once the editor actually writes an explicit value.
+  const bgPosition = value?.bgPosition ?? (placement === 'bottom' ? 'left bottom' : 'left top')
+  const repeat = value?.repeat ?? 'repeat-x'
+
+  const update = (patch: Partial<FluidDecoration>) => onChange(mergeUpdate({img, height, fit, bgPosition, repeat}, value, patch))
 
   const handleSelect = (media: {id: number; url: string; alt: string; width?: number; height?: number}) => {
     const nextImg: FluidDecorationImage = {id: media.id, src: media.url, alt: media.alt ?? '', width: media.width, height: media.height}
-    onChange({img: nextImg, height})
+    update({img: nextImg})
   }
 
   const handleRemove = () => onChange(undefined)
@@ -93,15 +114,49 @@ function FluidDecorationControl({label, value, onChange}: FluidDecorationControl
             label={__('Výška', 'brilo-blocks')}
             value={height}
             units={FLUID_DECORATION_UNITS}
-            onChange={(next) => onChange({img, height: (next as string) ?? FLUID_DECORATION_DEFAULT_HEIGHT})}
+            onChange={(next) => update({height: (next as string) ?? FLUID_DECORATION_DEFAULT_HEIGHT})}
           />
           <ButtonGroup>
             {FLUID_DECORATION_HEIGHT_PRESETS.map((preset) => (
-              <Button key={preset} variant="secondary" size="small" onClick={() => onChange({img, height: `${preset}px`})}>
+              <Button key={preset} variant="secondary" size="small" onClick={() => update({height: `${preset}px`})}>
                 {preset}
               </Button>
             ))}
           </ButtonGroup>
+
+          <ToggleGroupControl
+            label={__('Přizpůsobení', 'brilo-blocks')}
+            value={fit}
+            onChange={(next) => update({fit: next as FluidDecorationFit})}
+            isBlock
+          >
+            {FLUID_DECORATION_FITS.map((f) => (
+              <ToggleGroupControlOption key={f.value} value={f.value} label={f.label} />
+            ))}
+          </ToggleGroupControl>
+
+          {fit === 'custom' && (
+            <UnitControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={sizeValue}
+              units={BACKGROUND_IMAGE_SIZE_UNITS}
+              onChange={(next) => update({sizeValue: (next as string) ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT})}
+            />
+          )}
+
+          <SelectControl<string>
+            label={__('Pozice obrázku', 'brilo-blocks')}
+            value={bgPosition}
+            options={[...BACKGROUND_IMAGE_POSITIONS]}
+            onChange={(next) => update({bgPosition: next as BackgroundImagePosition})}
+          />
+
+          <SelectControl<string>
+            label={__('Opakování', 'brilo-blocks')}
+            value={repeat}
+            options={[...BACKGROUND_IMAGE_REPEATS]}
+            onChange={(next) => update({repeat: next as BackgroundImageRepeat})}
+          />
         </>
       )}
     </BaseControl>
@@ -122,7 +177,8 @@ function DecorationControl({value, onChange}: DecorationControlProps) {
   const offsetX = value?.offsetX ?? DECORATION_OFFSET_DEFAULT
   const offsetY = value?.offsetY ?? DECORATION_OFFSET_DEFAULT
 
-  const update = (patch: Partial<Decoration>) => onChange({img, position, depth, translate, maxWidth, offsetX, offsetY, ...value, ...patch})
+  const update = (patch: Partial<Decoration>) =>
+    onChange(mergeUpdate({img, position, depth, translate, maxWidth, offsetX, offsetY}, value, patch))
 
   const handleSelect = (media: {id: number; url: string; alt: string; width?: number; height?: number}) => {
     const nextImg: DecorationImage = {id: media.id, src: media.url, alt: media.alt ?? '', width: media.width, height: media.height}
@@ -234,11 +290,14 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
   const {paletteColors} = useTenantColorPalette()
   const img = value?.img
   const fit = value?.fit ?? 'cover'
+  const sizeValue = value?.sizeValue ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT
   const position = value?.position ?? 'center center'
+  const repeat = value?.repeat ?? 'no-repeat'
   const overlayColor = value?.overlay?.color
   const overlayOpacity = value?.overlay?.opacity ?? BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT
 
-  const update = (patch: Partial<BackgroundImage>) => onChange({img, fit, position, overlay: value?.overlay, ...value, ...patch})
+  const update = (patch: Partial<BackgroundImage>) =>
+    onChange(mergeUpdate({img, fit, position, repeat, overlay: value?.overlay}, value, patch))
 
   const handleSelect = (media: {id: number; url: string; alt: string; width?: number; height?: number}) => {
     const nextImg: FluidDecorationImage = {id: media.id, src: media.url, alt: media.alt ?? '', width: media.width, height: media.height}
@@ -283,6 +342,15 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
             ))}
           </ToggleGroupControl>
 
+          {fit === 'custom' && (
+            <UnitControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={sizeValue}
+              units={BACKGROUND_IMAGE_SIZE_UNITS}
+              onChange={(next) => update({sizeValue: (next as string) ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT})}
+            />
+          )}
+
           <SelectControl<string>
             label={__('Pozice', 'brilo-blocks')}
             value={position}
@@ -290,9 +358,15 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
             onChange={(next) => update({position: next as BackgroundImagePosition})}
           />
 
+          <SelectControl<string>
+            label={__('Opakování', 'brilo-blocks')}
+            value={repeat}
+            options={[...BACKGROUND_IMAGE_REPEATS]}
+            onChange={(next) => update({repeat: next as BackgroundImageRepeat})}
+          />
+
           <BaseControl
             label={__('Překryv barvou', 'brilo-blocks')}
-            __nextHasNoMarginBottom
             help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}
           >
             <ColorPalette
@@ -463,8 +537,18 @@ export function BaseControls({attributes, setAttributes, exclude}: BaseControlsP
 
       {!exclude.includes('decorations') && (
         <PanelBody title={__('Fluidní dekorace', 'brilo-blocks')} initialOpen={false}>
-          <FluidDecorationControl label={__('Nahoře', 'brilo-blocks')} value={fluid.top} onChange={(value) => setFluid('top', value)} />
-          <FluidDecorationControl label={__('Dole', 'brilo-blocks')} value={fluid.bottom} onChange={(value) => setFluid('bottom', value)} />
+          <FluidDecorationControl
+            label={__('Nahoře', 'brilo-blocks')}
+            placement="top"
+            value={fluid.top}
+            onChange={(value) => setFluid('top', value)}
+          />
+          <FluidDecorationControl
+            label={__('Dole', 'brilo-blocks')}
+            placement="bottom"
+            value={fluid.bottom}
+            onChange={(value) => setFluid('bottom', value)}
+          />
         </PanelBody>
       )}
 

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

@@ -3,6 +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'
 
 export function createBaseSectionEdit<TExtra extends Record<string, unknown> = Record<string, never>>(options: BaseSectionOptions<TExtra>) {
   const EXCLUDE = options.exclude ?? []
@@ -25,11 +26,18 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
         ...(bgImageSrc
           ? {
               backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
-              backgroundSize: [tintLayer ? '100% 100%' : null, backgroundImage?.fit ?? 'cover'].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: 'no-repeat',
+              backgroundRepeat: [tintLayer ? 'no-repeat' : null, backgroundImage?.repeat ?? 'no-repeat'].filter(Boolean).join(', '),
               padding: '16px',
             }
           : {}),

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

@@ -13,6 +13,12 @@ export interface FluidDecorationImage {
 export interface FluidDecoration {
   img?: FluidDecorationImage
   height: string
+  fit?: FluidDecorationFit
+  sizeValue?: string
+  // Named bgPosition (not "position") — the twig include merges its own top/bottom placement
+  // key as "position" on top of this object, which would silently clobber a same-named field.
+  bgPosition?: BackgroundImagePosition
+  repeat?: BackgroundImageRepeat
 }
 
 export type DecorationImage = FluidDecorationImage
@@ -31,7 +37,12 @@ export interface Decoration {
   offsetY?: string
 }
 
-export type BackgroundImageFit = 'cover' | 'contain'
+export type BackgroundImageFit = 'cover' | 'contain' | 'custom'
+
+// Fluid decorations additionally support 'auto' (original height-driven sizing, no crop/fit).
+export type FluidDecorationFit = BackgroundImageFit | 'auto'
+
+export type BackgroundImageRepeat = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y'
 
 export type BackgroundImagePosition =
   | 'left top'
@@ -52,7 +63,9 @@ export interface BackgroundImageOverlay {
 export interface BackgroundImage {
   img?: FluidDecorationImage
   fit?: BackgroundImageFit
+  sizeValue?: string
   position?: BackgroundImagePosition
+  repeat?: BackgroundImageRepeat
   overlay?: BackgroundImageOverlay
 }
 

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

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import {
@@ -34,7 +35,7 @@ export function createSignpostGroupEdit(options: SignpostGroupOptions) {
     attributes: SignpostGroupAttributes
     setAttributes: (a: Partial<SignpostGroupAttributes>) => void
   }) {
-    const {columns, headingLevel, ratio, img, style, padding} = attributes
+    const {columns, headingLevel, ratio, img, style, padding, spacing} = attributes
     const clipPath = img?.clipPath ?? 'none'
     const {paletteColors} = useTenantColorPalette()
 
@@ -45,6 +46,7 @@ export function createSignpostGroupEdit(options: SignpostGroupOptions) {
         '--grid-max-col-count': columns,
         // Inherited by every signpost item inside the container.
         ...(IMAGE_CLIP_PATH_VALUES[clipPath] && {'--signpost-image-clip-path': IMAGE_CLIP_PATH_VALUES[clipPath]}),
+        ...itemSpacingStyle(spacing),
       },
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
@@ -162,6 +164,7 @@ export function createSignpostGroupEdit(options: SignpostGroupOptions) {
               />
             </PanelBody>
           )}
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -1,6 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
 import {COLUMNS, DEFAULT_IMAGE_CLIP_PATHS, DEFAULT_SHADOWS, HEADING_LEVELS, RATIOS, TEXT_ALIGNS} from './constants'
 import {createSignpostGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
@@ -31,6 +32,7 @@ export function createSignpostGroupBlock(options: SignpostGroupOptions): BlockCo
       type: 'object',
       default: {clipPath: DEFAULT_IMAGE_CLIP_PATHS[0].value},
     },
+    ...ITEM_SPACING_ATTRIBUTE,
   }
 
   if (!exclude.includes('colors')) {

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

@@ -23,6 +23,7 @@ export interface SignpostGroupAttributes extends Record<string, unknown> {
     textAlign: SignpostTextAlign
   }
   padding: {value: number}
+  spacing?: number
 }
 
 export interface SignpostGroupOptions extends BriloBlockType {