@brilo/base-blocks 0.1.46 → 0.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/build/.tsbuildinfo +1 -1
  2. package/build/blocks/sections/base-section/constants.d.ts +1 -0
  3. package/build/blocks/sections/base-section/constants.d.ts.map +1 -1
  4. package/build/blocks/sections/base-section/constants.js +1 -0
  5. package/build/blocks/sections/base-section/controls.d.ts.map +1 -1
  6. package/build/blocks/sections/base-section/controls.js +4 -3
  7. package/build/blocks/sections/base-section/edit.d.ts.map +1 -1
  8. package/build/blocks/sections/base-section/edit.js +23 -24
  9. package/build/blocks/sections/base-section/types.d.ts +1 -0
  10. package/build/blocks/sections/base-section/types.d.ts.map +1 -1
  11. package/package.json +1 -1
  12. package/src/blocks/sections/base-section/constants.ts +2 -0
  13. package/src/blocks/sections/base-section/controls.tsx +10 -0
  14. package/src/blocks/sections/base-section/edit.tsx +24 -22
  15. package/src/blocks/sections/base-section/types.ts +1 -0
package/build/blocks/sections/base-section/constants.d.ts CHANGED
@@ -138,4 +138,5 @@ export declare const BACKGROUND_IMAGE_POSITIONS: readonly [{
138
138
  readonly label: import("@wordpress/i18n").TransformedText<"Vpravo dole">;
139
139
  }];
140
140
  export declare const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40;
141
+ export declare const BACKGROUND_IMAGE_OPACITY_DEFAULT = 100;
141
142
  //# sourceMappingURL=constants.d.ts.map
package/build/blocks/sections/base-section/constants.d.ts.map CHANGED
@@ -1 +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;AAED,eAAO,MAAM,qBAAqB;aAC/B,KAAK,EAAE,OAAO;aAAE,KAAK;;aACrB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,QAAQ;aAAE,KAAK;EACf,CAAA;AAEV,eAAO,MAAM,qBAAqB;oBAAY,MAAM;;;oBAL1C,OAAO;;;oBACP,SAAS;;;oBACT,QAAQ;;EAGyH,CAAA;AAE3I,eAAO,MAAM,mCAAmC,SAAS,CAAA;AAEzD,eAAO,MAAM,2BAA2B;;;;GAA4C,CAAA;AAEpF,eAAO,MAAM,wBAAwB;aAClC,KAAK,EAAE,WAAW;aAAE,KAAK;;aACzB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,QAAQ;aAAE,KAAK;EACf,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"}
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;AAED,eAAO,MAAM,qBAAqB;aAC/B,KAAK,EAAE,OAAO;aAAE,KAAK;;aACrB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,QAAQ;aAAE,KAAK;EACf,CAAA;AAEV,eAAO,MAAM,qBAAqB;oBAAY,MAAM;;;oBAL1C,OAAO;;;oBACP,SAAS;;;oBACT,QAAQ;;EAGyH,CAAA;AAE3I,eAAO,MAAM,mCAAmC,SAAS,CAAA;AAEzD,eAAO,MAAM,2BAA2B;;;;GAA4C,CAAA;AAEpF,eAAO,MAAM,wBAAwB;aAClC,KAAK,EAAE,WAAW;aAAE,KAAK;;aACzB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,UAAU;aAAE,KAAK;;aACxB,KAAK,EAAE,QAAQ;aAAE,KAAK;EACf,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;AAE1D,eAAO,MAAM,gCAAgC,MAAM,CAAA"}
package/build/blocks/sections/base-section/constants.js CHANGED
@@ -68,3 +68,4 @@ export const BACKGROUND_IMAGE_POSITIONS = [
68
68
  { value: 'right bottom', label: __('Vpravo dole', 'brilo-blocks') },
69
69
  ];
70
70
  export const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40;
71
+ export const BACKGROUND_IMAGE_OPACITY_DEFAULT = 100;
package/build/blocks/sections/base-section/controls.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/controls.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAKV,mBAAmB,EAOnB,kBAAkB,EAInB,MAAM,SAAS,CAAA;AAobhB,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,+BAkHnF"}
1
+ {"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/controls.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAKV,mBAAmB,EAOnB,kBAAkB,EAInB,MAAM,SAAS,CAAA;AA8bhB,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,+BAkHnF"}
package/build/blocks/sections/base-section/controls.js CHANGED
@@ -3,7 +3,7 @@ import { ColorPalette, ContrastChecker, MediaUpload, MediaUploadCheck } from '@w
3
3
  import { BaseControl, Button, ButtonGroup, PanelBody, PanelRow, RangeControl, SelectControl, TextControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, } from '@wordpress/components';
4
4
  import { __ } from '@wordpress/i18n';
5
5
  import { useTenantColorPalette } from '../../../hooks/useTenantColorPalette';
6
- 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, DECORATION_OFFSET_DEFAULT, DECORATION_OFFSET_UNITS, DECORATION_POSITIONS, DECORATION_TRANSLATES, FLUID_DECORATION_DEFAULT_HEIGHT, FLUID_DECORATION_FITS, FLUID_DECORATION_HEIGHT_PRESETS, FLUID_DECORATION_UNITS, SPACING_POSITIONS, SPACING_SIZES, } from './constants';
6
+ import { BACKGROUND_IMAGE_FITS, BACKGROUND_IMAGE_OPACITY_DEFAULT, 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, DECORATION_OFFSET_DEFAULT, DECORATION_OFFSET_UNITS, DECORATION_POSITIONS, DECORATION_TRANSLATES, FLUID_DECORATION_DEFAULT_HEIGHT, FLUID_DECORATION_FITS, FLUID_DECORATION_HEIGHT_PRESETS, FLUID_DECORATION_UNITS, SPACING_POSITIONS, SPACING_SIZES, } from './constants';
7
7
  // Shared shape behind every control's `update(patch)`: fill in defaults, layer the current
8
8
  // value on top, then the patch — so a patch only needs to name the field(s) actually changing.
9
9
  function mergeUpdate(defaults, value, patch) {
@@ -48,7 +48,7 @@ function DecorationControl({ value, onChange }) {
48
48
  }
49
49
  function BackgroundImageControl({ value, onChange }) {
50
50
  var _a, _b;
51
- var _c, _d, _e, _f, _g;
51
+ var _c, _d, _e, _f, _g, _h;
52
52
  const { paletteColors } = useTenantColorPalette();
53
53
  const img = value === null || value === void 0 ? void 0 : value.img;
54
54
  const fit = (_c = value === null || value === void 0 ? void 0 : value.fit) !== null && _c !== void 0 ? _c : 'cover';
@@ -57,6 +57,7 @@ function BackgroundImageControl({ value, onChange }) {
57
57
  const repeat = (_f = value === null || value === void 0 ? void 0 : value.repeat) !== null && _f !== void 0 ? _f : 'no-repeat';
58
58
  const overlayColor = (_a = value === null || value === void 0 ? void 0 : value.overlay) === null || _a === void 0 ? void 0 : _a.color;
59
59
  const overlayOpacity = (_g = (_b = value === null || value === void 0 ? void 0 : value.overlay) === null || _b === void 0 ? void 0 : _b.opacity) !== null && _g !== void 0 ? _g : BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT;
60
+ const opacity = (_h = value === null || value === void 0 ? void 0 : value.opacity) !== null && _h !== void 0 ? _h : BACKGROUND_IMAGE_OPACITY_DEFAULT;
60
61
  const update = (patch) => onChange(mergeUpdate({ img, fit, position, repeat, overlay: value === null || value === void 0 ? void 0 : value.overlay }, value, patch));
61
62
  const handleSelect = (media) => {
62
63
  var _a;
@@ -64,7 +65,7 @@ function BackgroundImageControl({ value, onChange }) {
64
65
  update({ img: nextImg });
65
66
  };
66
67
  const handleRemove = () => onChange(undefined);
67
- 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))) }), fit === 'custom' && (_jsx(UnitControl, { label: __('Velikost', 'brilo-blocks'), value: sizeValue, units: BACKGROUND_IMAGE_SIZE_UNITS, onChange: (next) => { var _a; return update({ sizeValue: (_a = next) !== null && _a !== void 0 ? _a : BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT }); } })), _jsx(SelectControl, { label: __('Pozice', 'brilo-blocks'), value: position, options: [...BACKGROUND_IMAGE_POSITIONS], onChange: (next) => update({ position: next }) }), _jsx(SelectControl, { label: __('Opakování', 'brilo-blocks'), value: repeat, options: [...BACKGROUND_IMAGE_REPEATS], onChange: (next) => update({ repeat: next }) }), _jsxs(BaseControl, { label: __('Překryv barvou', 'brilo-blocks'), 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 } }) }))] })] }))] }));
68
+ 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))) }), fit === 'custom' && (_jsx(UnitControl, { label: __('Velikost', 'brilo-blocks'), value: sizeValue, units: BACKGROUND_IMAGE_SIZE_UNITS, onChange: (next) => { var _a; return update({ sizeValue: (_a = next) !== null && _a !== void 0 ? _a : BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT }); } })), _jsx(SelectControl, { label: __('Pozice', 'brilo-blocks'), value: position, options: [...BACKGROUND_IMAGE_POSITIONS], onChange: (next) => update({ position: next }) }), _jsx(SelectControl, { label: __('Opakování', 'brilo-blocks'), value: repeat, options: [...BACKGROUND_IMAGE_REPEATS], onChange: (next) => update({ repeat: next }) }), _jsx(RangeControl, { label: __('Průhlednost obrázku', 'brilo-blocks'), value: opacity, min: 0, max: 100, onChange: (next) => update({ opacity: next !== null && next !== void 0 ? next : BACKGROUND_IMAGE_OPACITY_DEFAULT }) }), _jsxs(BaseControl, { label: __('Překryv barvou', 'brilo-blocks'), 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 } }) }))] })] }))] }));
68
69
  }
69
70
  const BORDER_STYLES = [
70
71
  { value: 'none', label: __('Žádný', 'brilo-blocks') },
package/build/blocks/sections/base-section/edit.d.ts.map CHANGED
@@ -1 +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;AAErD,OAAO,KAAK,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAIpE,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,iCAyDzE"}
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;AAErD,OAAO,KAAK,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAIpE,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,iCA2DzE"}
package/build/blocks/sections/base-section/edit.js CHANGED
@@ -1,19 +1,19 @@
1
1
  import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { InspectorControls, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
3
3
  import { BaseControls } from './controls';
4
- import { BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT } from './constants';
4
+ import { BACKGROUND_IMAGE_OPACITY_DEFAULT, BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT } from './constants';
5
5
  export function createBaseSectionEdit(options) {
6
6
  var _a;
7
7
  const EXCLUDE = (_a = options.exclude) !== null && _a !== void 0 ? _a : [];
8
8
  return function Edit(props) {
9
9
  var _a, _b;
10
- var _c, _d, _e, _f;
10
+ var _c, _d, _e, _f, _g;
11
11
  const { attributes, setAttributes } = props;
12
12
  const { background, textColor, gradient, backgroundImage } = attributes;
13
13
  const bgImageSrc = (_a = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.img) === null || _a === void 0 ? void 0 : _a.src;
14
- // A plain background-color/gradient always paints behind an image, so it can never tint it. To preview a
15
- // translucent color/gradient sitting on top of the image (matching frontend), stack it as its own layer
16
- // in front of the `url(...)` layer instead of setting backgroundColor separately.
14
+ // A plain background-color/gradient always paints behind an image, so it can never tint it.
15
+ // To preview it sitting on top of the image (matching frontend), it renders as its own
16
+ // absolutely-positioned layer, separate from the image layer below it and the content above.
17
17
  const tintLayer = background ? `linear-gradient(${background}, ${background})` : gradient;
18
18
  const blockProps = useBlockProps({
19
19
  className: options.blockClassName,
@@ -22,31 +22,30 @@ export function createBaseSectionEdit(options) {
22
22
  ...(background && !bgImageSrc ? { backgroundColor: background, padding: '16px' } : {}),
23
23
  ...(gradient && !bgImageSrc ? { background: gradient, padding: '16px' } : {}),
24
24
  ...(textColor ? { color: textColor } : {}),
25
- ...(bgImageSrc
26
- ? {
27
- backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
28
- backgroundSize: [
29
- tintLayer ? '100% 100%' : null,
30
- (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.fit) === 'custom'
31
- ? ((_c = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.sizeValue) !== null && _c !== void 0 ? _c : BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT)
32
- : ((_d = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.fit) !== null && _d !== void 0 ? _d : 'cover'),
33
- ]
34
- .filter(Boolean)
35
- .join(', '),
36
- backgroundPosition: [tintLayer ? 'center center' : null, (_e = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.position) !== null && _e !== void 0 ? _e : 'center center']
37
- .filter(Boolean)
38
- .join(', '),
39
- backgroundRepeat: [tintLayer ? 'no-repeat' : null, (_f = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.repeat) !== null && _f !== void 0 ? _f : 'no-repeat'].filter(Boolean).join(', '),
40
- padding: '16px',
41
- }
42
- : {}),
25
+ ...(bgImageSrc ? { padding: '16px' } : {}),
43
26
  },
44
27
  });
28
+ // Opacity applies to the image alone — it must live on its own layer, not on blockProps,
29
+ // or it would fade the section's inner content (headings, buttons, ...) along with it.
30
+ const bgImageLayerStyle = bgImageSrc
31
+ ? {
32
+ position: 'absolute',
33
+ inset: 0,
34
+ backgroundImage: `url(${bgImageSrc})`,
35
+ backgroundSize: (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.fit) === 'custom'
36
+ ? ((_c = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.sizeValue) !== null && _c !== void 0 ? _c : BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT)
37
+ : ((_d = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.fit) !== null && _d !== void 0 ? _d : 'cover'),
38
+ backgroundPosition: (_e = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.position) !== null && _e !== void 0 ? _e : 'center center',
39
+ backgroundRepeat: (_f = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.repeat) !== null && _f !== void 0 ? _f : 'no-repeat',
40
+ opacity: ((_g = backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.opacity) !== null && _g !== void 0 ? _g : BACKGROUND_IMAGE_OPACITY_DEFAULT) / 100,
41
+ }
42
+ : {};
43
+ const tintLayerStyle = tintLayer ? { position: 'absolute', inset: 0, background: tintLayer } : {};
45
44
  const innerBlocksProps = useInnerBlocksProps({ className: options.containerClassName }, {
46
45
  allowedBlocks: options.allowedBlocks,
47
46
  orientation: 'vertical',
48
47
  layout: { type: 'default' },
49
48
  });
50
- 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 }) })] }));
49
+ 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)] }), _jsxs("div", { ...blockProps, children: [!!bgImageSrc && _jsx("div", { style: bgImageLayerStyle }), !!bgImageSrc && !!tintLayer && _jsx("div", { style: tintLayerStyle }), _jsx("div", { ...innerBlocksProps })] })] }));
51
50
  };
52
51
  }
package/build/blocks/sections/base-section/types.d.ts CHANGED
@@ -44,6 +44,7 @@ export interface BackgroundImage {
44
44
  position?: BackgroundImagePosition;
45
45
  repeat?: BackgroundImageRepeat;
46
46
  overlay?: BackgroundImageOverlay;
47
+ opacity?: number;
47
48
  }
48
49
  export interface Border {
49
50
  top: {
package/build/blocks/sections/base-section/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/sections/base-section/types.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brilo/base-blocks",
3
- "version": "0.1.46",
3
+ "version": "0.1.47",
4
4
  "author": "Brilo",
5
5
  "main": "./build/index.js",
6
6
  "types": "./build/index.d.ts",
package/src/blocks/sections/base-section/constants.ts CHANGED
@@ -87,3 +87,5 @@ export const BACKGROUND_IMAGE_POSITIONS = [
87
87
  ] as const
88
88
 
89
89
  export const BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT = 40
90
+
91
+ export const BACKGROUND_IMAGE_OPACITY_DEFAULT = 100
package/src/blocks/sections/base-section/controls.tsx CHANGED
@@ -33,6 +33,7 @@ import type {
33
33
  } from './types'
34
34
  import {
35
35
  BACKGROUND_IMAGE_FITS,
36
+ BACKGROUND_IMAGE_OPACITY_DEFAULT,
36
37
  BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT,
37
38
  BACKGROUND_IMAGE_POSITIONS,
38
39
  BACKGROUND_IMAGE_REPEATS,
@@ -295,6 +296,7 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
295
296
  const repeat = value?.repeat ?? 'no-repeat'
296
297
  const overlayColor = value?.overlay?.color
297
298
  const overlayOpacity = value?.overlay?.opacity ?? BACKGROUND_IMAGE_OVERLAY_OPACITY_DEFAULT
299
+ const opacity = value?.opacity ?? BACKGROUND_IMAGE_OPACITY_DEFAULT
298
300
 
299
301
  const update = (patch: Partial<BackgroundImage>) =>
300
302
  onChange(mergeUpdate({img, fit, position, repeat, overlay: value?.overlay}, value, patch))
@@ -365,6 +367,14 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
365
367
  onChange={(next) => update({repeat: next as BackgroundImageRepeat})}
366
368
  />
367
369
 
370
+ <RangeControl
371
+ label={__('Průhlednost obrázku', 'brilo-blocks')}
372
+ value={opacity}
373
+ min={0}
374
+ max={100}
375
+ onChange={(next) => update({opacity: next ?? BACKGROUND_IMAGE_OPACITY_DEFAULT})}
376
+ />
377
+
368
378
  <BaseControl
369
379
  label={__('Překryv barvou', 'brilo-blocks')}
370
380
  help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}
package/src/blocks/sections/base-section/edit.tsx CHANGED
@@ -3,7 +3,7 @@ import type {BlockEditProps} from '@wordpress/blocks'
3
3
  import type {CSSProperties} from 'react'
4
4
  import type {BaseBlockAttributes, BaseSectionOptions} from './types'
5
5
  import {BaseControls} from './controls'
6
- import {BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT} from './constants'
6
+ import {BACKGROUND_IMAGE_OPACITY_DEFAULT, BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT} from './constants'
7
7
 
8
8
  export function createBaseSectionEdit<TExtra extends Record<string, unknown> = Record<string, never>>(options: BaseSectionOptions<TExtra>) {
9
9
  const EXCLUDE = options.exclude ?? []
@@ -12,9 +12,9 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
12
12
  const {attributes, setAttributes} = props
13
13
  const {background, textColor, gradient, backgroundImage} = attributes as BaseBlockAttributes & {gradient?: string}
14
14
  const bgImageSrc = backgroundImage?.img?.src
15
- // A plain background-color/gradient always paints behind an image, so it can never tint it. To preview a
16
- // translucent color/gradient sitting on top of the image (matching frontend), stack it as its own layer
17
- // in front of the `url(...)` layer instead of setting backgroundColor separately.
15
+ // A plain background-color/gradient always paints behind an image, so it can never tint it.
16
+ // To preview it sitting on top of the image (matching frontend), it renders as its own
17
+ // absolutely-positioned layer, separate from the image layer below it and the content above.
18
18
  const tintLayer = background ? `linear-gradient(${background}, ${background})` : gradient
19
19
  const blockProps = useBlockProps({
20
20
  className: options.blockClassName,
@@ -23,26 +23,26 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
23
23
  ...(background && !bgImageSrc ? {backgroundColor: background, padding: '16px'} : {}),
24
24
  ...(gradient && !bgImageSrc ? {background: gradient, padding: '16px'} : {}),
25
25
  ...(textColor ? {color: textColor} : {}),
26
- ...(bgImageSrc
27
- ? {
28
- backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
29
- backgroundSize: [
30
- tintLayer ? '100% 100%' : null,
31
- backgroundImage?.fit === 'custom'
32
- ? (backgroundImage?.sizeValue ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT)
33
- : (backgroundImage?.fit ?? 'cover'),
34
- ]
35
- .filter(Boolean)
36
- .join(', '),
37
- backgroundPosition: [tintLayer ? 'center center' : null, backgroundImage?.position ?? 'center center']
38
- .filter(Boolean)
39
- .join(', '),
40
- backgroundRepeat: [tintLayer ? 'no-repeat' : null, backgroundImage?.repeat ?? 'no-repeat'].filter(Boolean).join(', '),
41
- padding: '16px',
42
- }
43
- : {}),
26
+ ...(bgImageSrc ? {padding: '16px'} : {}),
44
27
  },
45
28
  })
29
+ // Opacity applies to the image alone — it must live on its own layer, not on blockProps,
30
+ // or it would fade the section's inner content (headings, buttons, ...) along with it.
31
+ const bgImageLayerStyle: CSSProperties = bgImageSrc
32
+ ? {
33
+ position: 'absolute',
34
+ inset: 0,
35
+ backgroundImage: `url(${bgImageSrc})`,
36
+ backgroundSize:
37
+ backgroundImage?.fit === 'custom'
38
+ ? (backgroundImage?.sizeValue ?? BACKGROUND_IMAGE_SIZE_VALUE_DEFAULT)
39
+ : (backgroundImage?.fit ?? 'cover'),
40
+ backgroundPosition: backgroundImage?.position ?? 'center center',
41
+ backgroundRepeat: backgroundImage?.repeat ?? 'no-repeat',
42
+ opacity: (backgroundImage?.opacity ?? BACKGROUND_IMAGE_OPACITY_DEFAULT) / 100,
43
+ }
44
+ : {}
45
+ const tintLayerStyle: CSSProperties = tintLayer ? {position: 'absolute', inset: 0, background: tintLayer} : {}
46
46
  const innerBlocksProps = useInnerBlocksProps({className: options.containerClassName}, {
47
47
  allowedBlocks: options.allowedBlocks,
48
48
  orientation: 'vertical',
@@ -60,6 +60,8 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
60
60
  {options.extraControls?.(props)}
61
61
  </InspectorControls>
62
62
  <div {...blockProps}>
63
+ {!!bgImageSrc && <div style={bgImageLayerStyle} />}
64
+ {!!bgImageSrc && !!tintLayer && <div style={tintLayerStyle} />}
63
65
  <div {...innerBlocksProps} />
64
66
  </div>
65
67
  </>
package/src/blocks/sections/base-section/types.ts CHANGED
@@ -67,6 +67,7 @@ export interface BackgroundImage {
67
67
  position?: BackgroundImagePosition
68
68
  repeat?: BackgroundImageRepeat
69
69
  overlay?: BackgroundImageOverlay
70
+ opacity?: number
70
71
  }
71
72
 
72
73
  export interface Border {