@brilo/base-blocks 0.1.49 → 0.1.51

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

@@ -1,5 +1,7 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
+  BaseControl,
+  ColorPalette,
   PanelBody,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -7,8 +9,9 @@ import {
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {COLUMNS, HEADING_LEVELS} from './constants'
-import type {PersonGroupAttributes, PersonGroupOptions} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {COLUMNS, DEFAULT_SHADOWS, HEADING_LEVELS, TEXT_ALIGNS} from './constants'
+import type {PersonGroupAttributes, PersonGroupOptions, PersonShadow, PersonTextAlign} from './types'
 
 export function createPersonGroupEdit(options: PersonGroupOptions) {
   return function Edit({
@@ -18,7 +21,8 @@ export function createPersonGroupEdit(options: PersonGroupOptions) {
     attributes: PersonGroupAttributes
     setAttributes: (a: Partial<PersonGroupAttributes>) => void
   }) {
-    const {columns, headingLevel} = attributes
+    const {columns, headingLevel, style} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-person wp-block-section'),
@@ -55,6 +59,62 @@ export function createPersonGroupEdit(options: PersonGroupOptions) {
               ))}
             </ToggleGroupControl>
           </PanelBody>
+          {style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as PersonShadow}})}
+              >
+                {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="person-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="person-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="person-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva nadpisu', 'brilo-blocks')} id="person-group-heading-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.headingColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, headingColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <ToggleGroupControl
+                isBlock
+                label={__('Zarovnání textu', 'brilo-blocks')}
+                value={style.textAlign}
+                onChange={(v) => setAttributes({style: {...style, textAlign: v as PersonTextAlign}})}
+              >
+                {TEXT_ALIGNS.map((a) => (
+                  <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+                ))}
+              </ToggleGroupControl>
+            </PanelBody>
+          )}
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -1,7 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import {COLUMNS, HEADING_LEVELS} from './constants'
+import {COLUMNS, DEFAULT_SHADOWS, HEADING_LEVELS} from './constants'
 import {createPersonGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {PersonGroupAttributes, PersonGroupOptions} from './types'
@@ -28,6 +28,17 @@ export function createPersonGroupBlock(options: PersonGroupOptions): BlockConfig
         default: HEADING_LEVELS[0],
         enum: [...HEADING_LEVELS],
       },
+      style: {
+        type: 'object',
+        default: {
+          shadow: DEFAULT_SHADOWS[0].value,
+          borderColor: '',
+          backgroundColor: '',
+          textColor: '',
+          headingColor: '',
+          textAlign: 'center',
+        },
+      },
     },
     edit: createPersonGroupEdit(options),
     save: () => <InnerBlocks.Content />,

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

@@ -1,8 +1,21 @@
 import type {BriloBlockType} from '~/types'
+import type {DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
+
+export type PersonShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type PersonTextAlign = (typeof TEXT_ALIGNS)[number]['value']
 
 export interface PersonGroupAttributes extends Record<string, unknown> {
   columns: number
   headingLevel: number
+  style: {
+    shadow: PersonShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+    headingColor: string
+    textAlign: PersonTextAlign
+  }
 }
 
 export interface PersonGroupOptions extends BriloBlockType {}

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/constants.ts

@@ -4,3 +4,38 @@ export const DEFAULT_VARIANTS = [
   {value: 'horizontal', label: __('Horizontální', 'brilo-blocks')},
   {value: 'vertical', label: __('Vertikální', 'brilo-blocks')},
 ] as const
+
+export const DEFAULT_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export const TEXT_ALIGNS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center', label: __('Na střed', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_SIZE = 48
+export const ICON_SIZE_MIN = 16
+export const ICON_SIZE_MAX = 96
+
+export const DEFAULT_ICON_SIZE_PRESETS = [
+  {value: 24, label: __('SM', 'brilo-blocks')},
+  {value: 32, label: __('MD', 'brilo-blocks')},
+  {value: 48, label: __('Výchozí', 'brilo-blocks')},
+  {value: 64, label: __('LG', 'brilo-blocks')},
+  {value: 80, label: __('XL', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_BACKGROUND_SIZE = 144
+export const ICON_BACKGROUND_SIZE_MIN = 56
+export const ICON_BACKGROUND_SIZE_MAX = 200
+
+export const DEFAULT_ICON_BACKGROUND_SIZE_PRESETS = [
+  {value: 88, label: __('SM', 'brilo-blocks')},
+  {value: 112, label: __('MD', 'brilo-blocks')},
+  {value: 144, label: __('Výchozí', 'brilo-blocks')},
+  {value: 168, label: __('LG', 'brilo-blocks')},
+  {value: 200, label: __('XL', 'brilo-blocks')},
+] as const

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

@@ -1,6 +1,10 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
+  BaseControl,
+  Button,
+  ColorPalette,
   PanelBody,
+  RangeControl,
   ToggleControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -9,9 +13,73 @@ import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import type {OptionArray} from '~/types'
-import type {StepGroupAttributes, StepGroupOptions, StepVariant} from './types'
-import {DEFAULT_VARIANTS} from './constants'
+import type {StepGroupAttributes, StepGroupOptions, StepShadow, StepTextAlign} from './types'
+import {
+  DEFAULT_ICON_BACKGROUND_SIZE,
+  DEFAULT_ICON_BACKGROUND_SIZE_PRESETS,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_ICON_SIZE_PRESETS,
+  DEFAULT_SHADOWS,
+  DEFAULT_VARIANTS,
+  ICON_BACKGROUND_SIZE_MAX,
+  ICON_BACKGROUND_SIZE_MIN,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
+  TEXT_ALIGNS,
+} from './constants'
+
+// Older step-group blocks were saved before `style` / `style.icon` existed. WordPress does
+// not deep-merge object-attribute defaults, so normalise here to stay backward compatible.
+function normaliseStyle(saved: Partial<StepGroupAttributes['style']> | undefined): StepGroupAttributes['style'] {
+  return {
+    shadow: 'none',
+    borderColor: '',
+    backgroundColor: '',
+    textColor: '',
+    headingColor: '',
+    textAlign: 'left',
+    ...saved,
+    icon: {
+      size: DEFAULT_ICON_SIZE,
+      background: '',
+      backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+      ...saved?.icon,
+    },
+  }
+}
+
+function PresetSizeControl({
+  label,
+  id,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  id: string
+  value: number
+  presets: readonly {value: number; label: string}[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={id}>
+      <div style={{display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap'}}>
+        {presets.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={(v) => onChange(v ?? min)} min={min} max={max} step={1} withInputField />
+    </BaseControl>
+  )
+}
 
 export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(options: StepGroupOptions<TVariants>) {
   const VARIANTS = options.variants ?? DEFAULT_VARIANTS
@@ -24,6 +92,8 @@ export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAU
     setAttributes: (a: Partial<StepGroupAttributes>) => void
   }) {
     const {variant, disableIcon, spacing} = attributes
+    const style = normaliseStyle(attributes.style as Partial<StepGroupAttributes['style']> | undefined)
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-step wp-block-section', `--variant-${variant}`, disableIcon && '--disable-icon'),
@@ -55,6 +125,94 @@ export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAU
               onChange={(v) => setAttributes({disableIcon: v})}
             />
           </PanelBody>
+          {style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as StepShadow}})}
+              >
+                {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="step-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="step-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="step-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva nadpisu', 'brilo-blocks')} id="step-group-heading-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.headingColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, headingColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <ToggleGroupControl
+                isBlock
+                label={__('Zarovnání textu', 'brilo-blocks')}
+                value={style.textAlign}
+                onChange={(v) => setAttributes({style: {...style, textAlign: v as StepTextAlign}})}
+              >
+                {TEXT_ALIGNS.map((a) => (
+                  <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+                ))}
+              </ToggleGroupControl>
+            </PanelBody>
+          )}
+
+          <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
+            <PresetSizeControl
+              label={__('Velikost', 'brilo-blocks')}
+              id="step-group-icon-size"
+              value={style.icon.size}
+              presets={DEFAULT_ICON_SIZE_PRESETS}
+              min={ICON_SIZE_MIN}
+              max={ICON_SIZE_MAX}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v}}})}
+            />
+            <BaseControl
+              label={__('Barva pozadí', 'brilo-blocks')}
+              help={__('Ovládá i barvu spojnice mezi kroky.', 'brilo-blocks')}
+              id="step-group-icon-background"
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.background || undefined}
+                onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, background: value ?? ''}}})}
+              />
+            </BaseControl>
+            <PresetSizeControl
+              label={__('Velikost pozadí', 'brilo-blocks')}
+              id="step-group-icon-background-size"
+              value={style.icon.backgroundSize}
+              presets={DEFAULT_ICON_BACKGROUND_SIZE_PRESETS}
+              min={ICON_BACKGROUND_SIZE_MIN}
+              max={ICON_BACKGROUND_SIZE_MAX}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, backgroundSize: v}}})}
+            />
+          </PanelBody>
           <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>

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

@@ -1,7 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import {DEFAULT_VARIANTS} from './constants'
+import {DEFAULT_ICON_BACKGROUND_SIZE, DEFAULT_ICON_SIZE, DEFAULT_SHADOWS, DEFAULT_VARIANTS, TEXT_ALIGNS} from './constants'
 import {createStepGroupEdit} from './edit'
 import type {StepGroupAttributes, StepGroupOptions} from './types'
 import {icon} from '~/blocks/step/step-group/icon'
@@ -30,6 +30,21 @@ export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFA
         type: 'boolean',
         default: false,
       },
+      style: {
+        type: 'object',
+        default: {
+          shadow: DEFAULT_SHADOWS[0].value,
+          borderColor: '',
+          backgroundColor: '',
+          textColor: '',
+          headingColor: '',
+          textAlign: TEXT_ALIGNS[0].value,
+          icon: {
+            background: '',
+            backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+          },
+        },
+      },
       ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createStepGroupEdit(options as unknown as StepGroupOptions),

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

@@ -1,11 +1,30 @@
 import type {BriloBlockType, OptionArray} from '~/types'
-import type {DEFAULT_VARIANTS} from './constants'
+import type {DEFAULT_SHADOWS, DEFAULT_VARIANTS, TEXT_ALIGNS} from './constants'
 
 export type StepVariant = (typeof DEFAULT_VARIANTS)[number]['value']
 
+export type StepShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type StepTextAlign = (typeof TEXT_ALIGNS)[number]['value']
+
+export interface StepIconStyle {
+  size: number
+  background: string
+  backgroundSize: number
+}
+
 export interface StepGroupAttributes<TVariant extends string = StepVariant> extends Record<string, unknown> {
   variant: TVariant
   disableIcon: boolean
+  style: {
+    shadow: StepShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+    headingColor: string
+    textAlign: StepTextAlign
+    icon: StepIconStyle
+  }
   spacing?: number
 }