@brilo/base-blocks 0.1.44 → 0.1.45

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

@@ -11,6 +11,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 {COLUMNS, DEFAULT_SHADOWS, VARIANTS} from './constants'
@@ -21,7 +22,7 @@ export function createReviewGroupEdit(options: ReviewGroupOptions) {
   const exclude = options.exclude ?? []
 
   return function ReviewGroupEdit({attributes, setAttributes}: BlockEditProps<ReviewGroupAttributes>) {
-    const {columns, image, variant, style} = attributes
+    const {columns, image, variant, style, spacing} = attributes
     const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
@@ -31,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', {}],
@@ -106,6 +107,7 @@ export function createReviewGroupEdit(options: ReviewGroupOptions) {
               </BaseControl>
             </PanelBody>
           )}
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

package/src/blocks/review/review-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 type {OptionArray} from '~/types'
 import {COLUMNS, DEFAULT_SHADOWS, VARIANTS} from './constants'
 import {createReviewGroupEdit} from './edit'
@@ -29,6 +30,7 @@ export function createReviewGroupBlock<TVariants extends OptionArray = typeof VA
       type: 'string',
       default: 'none',
     },
+    ...ITEM_SPACING_ATTRIBUTE,
   }
 
   if (!exclude.includes('colors')) {

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

@@ -19,6 +19,7 @@ export interface ReviewGroupAttributes<TVariant extends string = Variant> extend
     backgroundColor: string
     textColor: string
   }
+  spacing?: number
 }
 
 export interface ReviewGroupOptions<TVariants extends OptionArray = typeof VARIANTS> extends BriloBlockType {

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 {

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

@@ -7,6 +7,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 type {OptionArray} from '~/types'
 import type {StepGroupAttributes, StepGroupOptions, StepVariant} from './types'
@@ -22,12 +23,12 @@ export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAU
     attributes: StepGroupAttributes
     setAttributes: (a: Partial<StepGroupAttributes>) => void
   }) {
-    const {variant, disableIcon} = attributes
+    const {variant, disableIcon, spacing} = attributes
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-step wp-block-section', `--variant-${variant}`, disableIcon && '--disable-icon'),
       containerClassName: [options.containerClassName ?? 'g-step__container', 'u-grid-responsive', '--cols-3'],
-      containerStyle: {'--grid-max-col-count': 3},
+      containerStyle: {'--grid-max-col-count': 3, ...itemSpacingStyle(spacing)},
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
@@ -54,6 +55,7 @@ export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAU
               onChange={(v) => setAttributes({disableIcon: v})}
             />
           </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -5,6 +5,7 @@ import {DEFAULT_VARIANTS} from './constants'
 import {createStepGroupEdit} from './edit'
 import type {StepGroupAttributes, StepGroupOptions} from './types'
 import {icon} from '~/blocks/step/step-group/icon'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
 import type {OptionArray} from '~/types'
 
 export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(
@@ -29,6 +30,7 @@ export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFA
         type: 'boolean',
         default: false,
       },
+      ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createStepGroupEdit(options as unknown as StepGroupOptions),
     save: () => <InnerBlocks.Content />,

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

@@ -6,6 +6,7 @@ export type StepVariant = (typeof DEFAULT_VARIANTS)[number]['value']
 export interface StepGroupAttributes<TVariant extends string = StepVariant> extends Record<string, unknown> {
   variant: TVariant
   disableIcon: boolean
+  spacing?: number
 }
 
 export interface StepGroupOptions<TVariants extends OptionArray = typeof DEFAULT_VARIANTS> extends BriloBlockType {

package/src/blocks/text-and-form/text-and-form-text-column/index.ts

@@ -14,5 +14,6 @@ export const textAndFormTextColumnDefaults: TextAndFormTextColumnOptions = {
     'core/heading',
     'core/list',
     'core/paragraph',
+    'brilo/list-group',
   ],
 }

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

@@ -11,6 +11,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 {
@@ -89,7 +90,7 @@ export function createUspGroupEdit(options: UspGroupOptions) {
     attributes: UspGroupAttributes
     setAttributes: (a: Partial<UspGroupAttributes>) => void
   }) {
-    const {columns, headingSettings, content, style} = attributes
+    const {columns, headingSettings, content, style, spacing} = attributes
     const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
@@ -100,7 +101,7 @@ export function createUspGroupEdit(options: UspGroupOptions) {
         style.shadow !== 'none' && `--shadow-${style.shadow}`,
       ),
       containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`],
-      containerStyle: {'--grid-max-col-count': columns},
+      containerStyle: {'--grid-max-col-count': columns, ...itemSpacingStyle(spacing)},
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
@@ -285,6 +286,7 @@ export function createUspGroupEdit(options: UspGroupOptions) {
               />
             )}
           </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

package/src/blocks/usp/usp-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 type {NumberArray, OptionArray} from '~/types'
 import {
   DEFAULT_ALIGNMENTS,
@@ -91,6 +92,7 @@ export function createUspGroupBlock<
           },
         },
       },
+      ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createUspGroupEdit(options as unknown as UspGroupOptions),
     save: () => <InnerBlocks.Content />,

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

@@ -55,6 +55,7 @@ export interface UspGroupAttributes<
       borderWidth: number
     }
   }
+  spacing?: number
 }
 
 export interface UspGroupOptions<

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

@@ -9,3 +9,5 @@ export const SIZES = [
   {value: 'md', label: __('Střední', 'brilo-blocks')},
   {value: 'lg', label: __('Velký', 'brilo-blocks')},
 ] as const
+
+export const DEFAULT_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.25)'

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

@@ -1,7 +1,9 @@
 import {InspectorControls, MediaUpload, MediaUploadCheck, RichText, useBlockProps} from '@wordpress/block-editor'
 import type {BlockEditProps} from '@wordpress/blocks'
 import {
+  BaseControl,
   Button,
+  ColorPalette,
   PanelBody,
   TextControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -9,7 +11,8 @@ import {
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
-import {SIZES, VIDEO_TYPES} from './constants'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {DEFAULT_OVERLAY_COLOR, SIZES, VIDEO_TYPES} from './constants'
 import type {VideoGroupAttributes, VideoGroupOptions, VideoSize, VideoType} from './types'
 
 function extractYoutubeId(url: string): string | null {
@@ -19,7 +22,8 @@ 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, playButtonTitle} = attributes
+    const {type, url, mediaId, caption, size, poster, playButtonTitle, overlayColor} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const youtubeId = type === 'youtube' ? extractYoutubeId(url) : null
     const youtubeThumbnail = youtubeId ? `https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg` : null
@@ -92,6 +96,24 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
             </MediaUploadCheck>
           </PanelBody>
 
+          <PanelBody title={__('Barevná vrstva', 'brilo-blocks')} initialOpen={false}>
+            <BaseControl
+              label={__('Barva překrytí náhledu', 'brilo-blocks')}
+              help={__('Ztmaví náhled videa, aby tlačítko přehrát více vyniklo. Výchozí je černá s 25% průhledností.', 'brilo-blocks')}
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={overlayColor || undefined}
+                onChange={(value) => setAttributes({overlayColor: value ?? ''})}
+                enableAlpha
+                clearable
+              />
+            </BaseControl>
+            <Button onClick={() => setAttributes({overlayColor: DEFAULT_OVERLAY_COLOR})} variant="tertiary" size="small">
+              {__('Obnovit výchozí barvu', 'brilo-blocks')}
+            </Button>
+          </PanelBody>
+
           <PanelBody title={__('Rozložení', 'brilo-blocks')} initialOpen={false}>
             <ToggleGroupControl
               label={__('Velikost', 'brilo-blocks')}
@@ -112,6 +134,7 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
               youtubeThumbnail ? (
                 <div className="g-video__youtube-preview">
                   <img src={youtubeThumbnail} alt="" />
+                  <div className="g-video__overlay" style={overlayColor ? {backgroundColor: overlayColor} : undefined} />
                   <div className="g-video__play-icon" />
                 </div>
               ) : (
@@ -135,6 +158,7 @@ export function createVideoGroupEdit(_options: VideoGroupOptions) {
                         <video src={url} poster={poster?.src || undefined}>
                           <track kind="captions" />
                         </video>
+                        <div className="g-video__overlay" style={overlayColor ? {backgroundColor: overlayColor} : undefined} />
                         <Button onClick={open} variant="primary" className="g-video__change-btn">
                           {__('Změnit video', 'brilo-blocks')}
                         </Button>

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

@@ -23,13 +23,18 @@
   }
 }
 
+.g-video__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
 .g-video__play-icon {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.2);
   pointer-events: none;
 
   &::after {

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

@@ -1,6 +1,6 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import {SIZES, VIDEO_TYPES} from './constants'
+import {DEFAULT_OVERLAY_COLOR, SIZES, VIDEO_TYPES} from './constants'
 import {createVideoGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {VideoGroupAttributes, VideoGroupOptions} from './types'
@@ -48,6 +48,10 @@ export function createVideoGroupBlock(options: VideoGroupOptions): BlockConfigur
         type: 'string',
         default: __('Přehrát video', 'brilo-blocks'),
       },
+      overlayColor: {
+        type: 'string',
+        default: DEFAULT_OVERLAY_COLOR,
+      },
     },
     edit: createVideoGroupEdit(options),
     save: () => null,

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

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