@brilo/base-blocks 0.1.49 → 0.1.50

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,21 +13,87 @@ 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
 
   return function Edit({
-    attributes,
-    setAttributes,
-  }: {
+                         attributes,
+                         setAttributes,
+                       }: {
     attributes: StepGroupAttributes
     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
 }