@brilo/base-blocks 0.1.34 → 0.1.36

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

@@ -5,6 +5,7 @@ import {
   ButtonGroup,
   PanelBody,
   PanelRow,
+  RangeControl,
   SelectControl,
   TextControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -13,8 +14,31 @@ import {
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
-import type {BaseBlockAttributes, ExcludableBaseAttr, FluidDecoration, FluidDecorationImage} from './types'
+import type {
+  BackgroundImage,
+  BackgroundImageFit,
+  BackgroundImagePosition,
+  BaseBlockAttributes,
+  Decoration,
+  DecorationDepth,
+  DecorationImage,
+  DecorationPosition,
+  DecorationTranslate,
+  ExcludableBaseAttr,
+  FluidDecoration,
+  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,
+  DECORATION_OFFSET_DEFAULT,
+  DECORATION_OFFSET_UNITS,
+  DECORATION_POSITIONS,
+  DECORATION_TRANSLATES,
   FLUID_DECORATION_DEFAULT_HEIGHT,
   FLUID_DECORATION_HEIGHT_PRESETS,
   FLUID_DECORATION_UNITS,
@@ -83,6 +107,210 @@ function FluidDecorationControl({label, value, onChange}: FluidDecorationControl
   )
 }
 
+interface DecorationControlProps {
+  value?: Decoration
+  onChange: (value: Decoration | undefined) => void
+}
+
+function DecorationControl({value, onChange}: DecorationControlProps) {
+  const img = value?.img
+  const position = value?.position ?? 'top-right'
+  const depth = value?.depth ?? 'front'
+  const translate = value?.translate ?? 'center'
+  const maxWidth = value?.maxWidth ?? DECORATION_MAX_WIDTH_DEFAULT
+  const offsetX = value?.offsetX ?? DECORATION_OFFSET_DEFAULT
+  const offsetY = value?.offsetY ?? DECORATION_OFFSET_DEFAULT
+
+  const update = (patch: Partial<Decoration>) => onChange({img, position, depth, translate, maxWidth, offsetX, offsetY, ...value, ...patch})
+
+  const handleSelect = (media: {id: number; url: string; alt: string; width?: number; height?: number}) => {
+    const nextImg: DecorationImage = {id: media.id, src: media.url, alt: media.alt ?? '', width: media.width, height: media.height}
+    update({img: nextImg})
+  }
+
+  const handleRemove = () => onChange(undefined)
+
+  return (
+    <BaseControl label={__('Obrázek', '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 && (
+        <>
+          <BaseControl label={__('Pozice', 'brilo-blocks')} __nextHasNoMarginBottom>
+            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4}}>
+              {DECORATION_POSITIONS.map((p) => (
+                <Button
+                  key={p.value}
+                  variant="secondary"
+                  size="small"
+                  isPressed={position === p.value}
+                  onClick={() => update({position: p.value as DecorationPosition})}
+                >
+                  {p.label}
+                </Button>
+              ))}
+            </div>
+          </BaseControl>
+
+          <ToggleGroupControl
+            label={__('Vrstva', 'brilo-blocks')}
+            value={depth}
+            onChange={(next) => update({depth: next as DecorationDepth})}
+            isBlock
+          >
+            {DECORATION_DEPTHS.map((d) => (
+              <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
+            ))}
+          </ToggleGroupControl>
+
+          <ToggleGroupControl
+            label={__('Přesah', 'brilo-blocks')}
+            value={translate}
+            onChange={(next) => update({translate: next as DecorationTranslate})}
+            isBlock
+          >
+            {DECORATION_TRANSLATES.map((t) => (
+              <ToggleGroupControlOption key={t.value} value={t.value} label={t.label} />
+            ))}
+          </ToggleGroupControl>
+
+          <UnitControl
+            label={__('Max. šířka obrázku', 'brilo-blocks')}
+            value={maxWidth}
+            units={DECORATION_MAX_WIDTH_UNITS}
+            onChange={(next) => update({maxWidth: (next as string) ?? DECORATION_MAX_WIDTH_DEFAULT})}
+          />
+
+          <BaseControl
+            label={__('Doladění pozice', 'brilo-blocks')}
+            __nextHasNoMarginBottom
+            help={__('Ruční posun obrázku navíc k vybrané pozici.', 'brilo-blocks')}
+          >
+            <UnitControl
+              label={__('Posun X', 'brilo-blocks')}
+              value={offsetX}
+              units={DECORATION_OFFSET_UNITS}
+              onChange={(next) => update({offsetX: (next as string) ?? DECORATION_OFFSET_DEFAULT})}
+            />
+            <UnitControl
+              label={__('Posun Y', 'brilo-blocks')}
+              value={offsetY}
+              units={DECORATION_OFFSET_UNITS}
+              onChange={(next) => update({offsetY: (next as string) ?? DECORATION_OFFSET_DEFAULT})}
+            />
+          </BaseControl>
+        </>
+      )}
+    </BaseControl>
+  )
+}
+
+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']
 
@@ -93,7 +321,7 @@ interface BaseControlsProps {
 }
 
 export function BaseControls({attributes, setAttributes, exclude}: BaseControlsProps) {
-  const {id, spacing, background, textColor, decorations} = attributes
+  const {id, spacing, background, textColor, decoration, decorations, backgroundImage} = attributes
   const {paletteColors, resolveHex} = useTenantColorPalette()
   const fluid = decorations?.fluid ?? {}
 
@@ -143,6 +371,18 @@ 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 ?? {}})} />
+        </PanelBody>
+      )}
+
       {!exclude.includes('decorations') && (
         <PanelBody title={__('Fluidní dekorace', 'brilo-blocks')} initialOpen={false}>
           <FluidDecorationControl label={__('Nahoře', 'brilo-blocks')} value={fluid.top} onChange={(value) => setFluid('top', value)} />

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

@@ -15,6 +15,41 @@ export interface FluidDecoration {
   height: string
 }
 
+export type DecorationImage = FluidDecorationImage
+
+export type DecorationPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center-left' | 'center-right'
+export type DecorationDepth = 'front' | 'under'
+export type DecorationTranslate = 'in' | 'center' | 'out'
+
+export interface Decoration {
+  img?: DecorationImage
+  position?: DecorationPosition
+  depth?: DecorationDepth
+  translate?: DecorationTranslate
+  maxWidth?: string
+  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: {
@@ -23,15 +58,17 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
   }
   background: string
   textColor: string
+  decoration: Decoration
   decorations: {
     fluid?: {
       top?: FluidDecoration
       bottom?: FluidDecoration
     }
   }
+  backgroundImage: BackgroundImage
 }
 
-export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations'
+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']