@brilo/base-blocks 0.1.35 → 0.1.36

package/build/blocks/sections/base-section/attributes.d.ts

@@ -26,5 +26,12 @@ export declare const baseAttributes: {
         readonly type: 'object';
         readonly default: {};
     };
+    readonly backgroundImage: {
+        readonly type: 'object';
+        readonly default: {
+            readonly fit: 'cover';
+            readonly position: 'center center';
+        };
+    };
 };
 //# sourceMappingURL=attributes.d.ts.map

package/build/blocks/sections/base-section/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/attributes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;aACzB,EAAE;iBACA,IAAI,EAAE,QAAQ;iBACd,OAAO,EAAE,EAAE;;aAEb,OAAO;iBACL,IAAI,EAAE,QAAQ;iBACd,OAAO;qBACL,QAAQ,EAAE,SAAS;qBACnB,IAAI,EAAE,SAAS;;;aAGnB,UAAU;iBACR,IAAI,EAAE,QAAQ;iBACd,OAAO,EAAE,EAAE;;aAEb,SAAS;iBACP,IAAI,EAAE,QAAQ;iBACd,OAAO,EAAE,EAAE;;aAEb,UAAU;iBACR,IAAI,EAAE,QAAQ;iBACd,OAAO;;aAET,WAAW;iBACT,IAAI,EAAE,QAAQ;iBACd,OAAO;;CAED,CAAA"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/attributes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;aACzB,EAAE;iBACA,IAAI,EAAE,QAAQ;iBACd,OAAO,EAAE,EAAE;;aAEb,OAAO;iBACL,IAAI,EAAE,QAAQ;iBACd,OAAO;qBACL,QAAQ,EAAE,SAAS;qBACnB,IAAI,EAAE,SAAS;;;aAGnB,UAAU;iBACR,IAAI,EAAE,QAAQ;iBACd,OAAO,EAAE,EAAE;;aAEb,SAAS;iBACP,IAAI,EAAE,QAAQ;iBACd,OAAO,EAAE,EAAE;;aAEb,UAAU;iBACR,IAAI,EAAE,QAAQ;iBACd,OAAO;;aAET,WAAW;iBACT,IAAI,EAAE,QAAQ;iBACd,OAAO;;aAET,eAAe;iBACb,IAAI,EAAE,QAAQ;iBACd,OAAO;qBACL,GAAG,EAAE,OAAO;qBACZ,QAAQ,EAAE,eAAe;;;CAGrB,CAAA"}

package/build/blocks/sections/base-section/attributes.js

@@ -26,4 +26,11 @@ export const baseAttributes = {
         type: 'object',
         default: {},
     },
+    backgroundImage: {
+        type: 'object',
+        default: {
+            fit: 'cover',
+            position: 'center center',
+        },
+    },
 };

package/build/blocks/sections/base-section/constants.d.ts

@@ -67,4 +67,40 @@ export declare const DECORATION_OFFSET_UNITS: {
     label: string;
     default: number;
 }[];
+export declare const BACKGROUND_IMAGE_FITS: readonly [{
+    readonly value: 'cover';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vyplnit (cover)">;
+}, {
+    readonly value: 'contain';
+    readonly label: import("@wordpress/i18n").TransformedText<"Celý obrázek (contain)">;
+}];
+export declare const BACKGROUND_IMAGE_POSITIONS: readonly [{
+    readonly value: 'left top';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vlevo nahoře">;
+}, {
+    readonly value: 'center top';
+    readonly label: import("@wordpress/i18n").TransformedText<"Nahoře">;
+}, {
+    readonly value: 'right top';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vpravo nahoře">;
+}, {
+    readonly value: 'left center';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vlevo">;
+}, {
+    readonly value: 'center center';
+    readonly label: import("@wordpress/i18n").TransformedText<"Uprostřed">;
+}, {
+    readonly value: 'right center';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vpravo">;
+}, {
+    readonly value: 'left bottom';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vlevo dole">;
+}, {
+    readonly value: 'center bottom';
+    readonly label: import("@wordpress/i18n").TransformedText<"Dole">;
+}, {
+    readonly value: 'right bottom';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vpravo dole">;
+}];
+export declare const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40;
 //# sourceMappingURL=constants.d.ts.map

package/build/blocks/sections/base-section/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;aAC3B,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,OAAO;aAAE,KAAK;EACd,CAAA;AAEV,eAAO,MAAM,aAAa,YAAI,SAAS,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA;AAE7D,eAAO,MAAM,+BAA+B,YAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU,CAAA;AAEzE,eAAO,MAAM,+BAA+B,SAAS,CAAA;AAErD,eAAO,MAAM,sBAAsB;;;;GAIlC,CAAA;AAED,eAAO,MAAM,oBAAoB;aAC9B,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,WAAW;aAAE,KAAK;;aACzB,KAAK,EAAE,aAAa;aAAE,KAAK;;aAC3B,KAAK,EAAE,cAAc;aAAE,KAAK;;aAC5B,KAAK,EAAE,aAAa;aAAE,KAAK;;aAC3B,KAAK,EAAE,cAAc;aAAE,KAAK;EACrB,CAAA;AAEV,eAAO,MAAM,iBAAiB;aAC3B,KAAK,EAAE,OAAO;aAAE,KAAK;;aACrB,KAAK,EAAE,OAAO;aAAE,KAAK;EACd,CAAA;AAEV,eAAO,MAAM,qBAAqB;aAC/B,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,QAAQ;aAAE,KAAK;;aACtB,KAAK,EAAE,KAAK;aAAE,KAAK;EACZ,CAAA;AAEV,eAAO,MAAM,4BAA4B,UAAU,CAAA;AAEnD,eAAO,MAAM,0BAA0B;;;;GAItC,CAAA;AAED,eAAO,MAAM,yBAAyB,QAAQ,CAAA;AAE9C,eAAO,MAAM,uBAAuB;;;;GAInC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;aAC3B,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,OAAO;aAAE,KAAK;EACd,CAAA;AAEV,eAAO,MAAM,aAAa,YAAI,SAAS,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA;AAE7D,eAAO,MAAM,+BAA+B,YAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU,CAAA;AAEzE,eAAO,MAAM,+BAA+B,SAAS,CAAA;AAErD,eAAO,MAAM,sBAAsB;;;;GAIlC,CAAA;AAED,eAAO,MAAM,oBAAoB;aAC9B,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,WAAW;aAAE,KAAK;;aACzB,KAAK,EAAE,aAAa;aAAE,KAAK;;aAC3B,KAAK,EAAE,cAAc;aAAE,KAAK;;aAC5B,KAAK,EAAE,aAAa;aAAE,KAAK;;aAC3B,KAAK,EAAE,cAAc;aAAE,KAAK;EACrB,CAAA;AAEV,eAAO,MAAM,iBAAiB;aAC3B,KAAK,EAAE,OAAO;aAAE,KAAK;;aACrB,KAAK,EAAE,OAAO;aAAE,KAAK;EACd,CAAA;AAEV,eAAO,MAAM,qBAAqB;aAC/B,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,QAAQ;aAAE,KAAK;;aACtB,KAAK,EAAE,KAAK;aAAE,KAAK;EACZ,CAAA;AAEV,eAAO,MAAM,4BAA4B,UAAU,CAAA;AAEnD,eAAO,MAAM,0BAA0B;;;;GAItC,CAAA;AAED,eAAO,MAAM,yBAAyB,QAAQ,CAAA;AAE9C,eAAO,MAAM,uBAAuB;;;;GAInC,CAAA;AAED,eAAO,MAAM,qBAAqB;aAC/B,KAAK,EAAE,OAAO;aAAE,KAAK;;aACrB,KAAK,EAAE,SAAS;aAAE,KAAK;EAChB,CAAA;AAEV,eAAO,MAAM,0BAA0B;aACpC,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,YAAY;aAAE,KAAK;;aAC1B,KAAK,EAAE,WAAW;aAAE,KAAK;;aACzB,KAAK,EAAE,aAAa;aAAE,KAAK;;aAC3B,KAAK,EAAE,eAAe;aAAE,KAAK;;aAC7B,KAAK,EAAE,cAAc;aAAE,KAAK;;aAC5B,KAAK,EAAE,aAAa;aAAE,KAAK;;aAC3B,KAAK,EAAE,eAAe;aAAE,KAAK;;aAC7B,KAAK,EAAE,cAAc;aAAE,KAAK;EACrB,CAAA;AAEV,eAAO,MAAM,wCAAwC,KAAK,CAAA"}

package/build/blocks/sections/base-section/constants.js

@@ -42,3 +42,19 @@ export const DECORATION_OFFSET_UNITS = [
     { value: 'rem', label: 'rem', default: 0 },
     { value: '%', label: '%', default: 0 },
 ];
+export const BACKGROUND_IMAGE_FITS = [
+    { value: 'cover', label: __('Vyplnit (cover)', 'brilo-blocks') },
+    { value: 'contain', label: __('Celý obrázek (contain)', 'brilo-blocks') },
+];
+export const BACKGROUND_IMAGE_POSITIONS = [
+    { value: 'left top', label: __('Vlevo nahoře', 'brilo-blocks') },
+    { value: 'center top', label: __('Nahoře', 'brilo-blocks') },
+    { value: 'right top', label: __('Vpravo nahoře', 'brilo-blocks') },
+    { value: 'left center', label: __('Vlevo', 'brilo-blocks') },
+    { value: 'center center', label: __('Uprostřed', 'brilo-blocks') },
+    { value: 'right center', label: __('Vpravo', 'brilo-blocks') },
+    { value: 'left bottom', label: __('Vlevo dole', 'brilo-blocks') },
+    { value: 'center bottom', label: __('Dole', 'brilo-blocks') },
+    { value: 'right bottom', label: __('Vpravo dole', 'brilo-blocks') },
+];
+export const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40;

package/build/blocks/sections/base-section/controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/controls.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,mBAAmB,EAMnB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAqMhB,UAAU,iBAAiB;IACzB,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IAC5D,OAAO,EAAE,kBAAkB,EAAE,CAAA;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAAC,UAAU,EAAE,aAAa,EAAE,OAAO,EAAC,EAAE,iBAAiB,+BA4EnF"}
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/controls.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAIV,mBAAmB,EAMnB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AA+RhB,UAAU,iBAAiB;IACzB,UAAU,EAAE,mBAAmB,CAAA;IAC/B,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IAC5D,OAAO,EAAE,kBAAkB,EAAE,CAAA;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAAC,UAAU,EAAE,aAAa,EAAE,OAAO,EAAC,EAAE,iBAAiB,+BAkFnF"}

package/build/blocks/sections/base-section/controls.js

@@ -1,9 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColorPalette, ContrastChecker, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
-import { BaseControl, Button, ButtonGroup, PanelBody, PanelRow, SelectControl, TextControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, } from '@wordpress/components';
+import { BaseControl, Button, ButtonGroup, PanelBody, PanelRow, RangeControl, SelectControl, TextControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useTenantColorPalette } from '../../../hooks/useTenantColorPalette';
-import { DECORATION_DEPTHS, DECORATION_MAX_WIDTH_DEFAULT, DECORATION_MAX_WIDTH_UNITS, DECORATION_OFFSET_DEFAULT, DECORATION_OFFSET_UNITS, DECORATION_POSITIONS, DECORATION_TRANSLATES, FLUID_DECORATION_DEFAULT_HEIGHT, FLUID_DECORATION_HEIGHT_PRESETS, FLUID_DECORATION_UNITS, SPACING_POSITIONS, SPACING_SIZES, } from './constants';
+import { BACKGROUND_IMAGE_FITS, BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT, BACKGROUND_IMAGE_POSITIONS, DECORATION_DEPTHS, DECORATION_MAX_WIDTH_DEFAULT, DECORATION_MAX_WIDTH_UNITS, DECORATION_OFFSET_DEFAULT, DECORATION_OFFSET_UNITS, DECORATION_POSITIONS, DECORATION_TRANSLATES, FLUID_DECORATION_DEFAULT_HEIGHT, FLUID_DECORATION_HEIGHT_PRESETS, FLUID_DECORATION_UNITS, SPACING_POSITIONS, SPACING_SIZES, } from './constants';
 function FluidDecorationControl({ label, value, onChange }) {
     var _a;
     const img = value === null || value === void 0 ? void 0 : value.img;
@@ -34,14 +34,32 @@ function DecorationControl({ value, onChange }) {
     const handleRemove = () => onChange(undefined);
     return (_jsxs(BaseControl, { label: __('Obrázek', 'brilo-blocks'), __nextHasNoMarginBottom: true, children: [_jsx(MediaUploadCheck, { children: _jsx(MediaUpload, { onSelect: handleSelect, allowedTypes: ['image'], value: (img === null || img === void 0 ? void 0 : img.id) || 0, render: ({ open }) => (_jsxs(PanelRow, { children: [(img === null || img === void 0 ? void 0 : img.src) && _jsx("img", { src: img.src, alt: img.alt, style: { maxWidth: 48, maxHeight: 48, objectFit: 'contain' } }), _jsx(Button, { onClick: open, variant: "secondary", size: "small", children: (img === null || img === void 0 ? void 0 : img.src) ? __('Změnit', 'brilo-blocks') : __('Vybrat obrázek', 'brilo-blocks') }), !!(img === null || img === void 0 ? void 0 : img.src) && (_jsx(Button, { onClick: handleRemove, variant: "tertiary", size: "small", isDestructive: true, children: __('Odebrat', 'brilo-blocks') }))] })) }) }), !!(img === null || img === void 0 ? void 0 : img.src) && (_jsxs(_Fragment, { children: [_jsx(BaseControl, { label: __('Pozice', 'brilo-blocks'), __nextHasNoMarginBottom: true, children: _jsx("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: DECORATION_POSITIONS.map((p) => (_jsx(Button, { variant: "secondary", size: "small", isPressed: position === p.value, onClick: () => update({ position: p.value }), children: p.label }, p.value))) }) }), _jsx(ToggleGroupControl, { label: __('Vrstva', 'brilo-blocks'), value: depth, onChange: (next) => update({ depth: next }), isBlock: true, children: DECORATION_DEPTHS.map((d) => (_jsx(ToggleGroupControlOption, { value: d.value, label: d.label }, d.value))) }), _jsx(ToggleGroupControl, { label: __('Přesah', 'brilo-blocks'), value: translate, onChange: (next) => update({ translate: next }), isBlock: true, children: DECORATION_TRANSLATES.map((t) => (_jsx(ToggleGroupControlOption, { value: t.value, label: t.label }, t.value))) }), _jsx(UnitControl, { label: __('Max. šířka obrázku', 'brilo-blocks'), value: maxWidth, units: DECORATION_MAX_WIDTH_UNITS, onChange: (next) => { var _a; return update({ maxWidth: (_a = next) !== null && _a !== void 0 ? _a : DECORATION_MAX_WIDTH_DEFAULT }); } }), _jsxs(BaseControl, { label: __('Doladění pozice', 'brilo-blocks'), __nextHasNoMarginBottom: true, help: __('Ruční posun obrázku navíc k vybrané pozici.', 'brilo-blocks'), children: [_jsx(UnitControl, { label: __('Posun X', 'brilo-blocks'), value: offsetX, units: DECORATION_OFFSET_UNITS, onChange: (next) => { var _a; return update({ offsetX: (_a = next) !== null && _a !== void 0 ? _a : DECORATION_OFFSET_DEFAULT }); } }), _jsx(UnitControl, { label: __('Posun Y', 'brilo-blocks'), value: offsetY, units: DECORATION_OFFSET_UNITS, onChange: (next) => { var _a; return update({ offsetY: (_a = next) !== null && _a !== void 0 ? _a : DECORATION_OFFSET_DEFAULT }); } })] })] }))] }));
 }
+function BackgroundImageControl({ value, onChange }) {
+    var _a, _b;
+    var _c, _d, _e;
+    const { paletteColors } = useTenantColorPalette();
+    const img = value === null || value === void 0 ? void 0 : value.img;
+    const fit = (_c = value === null || value === void 0 ? void 0 : value.fit) !== null && _c !== void 0 ? _c : 'cover';
+    const position = (_d = value === null || value === void 0 ? void 0 : value.position) !== null && _d !== void 0 ? _d : 'center center';
+    const overlayColor = (_a = value === null || value === void 0 ? void 0 : value.overlay) === null || _a === void 0 ? void 0 : _a.color;
+    const overlayOpacity = (_e = (_b = value === null || value === void 0 ? void 0 : value.overlay) === null || _b === void 0 ? void 0 : _b.opacity) !== null && _e !== void 0 ? _e : BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT;
+    const update = (patch) => onChange({ img, fit, position, overlay: value === null || value === void 0 ? void 0 : value.overlay, ...value, ...patch });
+    const handleSelect = (media) => {
+        var _a;
+        const nextImg = { id: media.id, src: media.url, alt: (_a = media.alt) !== null && _a !== void 0 ? _a : '', width: media.width, height: media.height };
+        update({ img: nextImg });
+    };
+    const handleRemove = () => onChange(undefined);
+    return (_jsxs(BaseControl, { label: __('Obrázek pozadí', 'brilo-blocks'), __nextHasNoMarginBottom: true, children: [_jsx(MediaUploadCheck, { children: _jsx(MediaUpload, { onSelect: handleSelect, allowedTypes: ['image'], value: (img === null || img === void 0 ? void 0 : img.id) || 0, render: ({ open }) => (_jsxs(PanelRow, { children: [(img === null || img === void 0 ? void 0 : img.src) && _jsx("img", { src: img.src, alt: img.alt, style: { maxWidth: 48, maxHeight: 48, objectFit: 'contain' } }), _jsx(Button, { onClick: open, variant: "secondary", size: "small", children: (img === null || img === void 0 ? void 0 : img.src) ? __('Změnit', 'brilo-blocks') : __('Vybrat obrázek', 'brilo-blocks') }), !!(img === null || img === void 0 ? void 0 : img.src) && (_jsx(Button, { onClick: handleRemove, variant: "tertiary", size: "small", isDestructive: true, children: __('Odebrat', 'brilo-blocks') }))] })) }) }), !!(img === null || img === void 0 ? void 0 : img.src) && (_jsxs(_Fragment, { children: [_jsx(ToggleGroupControl, { label: __('Přizpůsobení', 'brilo-blocks'), value: fit, onChange: (next) => update({ fit: next }), isBlock: true, children: BACKGROUND_IMAGE_FITS.map((f) => (_jsx(ToggleGroupControlOption, { value: f.value, label: f.label }, f.value))) }), _jsx(SelectControl, { label: __('Pozice', 'brilo-blocks'), value: position, options: [...BACKGROUND_IMAGE_POSITIONS], onChange: (next) => update({ position: next }) }), _jsxs(BaseControl, { label: __('Překryv barvou', 'brilo-blocks'), __nextHasNoMarginBottom: true, help: __('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks'), children: [_jsx(ColorPalette, { colors: paletteColors, value: overlayColor || undefined, onChange: (next) => update({ overlay: { color: next !== null && next !== void 0 ? next : undefined, opacity: overlayOpacity } }) }), !!overlayColor && (_jsx(RangeControl, { label: __('Krytí překryvu', 'brilo-blocks'), value: overlayOpacity, min: 0, max: 100, onChange: (next) => update({ overlay: { color: overlayColor, opacity: next !== null && next !== void 0 ? next : BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT } }) }))] })] }))] }));
+}
 export function BaseControls({ attributes, setAttributes, exclude }) {
     var _a;
-    const { id, spacing, background, textColor, decoration, decorations } = attributes;
+    const { id, spacing, background, textColor, decoration, decorations, backgroundImage } = attributes;
     const { paletteColors, resolveHex } = useTenantColorPalette();
     const fluid = (_a = decorations === null || decorations === void 0 ? void 0 : decorations.fluid) !== null && _a !== void 0 ? _a : {};
     const setFluid = (position, value) => {
         const nextFluid = { ...fluid, [position]: value };
         setAttributes({ decorations: { ...decorations, fluid: nextFluid } });
     };
-    return (_jsxs(_Fragment, { children: [!exclude.includes('spacing') && (_jsxs(PanelBody, { title: __('Rozestupy', 'brilo-blocks'), children: [_jsx(SelectControl, { label: __('Pozice', 'brilo-blocks'), value: spacing.position, options: [...SPACING_POSITIONS], onChange: (value) => setAttributes({ spacing: { ...spacing, position: value } }) }), _jsx(ToggleGroupControl, { label: __('Velikost', 'brilo-blocks'), value: spacing.size, onChange: (value) => setAttributes({ spacing: { ...spacing, size: value } }), isBlock: true, children: SPACING_SIZES.map((s) => (_jsx(ToggleGroupControlOption, { value: s, label: s === 'default' ? __('Výchozí', 'brilo-blocks') : s.toUpperCase() }, s))) })] })), !exclude.includes('background') && (_jsxs(PanelBody, { title: __('Barvy', 'brilo-blocks'), children: [_jsx("p", { children: __('Pozadí', 'brilo-blocks') }), _jsx(ColorPalette, { colors: paletteColors, value: background || undefined, onChange: (value) => setAttributes({ background: value !== null && value !== void 0 ? value : '' }) }), _jsx("p", { children: __('Barva textu', 'brilo-blocks') }), _jsx(ColorPalette, { colors: paletteColors, value: textColor || undefined, onChange: (value) => setAttributes({ textColor: value !== null && value !== void 0 ? value : '' }) }), !!background && !!textColor && _jsx(ContrastChecker, { backgroundColor: resolveHex(background), textColor: resolveHex(textColor) })] })), !exclude.includes('decoration') && (_jsx(PanelBody, { title: __('Dekorace', 'brilo-blocks'), initialOpen: false, children: _jsx(DecorationControl, { value: decoration, onChange: (value) => setAttributes({ decoration: value !== null && value !== void 0 ? value : {} }) }) })), !exclude.includes('decorations') && (_jsxs(PanelBody, { title: __('Fluidní dekorace', 'brilo-blocks'), initialOpen: false, children: [_jsx(FluidDecorationControl, { label: __('Nahoře', 'brilo-blocks'), value: fluid.top, onChange: (value) => setFluid('top', value) }), _jsx(FluidDecorationControl, { label: __('Dole', 'brilo-blocks'), value: fluid.bottom, onChange: (value) => setFluid('bottom', value) })] })), !exclude.includes('id') && (_jsx(PanelBody, { title: __('Kotva', 'brilo-blocks'), initialOpen: false, children: _jsx(TextControl, { label: __('ID sekce', 'brilo-blocks'), value: id !== null && id !== void 0 ? id : '', onChange: (value) => setAttributes({ id: value }), help: __('Použije se jako HTML atribut id pro kotevní odkaz.', 'brilo-blocks') }) }))] }));
+    return (_jsxs(_Fragment, { children: [!exclude.includes('spacing') && (_jsxs(PanelBody, { title: __('Rozestupy', 'brilo-blocks'), children: [_jsx(SelectControl, { label: __('Pozice', 'brilo-blocks'), value: spacing.position, options: [...SPACING_POSITIONS], onChange: (value) => setAttributes({ spacing: { ...spacing, position: value } }) }), _jsx(ToggleGroupControl, { label: __('Velikost', 'brilo-blocks'), value: spacing.size, onChange: (value) => setAttributes({ spacing: { ...spacing, size: value } }), isBlock: true, children: SPACING_SIZES.map((s) => (_jsx(ToggleGroupControlOption, { value: s, label: s === 'default' ? __('Výchozí', 'brilo-blocks') : s.toUpperCase() }, s))) })] })), !exclude.includes('background') && (_jsxs(PanelBody, { title: __('Barvy', 'brilo-blocks'), children: [_jsx("p", { children: __('Pozadí', 'brilo-blocks') }), _jsx(ColorPalette, { colors: paletteColors, value: background || undefined, onChange: (value) => setAttributes({ background: value !== null && value !== void 0 ? value : '' }) }), _jsx("p", { children: __('Barva textu', 'brilo-blocks') }), _jsx(ColorPalette, { colors: paletteColors, value: textColor || undefined, onChange: (value) => setAttributes({ textColor: value !== null && value !== void 0 ? value : '' }) }), !!background && !!textColor && _jsx(ContrastChecker, { backgroundColor: resolveHex(background), textColor: resolveHex(textColor) })] })), !exclude.includes('backgroundImage') && (_jsx(PanelBody, { title: __('Obrázek pozadí', 'brilo-blocks'), initialOpen: false, children: _jsx(BackgroundImageControl, { value: backgroundImage, onChange: (value) => setAttributes({ backgroundImage: value !== null && value !== void 0 ? value : {} }) }) })), !exclude.includes('decoration') && (_jsx(PanelBody, { title: __('Dekorace', 'brilo-blocks'), initialOpen: false, children: _jsx(DecorationControl, { value: decoration, onChange: (value) => setAttributes({ decoration: value !== null && value !== void 0 ? value : {} }) }) })), !exclude.includes('decorations') && (_jsxs(PanelBody, { title: __('Fluidní dekorace', 'brilo-blocks'), initialOpen: false, children: [_jsx(FluidDecorationControl, { label: __('Nahoře', 'brilo-blocks'), value: fluid.top, onChange: (value) => setFluid('top', value) }), _jsx(FluidDecorationControl, { label: __('Dole', 'brilo-blocks'), value: fluid.bottom, onChange: (value) => setFluid('bottom', value) })] })), !exclude.includes('id') && (_jsx(PanelBody, { title: __('Kotva', 'brilo-blocks'), initialOpen: false, children: _jsx(TextControl, { label: __('ID sekce', 'brilo-blocks'), value: id !== null && id !== void 0 ? id : '', onChange: (value) => setAttributes({ id: value }), help: __('Použije se jako HTML atribut id pro kotevní odkaz.', 'brilo-blocks') }) }))] }));
 }

package/build/blocks/sections/base-section/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/edit.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAGpE,wBAAgB,qBAAqB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,kBAAkB,CAAC,MAAM,CAAC,WAG3G,cAAc,CAAC,mBAAmB,GAAG,MAAM,CAAC,iCAiCzE"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/edit.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAGpE,wBAAgB,qBAAqB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,kBAAkB,CAAC,MAAM,CAAC,WAG3G,cAAc,CAAC,mBAAmB,GAAG,MAAM,CAAC,iCAgDzE"}

package/build/blocks/sections/base-section/edit.js

@@ -5,15 +5,31 @@ export function createBaseSectionEdit(options) {
     var _a;
     const EXCLUDE = (_a = options.exclude) !== null && _a !== void 0 ? _a : [];
     return function Edit(props) {
-        var _a;
+        var _a, _b;
+        var _c, _d;
         const { attributes, setAttributes } = props;
-        const { background, textColor, gradient } = attributes;
+        const { background, textColor, gradient, backgroundImage } = attributes;
+        const bgImageSrc = (_a = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.img) === null || _a === void 0 ? void 0 : _a.src;
+        // A plain background-color/gradient always paints behind an image, so it can never tint it. To preview a
+        // translucent color/gradient sitting on top of the image (matching frontend), stack it as its own layer
+        // in front of the `url(...)` layer instead of setting backgroundColor separately.
+        const tintLayer = background ? `linear-gradient(${background}, ${background})` : gradient;
         const blockProps = useBlockProps({
             className: options.blockClassName,
             style: {
-                ...(background ? { backgroundColor: background, padding: '16px' } : {}),
-                ...(gradient ? { background: gradient, padding: '16px' } : {}),
+                position: 'relative',
+                ...(background && !bgImageSrc ? { backgroundColor: background, padding: '16px' } : {}),
+                ...(gradient && !bgImageSrc ? { background: gradient, padding: '16px' } : {}),
                 ...(textColor ? { color: textColor } : {}),
+                ...(bgImageSrc
+                    ? {
+                        backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
+                        backgroundSize: [tintLayer ? '100% 100%' : null, (_c = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.fit) !== null && _c !== void 0 ? _c : 'cover'].filter(Boolean).join(', '),
+                        backgroundPosition: [tintLayer ? 'center center' : null, (_d = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.position) !== null && _d !== void 0 ? _d : 'center center'].filter(Boolean).join(', '),
+                        backgroundRepeat: 'no-repeat',
+                        padding: '16px',
+                    }
+                    : {}),
             },
         });
         const innerBlocksProps = useInnerBlocksProps({ className: options.containerClassName }, {
@@ -21,6 +37,6 @@ export function createBaseSectionEdit(options) {
             orientation: 'vertical',
             layout: { type: 'default' },
         });
-        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsx(BaseControls, { attributes: attributes, setAttributes: setAttributes, exclude: EXCLUDE }), (_a = options.extraControls) === null || _a === void 0 ? void 0 : _a.call(options, props)] }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsx(BaseControls, { attributes: attributes, setAttributes: setAttributes, exclude: EXCLUDE }), (_b = options.extraControls) === null || _b === void 0 ? void 0 : _b.call(options, props)] }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
     };
 }

package/build/blocks/sections/base-section/types.d.ts

@@ -25,6 +25,18 @@ export interface Decoration {
     offsetX?: string;
     offsetY?: string;
 }
+export type BackgroundImageFit = 'cover' | 'contain';
+export type BackgroundImagePosition = 'left top' | 'center top' | 'right top' | 'left center' | 'center center' | 'right center' | 'left bottom' | 'center bottom' | 'right bottom';
+export interface BackgroundImageOverlay {
+    color?: string;
+    opacity?: number;
+}
+export interface BackgroundImage {
+    img?: FluidDecorationImage;
+    fit?: BackgroundImageFit;
+    position?: BackgroundImagePosition;
+    overlay?: BackgroundImageOverlay;
+}
 export interface BaseBlockAttributes extends Record<string, unknown> {
     id: string;
     spacing: {
@@ -40,8 +52,9 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
             bottom?: FluidDecoration;
         };
     };
+    backgroundImage: BackgroundImage;
 }
-export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations' | 'decoration';
+export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations' | 'decoration' | 'backgroundImage';
 export interface BaseSectionOptions<TExtra extends Record<string, unknown> = Record<string, never>> extends BriloBlockType {
     supports?: BlockConfiguration['supports'];
     extraAttributes?: {

package/build/blocks/sections/base-section/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,oBAAoB,CAAA;IAC1B,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,CAAA;AAC3H,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAC/C,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEzD,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,eAAe,CAAA;IACrB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE;QACP,QAAQ,EAAE,MAAM,CAAA;QAChB,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,UAAU,CAAA;IACtB,WAAW,EAAE;QACX,KAAK,CAAC,EAAE;YACN,GAAG,CAAC,EAAE,eAAe,CAAA;YACrB,MAAM,CAAC,EAAE,eAAe,CAAA;SACzB,CAAA;KACF,CAAA;CACF;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,YAAY,GAAG,IAAI,GAAG,aAAa,GAAG,YAAY,CAAA;AAE/F,MAAM,WAAW,kBAAkB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAE,SAAQ,cAAc;IACxH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAA;IACzC,eAAe,CAAC,EAAE;SACf,CAAC,IAAI,MAAM,MAAM,GAAG;YACnB,IAAI,EAAE,MAAM,CAAA;YACZ,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;SACnB;KACF,CAAA;IACD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,mBAAmB,GAAG,MAAM,CAAC,KAAK,SAAS,CAAA;IAClF,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC/B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/types.ts"],"names":[],"mappings":"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"}

package/package.json

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

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

@@ -26,4 +26,11 @@ export const baseAttributes = {
     type: 'object',
     default: {},
   },
+  backgroundImage: {
+    type: 'object',
+    default: {
+      fit: 'cover',
+      position: 'center center',
+    },
+  },
 } as const

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

@@ -54,3 +54,22 @@ export const DECORATION_OFFSET_UNITS = [
   {value: 'rem', label: 'rem', default: 0},
   {value: '%', label: '%', default: 0},
 ]
+
+export const BACKGROUND_IMAGE_FITS = [
+  {value: 'cover', label: __('Vyplnit (cover)', 'brilo-blocks')},
+  {value: 'contain', label: __('Celý obrázek (contain)', 'brilo-blocks')},
+] as const
+
+export const BACKGROUND_IMAGE_POSITIONS = [
+  {value: 'left top', label: __('Vlevo nahoře', 'brilo-blocks')},
+  {value: 'center top', label: __('Nahoře', 'brilo-blocks')},
+  {value: 'right top', label: __('Vpravo nahoře', 'brilo-blocks')},
+  {value: 'left center', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center center', label: __('Uprostřed', 'brilo-blocks')},
+  {value: 'right center', label: __('Vpravo', 'brilo-blocks')},
+  {value: 'left bottom', label: __('Vlevo dole', 'brilo-blocks')},
+  {value: 'center bottom', label: __('Dole', 'brilo-blocks')},
+  {value: 'right bottom', label: __('Vpravo dole', 'brilo-blocks')},
+] as const
+
+export const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40

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

@@ -5,6 +5,7 @@ import {
   ButtonGroup,
   PanelBody,
   PanelRow,
+  RangeControl,
   SelectControl,
   TextControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -14,6 +15,9 @@ import {
 import {__} from '@wordpress/i18n'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import type {
+  BackgroundImage,
+  BackgroundImageFit,
+  BackgroundImagePosition,
   BaseBlockAttributes,
   Decoration,
   DecorationDepth,
@@ -25,6 +29,9 @@ import type {
   FluidDecorationImage,
 } from './types'
 import {
+  BACKGROUND_IMAGE_FITS,
+  BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT,
+  BACKGROUND_IMAGE_POSITIONS,
   DECORATION_DEPTHS,
   DECORATION_MAX_WIDTH_DEFAULT,
   DECORATION_MAX_WIDTH_UNITS,
@@ -217,6 +224,93 @@ function DecorationControl({value, onChange}: DecorationControlProps) {
   )
 }
 
+interface BackgroundImageControlProps {
+  value?: BackgroundImage
+  onChange: (value: BackgroundImage | undefined) => void
+}
+
+function BackgroundImageControl({value, onChange}: BackgroundImageControlProps) {
+  const {paletteColors} = useTenantColorPalette()
+  const img = value?.img
+  const fit = value?.fit ?? 'cover'
+  const position = value?.position ?? 'center center'
+  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 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}
+    update({img: nextImg})
+  }
+
+  const handleRemove = () => onChange(undefined)
+
+  return (
+    <BaseControl label={__('Obrázek pozadí', 'brilo-blocks')} __nextHasNoMarginBottom>
+      <MediaUploadCheck>
+        <MediaUpload
+          onSelect={handleSelect}
+          allowedTypes={['image']}
+          value={img?.id || 0}
+          render={({open}: {open: () => void}) => (
+            <PanelRow>
+              {img?.src && <img src={img.src} alt={img.alt} style={{maxWidth: 48, maxHeight: 48, objectFit: 'contain'}} />}
+              <Button onClick={open} variant="secondary" size="small">
+                {img?.src ? __('Změnit', 'brilo-blocks') : __('Vybrat obrázek', 'brilo-blocks')}
+              </Button>
+              {!!img?.src && (
+                <Button onClick={handleRemove} variant="tertiary" size="small" isDestructive>
+                  {__('Odebrat', 'brilo-blocks')}
+                </Button>
+              )}
+            </PanelRow>
+          )}
+        />
+      </MediaUploadCheck>
+
+      {!!img?.src && (
+        <>
+          <ToggleGroupControl
+            label={__('Přizpůsobení', 'brilo-blocks')}
+            value={fit}
+            onChange={(next) => update({fit: next as BackgroundImageFit})}
+            isBlock
+          >
+            {BACKGROUND_IMAGE_FITS.map((f) => (
+              <ToggleGroupControlOption key={f.value} value={f.value} label={f.label} />
+            ))}
+          </ToggleGroupControl>
+
+          <SelectControl<string>
+            label={__('Pozice', 'brilo-blocks')}
+            value={position}
+            options={[...BACKGROUND_IMAGE_POSITIONS]}
+            onChange={(next) => update({position: next as BackgroundImagePosition})}
+          />
+
+          <BaseControl label={__('Překryv barvou', 'brilo-blocks')} __nextHasNoMarginBottom help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}>
+            <ColorPalette
+              colors={paletteColors}
+              value={overlayColor || undefined}
+              onChange={(next) => update({overlay: {color: next ?? undefined, opacity: overlayOpacity}})}
+            />
+            {!!overlayColor && (
+              <RangeControl
+                label={__('Krytí překryvu', 'brilo-blocks')}
+                value={overlayOpacity}
+                min={0}
+                max={100}
+                onChange={(next) => update({overlay: {color: overlayColor, opacity: next ?? BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT}})}
+              />
+            )}
+          </BaseControl>
+        </>
+      )}
+    </BaseControl>
+  )
+}
+
 type SpacingPosition = BaseBlockAttributes['spacing']['position']
 type SpacingSize = BaseBlockAttributes['spacing']['size']
 
@@ -227,7 +321,7 @@ interface BaseControlsProps {
 }
 
 export function BaseControls({attributes, setAttributes, exclude}: BaseControlsProps) {
-  const {id, spacing, background, textColor, decoration, decorations} = attributes
+  const {id, spacing, background, textColor, decoration, decorations, backgroundImage} = attributes
   const {paletteColors, resolveHex} = useTenantColorPalette()
   const fluid = decorations?.fluid ?? {}
 
@@ -277,6 +371,12 @@ export function BaseControls({attributes, setAttributes, exclude}: BaseControlsP
         </PanelBody>
       )}
 
+      {!exclude.includes('backgroundImage') && (
+        <PanelBody title={__('Obrázek pozadí', 'brilo-blocks')} initialOpen={false}>
+          <BackgroundImageControl value={backgroundImage} onChange={(value) => setAttributes({backgroundImage: value ?? {}})} />
+        </PanelBody>
+      )}
+
       {!exclude.includes('decoration') && (
         <PanelBody title={__('Dekorace', 'brilo-blocks')} initialOpen={false}>
           <DecorationControl value={decoration} onChange={(value) => setAttributes({decoration: value ?? {}})} />

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

@@ -1,5 +1,6 @@
 import {InspectorControls, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
 import type {BlockEditProps} from '@wordpress/blocks'
+import type {CSSProperties} from 'react'
 import type {BaseBlockAttributes, BaseSectionOptions} from './types'
 import {BaseControls} from './controls'
 
@@ -8,13 +9,28 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
 
   return function Edit(props: BlockEditProps<BaseBlockAttributes & TExtra>) {
     const {attributes, setAttributes} = props
-    const {background, textColor, gradient} = attributes as BaseBlockAttributes & {gradient?: string}
+    const {background, textColor, gradient, backgroundImage} = attributes as BaseBlockAttributes & {gradient?: string}
+    const bgImageSrc = backgroundImage?.img?.src
+    // A plain background-color/gradient always paints behind an image, so it can never tint it. To preview a
+    // translucent color/gradient sitting on top of the image (matching frontend), stack it as its own layer
+    // in front of the `url(...)` layer instead of setting backgroundColor separately.
+    const tintLayer = background ? `linear-gradient(${background}, ${background})` : gradient
     const blockProps = useBlockProps({
       className: options.blockClassName,
       style: {
-        ...(background ? {backgroundColor: background, padding: '16px'} : {}),
-        ...(gradient ? {background: gradient, padding: '16px'} : {}),
+        position: 'relative' as CSSProperties['position'],
+        ...(background && !bgImageSrc ? {backgroundColor: background, padding: '16px'} : {}),
+        ...(gradient && !bgImageSrc ? {background: gradient, padding: '16px'} : {}),
         ...(textColor ? {color: textColor} : {}),
+        ...(bgImageSrc
+          ? {
+              backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
+              backgroundSize: [tintLayer ? '100% 100%' : null, backgroundImage?.fit ?? 'cover'].filter(Boolean).join(', '),
+              backgroundPosition: [tintLayer ? 'center center' : null, backgroundImage?.position ?? 'center center'].filter(Boolean).join(', '),
+              backgroundRepeat: 'no-repeat',
+              padding: '16px',
+            }
+          : {}),
       },
     })
     const innerBlocksProps = useInnerBlocksProps({className: options.containerClassName}, {

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

@@ -31,6 +31,25 @@ export interface Decoration {
   offsetY?: string
 }
 
+export type BackgroundImageFit = 'cover' | 'contain'
+
+export type BackgroundImagePosition =
+  | 'left top' | 'center top' | 'right top'
+  | 'left center' | 'center center' | 'right center'
+  | 'left bottom' | 'center bottom' | 'right bottom'
+
+export interface BackgroundImageOverlay {
+  color?: string
+  opacity?: number
+}
+
+export interface BackgroundImage {
+  img?: FluidDecorationImage
+  fit?: BackgroundImageFit
+  position?: BackgroundImagePosition
+  overlay?: BackgroundImageOverlay
+}
+
 export interface BaseBlockAttributes extends Record<string, unknown> {
   id: string
   spacing: {
@@ -46,9 +65,10 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
       bottom?: FluidDecoration
     }
   }
+  backgroundImage: BackgroundImage
 }
 
-export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations' | 'decoration'
+export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations' | 'decoration' | 'backgroundImage'
 
 export interface BaseSectionOptions<TExtra extends Record<string, unknown> = Record<string, never>> extends BriloBlockType {
   supports?: BlockConfiguration['supports']