@brilo/base-blocks 0.1.50 → 0.1.53

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

@@ -1,27 +1,12 @@
 import {InspectorControls} from '@wordpress/block-editor'
-import {
-  BaseControl,
-  Button,
-  ColorPalette,
-  PanelBody,
-  RangeControl,
-  SelectControl,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
+import {BaseControl, Button, ColorPalette, PanelBody, RangeControl, SelectControl} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
+import {DEFAULT_SURFACE_SHADOWS, SurfaceStylePanel} from '~/components/SurfaceStyleControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
-import {
-  DEFAULT_ICON_SIZE_PRESETS,
-  DEFAULT_ICON_VARIANTS,
-  DEFAULT_SHADOWS,
-  FAQ_HEADING_LEVELS,
-  ICON_SIZE_MAX,
-  ICON_SIZE_MIN,
-} from './constants'
-import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant, FaqShadow, FaqSizePreset} from './types'
+import {DEFAULT_ICON_SIZE_PRESETS, DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS, ICON_SIZE_MAX, ICON_SIZE_MIN} from './constants'
+import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant, FaqSizePreset} from './types'
 
 function PresetSizeControl({
   label,
@@ -56,6 +41,7 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
   const ICON_VARIANTS = options.iconVariants ?? DEFAULT_ICON_VARIANTS
   const ICON_SIZE_PRESETS = options.iconSizePresets ?? DEFAULT_ICON_SIZE_PRESETS
   const exclude = options.exclude ?? []
+  const shadows = options.shadows ?? DEFAULT_SURFACE_SHADOWS
 
   return function Edit({
     attributes,
@@ -123,43 +109,12 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
             )}
           </PanelBody>
           {!exclude.includes('colors') && style && (
-            <PanelBody title={__('Styl', 'brilo-blocks')}>
-              <ToggleGroupControl
-                isBlock
-                label={__('Stín', 'brilo-blocks')}
-                value={style.shadow}
-                onChange={(v) => setAttributes({style: {...style, shadow: v as FaqShadow}})}
-              >
-                {DEFAULT_SHADOWS.map((s) => (
-                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
-                ))}
-              </ToggleGroupControl>
-              <BaseControl
-                label={__('Barva okraje', 'brilo-blocks')}
-                help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
-                id="faq-group-border-color"
-              >
-                <ColorPalette
-                  colors={paletteColors}
-                  value={style.borderColor || undefined}
-                  onChange={(value) => setAttributes({style: {...style, borderColor: value ?? ''}})}
-                />
-              </BaseControl>
-              <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id="faq-group-background-color">
-                <ColorPalette
-                  colors={paletteColors}
-                  value={style.backgroundColor || undefined}
-                  onChange={(value) => setAttributes({style: {...style, backgroundColor: value ?? ''}})}
-                />
-              </BaseControl>
-              <BaseControl label={__('Barva textu', 'brilo-blocks')} id="faq-group-text-color">
-                <ColorPalette
-                  colors={paletteColors}
-                  value={style.textColor || undefined}
-                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
-                />
-              </BaseControl>
-            </PanelBody>
+            <SurfaceStylePanel
+              style={style}
+              shadows={shadows}
+              idPrefix="faq-group"
+              onChange={(next) => setAttributes({style: {...style, ...next}})}
+            />
           )}
           <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>

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

@@ -3,7 +3,8 @@ import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
 import type {OptionArray} from '~/types'
-import {DEFAULT_ICON_SIZE, DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
+import {DEFAULT_SURFACE_SHADOWS, surfaceStyleAttribute} from '~/components/SurfaceStyleControl'
+import {DEFAULT_ICON_SIZE, DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
 import {createFaqGroupEdit} from './edit'
 import type {FaqGroupAttributes, FaqGroupOptions} from './types'
 
@@ -30,13 +31,12 @@ export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof D
   }
 
   if (!exclude.includes('colors')) {
+    const surfaceStyle = surfaceStyleAttribute(options.shadows ?? DEFAULT_SURFACE_SHADOWS)
+
     attributes.style = {
-      type: 'object',
+      ...surfaceStyle,
       default: {
-        shadow: DEFAULT_SHADOWS[0].value,
-        borderColor: '',
-        backgroundColor: '',
-        textColor: '',
+        ...surfaceStyle.default,
         icon: {
           color: '',
           background: '',

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

@@ -1,9 +1,10 @@
+import type {SurfaceShadowOption, SurfaceStyle} from '~/components/SurfaceStyleControl'
 import type {BriloBlockType, OptionArray} from '~/types'
-import type {DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
+import type {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
 
 export type FaqHeadingLevel = (typeof FAQ_HEADING_LEVELS)[number]
 export type FaqIconVariant = (typeof DEFAULT_ICON_VARIANTS)[number]['value']
-export type FaqShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+export type FaqShadow = SurfaceStyle['shadow']
 
 export type ExcludableFaqAttr = 'colors'
 
@@ -15,11 +16,7 @@ export interface FaqSizePreset {
 export interface FaqGroupAttributes<TIconVariant extends string = FaqIconVariant> extends Record<string, unknown> {
   headingLevel: FaqHeadingLevel
   iconVariant: TIconVariant
-  style: {
-    shadow: FaqShadow
-    borderColor: string
-    backgroundColor: string
-    textColor: string
+  style: SurfaceStyle<string> & {
     icon: {
       color: string
       background: string
@@ -33,4 +30,6 @@ export interface FaqGroupOptions<TIconVariants extends OptionArray = typeof DEFA
   iconVariants?: TIconVariants
   iconSizePresets?: readonly FaqSizePreset[]
   exclude?: ExcludableFaqAttr[]
+  /** Overrides the shared shadow presets — see `DEFAULT_SURFACE_SHADOWS`. */
+  shadows?: readonly SurfaceShadowOption[]
 }

package/src/blocks/layout/box/constants.ts

@@ -0,0 +1,19 @@
+import {__} from '@wordpress/i18n'
+import {justifyBottom, justifyLeft, justifyRight, justifyTop} from '@wordpress/icons'
+import type {ReactElement} from 'react'
+import type {BoxSpacingSide} from './types'
+
+/** Sides shared by the padding and margin panels, in CSS shorthand order. */
+export const BOX_SPACING_SIDES: readonly {value: BoxSpacingSide; label: string; icon: ReactElement}[] = [
+  {value: 'top', label: __('Nahoře', 'brilo-blocks'), icon: justifyTop},
+  {value: 'right', label: __('Vpravo', 'brilo-blocks'), icon: justifyRight},
+  {value: 'bottom', label: __('Dole', 'brilo-blocks'), icon: justifyBottom},
+  {value: 'left', label: __('Vlevo', 'brilo-blocks'), icon: justifyLeft},
+] as const
+
+// All box lengths are plain pixel numbers — the same convention as the shared
+// `spacing` attribute — so the editor needs no unit picker and the template
+// appends the unit.
+export const BOX_SPACING_MAX = 120
+export const BOX_BORDER_WIDTH_MAX = 20
+export const BOX_BORDER_RADIUS_MAX = 64

package/src/blocks/layout/box/controls.tsx

@@ -1,43 +1,55 @@
-import * as blockEditor from '@wordpress/block-editor'
 import {ColorPalette, ContrastChecker} from '@wordpress/block-editor'
-import {BoxControl, PanelBody, __experimentalUnitControl as UnitControl} from '@wordpress/components'
+import {PanelBody, RangeControl} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
-import type {ComponentType} from 'react'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
-import type {BoxAttributes, BoxBorderRadius} from './types'
-
-// `__experimentalBorderRadiusControl` is a real runtime export of @wordpress/block-editor (see
-// packages/block-editor/src/components/border-radius-control) but isn't covered by the community
-// @types/wordpress__block-editor typings, so it's pulled off the namespace import and cast by hand.
-interface BorderRadiusControlProps {
-  values?: string | BoxBorderRadius
-  onChange: (next: string | BoxBorderRadius | undefined) => void
-}
-const BorderRadiusControl = (blockEditor as unknown as {__experimentalBorderRadiusControl: ComponentType<BorderRadiusControlProps>})
-  .__experimentalBorderRadiusControl
+import {BOX_BORDER_RADIUS_MAX, BOX_BORDER_WIDTH_MAX, BOX_SPACING_MAX, BOX_SPACING_SIDES} from './constants'
+import type {BoxAttributes, BoxSpacing} from './types'
 
 interface BoxControlsProps {
   attributes: BoxAttributes
   setAttributes: (attrs: Partial<BoxAttributes>) => void
 }
 
+function SpacingPanel({title, values, onChange}: {title: string; values: BoxSpacing; onChange: (next: BoxSpacing) => void}) {
+  return (
+    <PanelBody title={title}>
+      {BOX_SPACING_SIDES.map((side) => (
+        <RangeControl
+          key={side.value}
+          label={side.label}
+          beforeIcon={side.icon}
+          value={values?.[side.value]}
+          onChange={(v) => onChange({...values, [side.value]: v})}
+          min={0}
+          max={BOX_SPACING_MAX}
+          step={1}
+          allowReset
+          withInputField
+        />
+      ))}
+    </PanelBody>
+  )
+}
+
 export function BoxControls({attributes, setAttributes}: BoxControlsProps) {
   const {padding, margin, borderRadius, borderWidth, borderColor, background, textColor} = attributes
   const {paletteColors, resolveHex} = useTenantColorPalette()
 
   return (
     <>
-      <PanelBody title={__('Rozestupy', 'brilo-blocks')}>
-        <BoxControl label={__('Padding', 'brilo-blocks')} values={padding} onChange={(next) => setAttributes({padding: next})} />
-        <BoxControl label={__('Margin', 'brilo-blocks')} values={margin} onChange={(next) => setAttributes({margin: next})} />
-      </PanelBody>
+      <SpacingPanel title={__('Padding', 'brilo-blocks')} values={padding} onChange={(next) => setAttributes({padding: next})} />
+      <SpacingPanel title={__('Margin', 'brilo-blocks')} values={margin} onChange={(next) => setAttributes({margin: next})} />
 
       <PanelBody title={__('Ohraničení', 'brilo-blocks')}>
-        <UnitControl
+        <RangeControl
           label={__('Šířka okraje', 'brilo-blocks')}
           value={borderWidth}
+          onChange={(v) => setAttributes({borderWidth: v ?? 0})}
           min={0}
-          onChange={(next) => setAttributes({borderWidth: (next as string) ?? ''})}
+          max={BOX_BORDER_WIDTH_MAX}
+          step={1}
+          allowReset
+          withInputField
         />
         <p>{__('Barva okraje', 'brilo-blocks')}</p>
         <ColorPalette
@@ -45,7 +57,16 @@ export function BoxControls({attributes, setAttributes}: BoxControlsProps) {
           value={borderColor || undefined}
           onChange={(value) => setAttributes({borderColor: value ?? ''})}
         />
-        <BorderRadiusControl values={borderRadius} onChange={(next) => setAttributes({borderRadius: next ?? ''})} />
+        <RangeControl
+          label={__('Zaoblení rohů', 'brilo-blocks')}
+          value={borderRadius}
+          onChange={(v) => setAttributes({borderRadius: v ?? 0})}
+          min={0}
+          max={BOX_BORDER_RADIUS_MAX}
+          step={1}
+          allowReset
+          withInputField
+        />
       </PanelBody>
 
       <PanelBody title={__('Barvy', 'brilo-blocks')}>

package/src/blocks/layout/box/deprecated.tsx

@@ -0,0 +1,146 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BoxSpacing, BoxSpacingSide} from './types'
+
+/**
+ * v1 stored every length as a CSS string (`"16px"`, `"1rem"`) and allowed a
+ * per-corner `borderRadius` object. v2 stores plain pixel numbers, so posts
+ * saved by v1 have to be migrated — the save output is unchanged
+ * (`<InnerBlocks.Content />`), which means block validation never fails and
+ * would otherwise leave the legacy values in place, silently rendering
+ * `16pxpx`. `isEligible` is what forces the migration.
+ */
+
+const BOX_SIDES: readonly BoxSpacingSide[] = ['top', 'right', 'bottom', 'left']
+
+interface LegacySpacing {
+  top?: string
+  right?: string
+  bottom?: string
+  left?: string
+}
+
+interface LegacyBorderRadius {
+  topLeft?: string
+  topRight?: string
+  bottomLeft?: string
+  bottomRight?: string
+}
+
+export interface LegacyBoxAttributes extends Record<string, unknown> {
+  padding: LegacySpacing
+  margin: LegacySpacing
+  borderRadius: string | LegacyBorderRadius
+  borderWidth: string
+  borderColor: string
+  background: string
+  textColor: string
+}
+
+/**
+ * Parses a v1 CSS length into pixels. `rem`/`em` are approximated at the
+ * 16px browser default; anything else unitless-or-px is taken at face value.
+ * Unparseable values become 0, which renders as "no declaration".
+ */
+function toPixels(value: unknown): number {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : 0
+  }
+
+  if (typeof value !== 'string') {
+    return 0
+  }
+
+  const match = value.trim().match(/^(-?\d*\.?\d+)\s*(px|rem|em)?$/)
+
+  if (!match) {
+    return 0
+  }
+
+  const amount = Number.parseFloat(match[1])
+
+  if (!Number.isFinite(amount)) {
+    return 0
+  }
+
+  return match[2] === 'rem' || match[2] === 'em' ? Math.round(amount * 16) : Math.round(amount)
+}
+
+function migrateSpacing(spacing: LegacySpacing | undefined): BoxSpacing {
+  const next: BoxSpacing = {}
+
+  for (const side of BOX_SIDES) {
+    const pixels = toPixels(spacing?.[side])
+
+    if (pixels !== 0) {
+      next[side] = pixels
+    }
+  }
+
+  return next
+}
+
+/**
+ * v1 could set each corner separately; v2 has a single radius. The first
+ * non-zero corner wins — lossy by design, and only for content that actually
+ * used per-corner radii.
+ */
+function migrateBorderRadius(radius: string | LegacyBorderRadius | undefined): number {
+  if (radius && typeof radius === 'object') {
+    for (const corner of ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'] as const) {
+      const pixels = toPixels(radius[corner])
+
+      if (pixels !== 0) {
+        return pixels
+      }
+    }
+
+    return 0
+  }
+
+  return toPixels(radius)
+}
+
+/** A v1 value still needing conversion: a non-empty string, or a corner object. */
+function isLegacyLength(value: unknown): boolean {
+  return (typeof value === 'string' && value !== '') || (!!value && typeof value === 'object')
+}
+
+function hasLegacyLengths(attributes: LegacyBoxAttributes): boolean {
+  for (const spacing of [attributes.padding, attributes.margin]) {
+    for (const side of BOX_SIDES) {
+      if (isLegacyLength(spacing?.[side])) {
+        return true
+      }
+    }
+  }
+
+  return isLegacyLength(attributes.borderWidth) || isLegacyLength(attributes.borderRadius)
+}
+
+export const boxDeprecated = [
+  {
+    attributes: {
+      padding: {type: 'object', default: {}},
+      margin: {type: 'object', default: {}},
+      borderRadius: {type: ['string', 'object'], default: ''},
+      borderWidth: {type: 'string', default: ''},
+      borderColor: {type: 'string', default: ''},
+      background: {type: 'string', default: ''},
+      textColor: {type: 'string', default: ''},
+    },
+    supports: {html: false, customClassName: false},
+    isEligible: (attributes: Record<string, unknown>) => hasLegacyLengths(attributes as LegacyBoxAttributes),
+    migrate: (attributes: Record<string, unknown>) => {
+      const legacy = attributes as LegacyBoxAttributes
+
+      return {
+        ...legacy,
+        padding: migrateSpacing(legacy.padding),
+        margin: migrateSpacing(legacy.margin),
+        borderRadius: migrateBorderRadius(legacy.borderRadius),
+        borderWidth: toPixels(legacy.borderWidth),
+      }
+    },
+    save: () => <InnerBlocks.Content />,
+  },
+]

package/src/blocks/layout/box/edit.tsx

@@ -4,29 +4,26 @@ import type {CSSProperties} from 'react'
 import {BoxControls} from './controls'
 import type {BoxAttributes, BoxOptions} from './types'
 
+/** Lengths are stored as plain pixel numbers; the unit is added on render. */
+function px(value: number | undefined): string | undefined {
+  return typeof value === 'number' && value !== 0 ? `${value}px` : undefined
+}
+
 export function createBoxEdit(options: BoxOptions) {
   return function Edit({attributes, setAttributes}: BlockEditProps<BoxAttributes>) {
     const {padding, margin, borderRadius, borderWidth, borderColor, background, textColor} = attributes
 
     const style: CSSProperties = {
-      ...(padding?.top && {paddingTop: padding.top}),
-      ...(padding?.right && {paddingRight: padding.right}),
-      ...(padding?.bottom && {paddingBottom: padding.bottom}),
-      ...(padding?.left && {paddingLeft: padding.left}),
-      ...(margin?.top && {marginTop: margin.top}),
-      ...(margin?.right && {marginRight: margin.right}),
-      ...(margin?.bottom && {marginBottom: margin.bottom}),
-      ...(margin?.left && {marginLeft: margin.left}),
-      ...(typeof borderRadius === 'string' && borderRadius && {borderRadius}),
-      ...(typeof borderRadius === 'object' && borderRadius !== null
-        ? {
-            ...(borderRadius.topLeft && {borderTopLeftRadius: borderRadius.topLeft}),
-            ...(borderRadius.topRight && {borderTopRightRadius: borderRadius.topRight}),
-            ...(borderRadius.bottomLeft && {borderBottomLeftRadius: borderRadius.bottomLeft}),
-            ...(borderRadius.bottomRight && {borderBottomRightRadius: borderRadius.bottomRight}),
-          }
-        : {}),
-      ...(borderWidth && {borderWidth, borderStyle: 'solid' as CSSProperties['borderStyle']}),
+      ...(px(padding?.top) && {paddingTop: px(padding?.top)}),
+      ...(px(padding?.right) && {paddingRight: px(padding?.right)}),
+      ...(px(padding?.bottom) && {paddingBottom: px(padding?.bottom)}),
+      ...(px(padding?.left) && {paddingLeft: px(padding?.left)}),
+      ...(px(margin?.top) && {marginTop: px(margin?.top)}),
+      ...(px(margin?.right) && {marginRight: px(margin?.right)}),
+      ...(px(margin?.bottom) && {marginBottom: px(margin?.bottom)}),
+      ...(px(margin?.left) && {marginLeft: px(margin?.left)}),
+      ...(px(borderRadius) && {borderRadius: px(borderRadius)}),
+      ...(px(borderWidth) && {borderWidth: px(borderWidth), borderStyle: 'solid' as CSSProperties['borderStyle']}),
       ...(borderColor && {borderColor}),
       ...(background && {backgroundColor: background}),
       ...(textColor && {color: textColor}),

package/src/blocks/layout/box/factory.tsx

@@ -1,6 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import {boxDeprecated} from './deprecated'
 import {createBoxEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {BoxAttributes, BoxOptions} from './types'
@@ -19,12 +20,13 @@ export function createBoxBlock(options: BoxOptions): BlockConfiguration<BoxAttri
     attributes: {
       padding: {type: 'object', default: {}},
       margin: {type: 'object', default: {}},
-      borderRadius: {type: ['string', 'object'], default: ''},
-      borderWidth: {type: 'string', default: ''},
+      borderRadius: {type: 'number', default: 0},
+      borderWidth: {type: 'number', default: 0},
       borderColor: {type: 'string', default: ''},
       background: {type: 'string', default: ''},
       textColor: {type: 'string', default: ''},
     },
+    deprecated: boxDeprecated,
     edit: createBoxEdit(options),
     save: () => <InnerBlocks.Content />,
   } as BlockConfiguration<BoxAttributes>

package/src/blocks/layout/box/index.ts

@@ -1,4 +1,4 @@
-export type {BoxAttributes, BoxBorderRadius, BoxOptions, BoxSpacing} from './types'
+export type {BoxAttributes, BoxOptions, BoxSpacing, BoxSpacingSide} from './types'
 export {createBoxBlock} from './factory'
 
 import type {BoxOptions} from './types'

package/src/blocks/layout/box/types.ts

@@ -1,24 +1,15 @@
 import type {BriloBlockType} from '~/types'
 
-export interface BoxSpacing {
-  top?: string
-  right?: string
-  bottom?: string
-  left?: string
-}
+export type BoxSpacingSide = 'top' | 'right' | 'bottom' | 'left'
 
-export interface BoxBorderRadius {
-  topLeft?: string
-  topRight?: string
-  bottomLeft?: string
-  bottomRight?: string
-}
+/** Per-side spacing in pixels. An unset side means "no declaration". */
+export type BoxSpacing = Partial<Record<BoxSpacingSide, number>>
 
 export interface BoxAttributes extends Record<string, unknown> {
   padding: BoxSpacing
   margin: BoxSpacing
-  borderRadius: string | BoxBorderRadius
-  borderWidth: string
+  borderRadius: number
+  borderWidth: number
   borderColor: string
   background: string
   textColor: string

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

@@ -76,8 +76,9 @@ function FluidDecorationControl({label, placement, value, onChange}: FluidDecora
   // 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 opacity = value?.opacity ?? BACKGROUND_IMAGE_OPACITY_DEFAULT
 
-  const update = (patch: Partial<FluidDecoration>) => onChange(mergeUpdate({img, height, fit, bgPosition, repeat}, value, patch))
+  const update = (patch: Partial<FluidDecoration>) => onChange(mergeUpdate({img, height, fit, bgPosition, repeat, opacity}, 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}
@@ -158,6 +159,14 @@ function FluidDecorationControl({label, placement, value, onChange}: FluidDecora
             options={[...BACKGROUND_IMAGE_REPEATS]}
             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>

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

@@ -19,6 +19,7 @@ export interface FluidDecoration {
   // key as "position" on top of this object, which would silently clobber a same-named field.
   bgPosition?: BackgroundImagePosition
   repeat?: BackgroundImageRepeat
+  opacity?: number
 }
 
 export type DecorationImage = FluidDecorationImage

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

@@ -51,14 +51,14 @@ function normaliseStyle(saved: Partial<StepGroupAttributes['style']> | undefined
 }
 
 function PresetSizeControl({
-                             label,
-                             id,
-                             value,
-                             presets,
-                             min,
-                             max,
-                             onChange,
-                           }: {
+  label,
+  id,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
   label: string
   id: string
   value: number
@@ -85,9 +85,9 @@ export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAU
   const VARIANTS = options.variants ?? DEFAULT_VARIANTS
 
   return function Edit({
-                         attributes,
-                         setAttributes,
-                       }: {
+    attributes,
+    setAttributes,
+  }: {
     attributes: StepGroupAttributes
     setAttributes: (a: Partial<StepGroupAttributes>) => void
   }) {