@brilo/base-blocks 0.1.14 → 0.1.15

package/build/components/ItemIconControl/ItemIconPreview.js

@@ -1,13 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useState } from '@wordpress/element';
 import { useMediaUrl } from '../../components/ImagePicker';
 import { ItemIconModal } from './ItemIconModal';
 export function ItemIconPreview({ icon, className, options, setAttributes }) {
+    var _a;
+    var _b;
     const [isModalOpen, setModalOpen] = useState(false);
-    const mediaIconUrl = useMediaUrl(icon.media.id);
+    const mediaIconUrl = useMediaUrl((_b = (_a = icon.media) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 0);
     const preselectedIconUrl = icon.type === 'preselected' && icon.src ? `${options.iconsSrc}${icon.src}.svg` : '';
     const renderContent = () => {
+        var _a;
         if (icon.type === 'preselected') {
             if (preselectedIconUrl) {
                 return (_jsx("div", { className: clsx('i-item-icon', className), children: _jsx("img", { src: preselectedIconUrl, alt: "", className: clsx(className ? `${className}-img` : 'i-item-icon__img'), width: 40, height: 40 }) }));
@@ -15,7 +18,7 @@ export function ItemIconPreview({ icon, className, options, setAttributes }) {
             return (_jsx("button", { type: "button", className: clsx('i-item-icon', className ? `${className}-placeholder` : null, 'i-item-icon__placeholder', !isModalOpen && '--clickable'), onClick: () => setModalOpen(true), children: _jsx("span", { children: "\u2606" }) }));
         }
         if (icon.type === 'media') {
-            if (icon.media.id && mediaIconUrl) {
+            if (((_a = icon.media) === null || _a === void 0 ? void 0 : _a.id) && mediaIconUrl) {
                 return (_jsx("div", { className: clsx('i-item-icon', className), children: _jsx("img", { src: mediaIconUrl, alt: icon.media.alt, className: clsx(className ? `${className}-img` : null, 'i-item-icon__img') }) }));
             }
             return (_jsx("div", { className: clsx('i-item-icon', className ? `${className}-placeholder` : 'i-item-icon__placeholder'), children: _jsx("span", { children: "\u2606" }) }));

package/build/constants.d.ts

@@ -1,27 +1,27 @@
 export declare const HEADING_LEVELS: readonly [1, 2, 3, 4];
-export declare const HEADING_STYLES: readonly ["h1", "h2", "h3", "h4"];
+export declare const HEADING_STYLES: readonly ['h1', 'h2', 'h3', 'h4'];
 export declare const HEADING_STYLE_OPTIONS: readonly [{
-    readonly value: "h1";
-    readonly label: "H1 styl";
+    readonly value: 'h1';
+    readonly label: 'H1 styl';
 }, {
-    readonly value: "h2";
-    readonly label: "H2 styl";
+    readonly value: 'h2';
+    readonly label: 'H2 styl';
 }, {
-    readonly value: "h3";
-    readonly label: "H3 styl";
+    readonly value: 'h3';
+    readonly label: 'H3 styl';
 }, {
-    readonly value: "h4";
-    readonly label: "H4 styl";
+    readonly value: 'h4';
+    readonly label: 'H4 styl';
 }];
 export type HeadingStyleOption = (typeof HEADING_STYLE_OPTIONS)[number]['value'];
 export declare const CONTENT_SIZES: readonly [{
-    readonly value: "sm";
+    readonly value: 'sm';
     readonly label: import("@wordpress/i18n").TransformedText<"Malá">;
 }, {
-    readonly value: "default";
+    readonly value: 'default';
     readonly label: import("@wordpress/i18n").TransformedText<"Výchozí">;
 }, {
-    readonly value: "lg";
+    readonly value: 'lg';
     readonly label: import("@wordpress/i18n").TransformedText<"Velká">;
 }];
 //# sourceMappingURL=constants.d.ts.map

package/build/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,uBAAwB,CAAA;AAEnD,eAAO,MAAM,cAAc,mCAAoC,CAAA;AAE/D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;EAKxB,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAEhF,eAAO,MAAM,aAAa;;;;;;;;;EAIhB,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAA;AAEnD,eAAO,MAAM,cAAc,YAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA;AAE/D,eAAO,MAAM,qBAAqB;aAC/B,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,SAAS;;aAC7B,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,SAAS;;aAC7B,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,SAAS;;aAC7B,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,SAAS;EACtB,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAEhF,eAAO,MAAM,aAAa;aACvB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,SAAS;aAAE,KAAK;;aACvB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA"}

package/build/hooks/useTenantColorPalette.d.ts

@@ -1,8 +1,8 @@
 export declare function useTenantColorPalette(): {
     paletteColors: {
-        color: string;
         name: string;
         slug: string;
+        color: string;
     }[];
     resolveHex: (value: string) => string;
 };

package/build/hooks/useTenantColorPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTenantColorPalette.d.ts","sourceRoot":"","sources":["../../src/hooks/useTenantColorPalette.ts"],"names":[],"mappings":"AASA,wBAAgB,qBAAqB;;;cAL7B,MAAM;cACN,MAAM;;wBAWiB,MAAM;EAIpC"}
+{"version":3,"file":"useTenantColorPalette.d.ts","sourceRoot":"","sources":["../../src/hooks/useTenantColorPalette.ts"],"names":[],"mappings":"AASA,wBAAgB,qBAAqB;;cAL7B,MAAM;cACN,MAAM;;;wBAWiB,MAAM;EAIpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -13,25 +13,25 @@
     "check": "biome check --write ./src"
   },
   "peerDependencies": {
-    "@wordpress/block-editor": "15.21.0",
-    "@wordpress/blocks": "15.21.0",
-    "@wordpress/components": "35.0.0",
-    "@wordpress/i18n": "6.21.0",
+    "@wordpress/block-editor": "16.1.0",
+    "@wordpress/blocks": "15.25.0",
+    "@wordpress/components": "38.0.0",
+    "@wordpress/i18n": "6.25.0",
     "react": "*"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.16",
+    "@biomejs/biome": "2.5.6",
     "@types/react": "^18.3.12",
     "@types/wordpress__block-editor": "^15.0.6",
-    "@wordpress/block-editor": "^15.21.0",
-    "@wordpress/blocks": "^15.21.0",
-    "@wordpress/components": "^35.0.0",
-    "@wordpress/data": "^10.48.0",
-    "@wordpress/element": "^8.0.0",
-    "@wordpress/i18n": "^6.21.0",
-    "prettier": "^3.0.0",
-    "tsc-alias": "^1.8.17",
-    "typescript": "^5.0.0"
+    "@wordpress/block-editor": "^16.1.0",
+    "@wordpress/blocks": "^15.25.0",
+    "@wordpress/components": "^38.0.0",
+    "@wordpress/data": "^10.52.0",
+    "@wordpress/element": "^8.4.0",
+    "@wordpress/i18n": "^6.25.0",
+    "prettier": "^3.9.6",
+    "tsc-alias": "^1.9.1",
+    "typescript": "^7.0.2"
   },
   "dependencies": {
     "clsx": "^2.1.1"

package/src/blocks/column/column-item/factory.tsx

@@ -26,7 +26,7 @@ export function createColumnItemBlock(options: ColumnItemOptions): BlockConfigur
       justify: {
         type: 'string',
         default: 'stretch',
-      }
+      },
     },
     edit: createColumnItemEdit(options),
     save: () => <InnerBlocks.Content />,

package/src/blocks/core/basic-button/edit.tsx

@@ -132,8 +132,8 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
           <div className="i-button__inner">
             {hasIcon && icon.position === 'before' && (
               <span className="i-button__icon" style={iconPreviewStyle}>
-              <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />
-            </span>
+                <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />
+              </span>
             )}
             <RichText
               tagName="span"
@@ -145,8 +145,8 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
             />
             {hasIcon && icon.position === 'after' && (
               <span className="i-button__icon" style={iconPreviewStyle}>
-              <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />
-            </span>
+                <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />
+              </span>
             )}
           </div>
         </div>

package/src/blocks/groups/banner-group/icon.tsx

@@ -10,4 +10,4 @@ export const icon = (
       fill="#357AB5"
     />
   </svg>
-);
+)

package/src/blocks/hero/hero-group/icon.tsx

@@ -25,4 +25,4 @@ export const icon = (
       fill="#357AB5"
     />
   </svg>
-);
+)

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

@@ -11,4 +11,4 @@ export const icon = (
       fill="#357AB5"
     />
   </svg>
-);
+)

package/src/blocks/signpost/signpost-group/constants.ts

@@ -1,3 +1,19 @@
+import {__} from '@wordpress/i18n'
+
 export const COLUMNS = [5, 4, 3, 2] as const
 export const RATIOS = ['4:3', '3:2', '16:9', '1:1', '2:1', '3:4'] as const
 export const HEADING_LEVELS = [2, 3, 4] 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 PADDING_MARKS = [
+  {value: 0, label: '0'},
+  {value: 0.5, label: '0.5'},
+  {value: 1, label: '1'},
+  {value: 1.5, label: '1.5'},
+  {value: 2, label: '2'},
+] as const

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

@@ -1,16 +1,22 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
+  BaseControl,
+  ColorPalette,
   PanelBody,
+  RangeControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {COLUMNS, HEADING_LEVELS, RATIOS} from './constants'
-import type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {COLUMNS, DEFAULT_SHADOWS, HEADING_LEVELS, PADDING_MARKS, RATIOS} from './constants'
+import type {SignpostGroupAttributes, SignpostGroupOptions, SignpostShadow} from './types'
 
 export function createSignpostGroupEdit(options: SignpostGroupOptions) {
+  const exclude = options.exclude ?? []
+
   return function Edit({
     attributes,
     setAttributes,
@@ -18,7 +24,8 @@ export function createSignpostGroupEdit(options: SignpostGroupOptions) {
     attributes: SignpostGroupAttributes
     setAttributes: (a: Partial<SignpostGroupAttributes>) => void
   }) {
-    const {columns, headingLevel, ratio} = attributes
+    const {columns, headingLevel, ratio, style, padding} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-signpost wp-block-section'),
@@ -65,6 +72,58 @@ export function createSignpostGroupEdit(options: SignpostGroupOptions) {
               ))}
             </ToggleGroupControl>
           </PanelBody>
+          {!exclude.includes('colors') && style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as SignpostShadow}})}
+              >
+                {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="signpost-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="signpost-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="signpost-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+            </PanelBody>
+          )}
+          {!exclude.includes('padding') && padding && (
+            <PanelBody title={__('Padding', 'brilo-blocks')}>
+              <RangeControl
+                label={__('Vnitřní odsazení (rem)', 'brilo-blocks')}
+                value={padding.value}
+                onChange={(v) => setAttributes({padding: {value: v ?? 0}})}
+                min={0}
+                max={2}
+                step={0.5}
+                marks={[...PADDING_MARKS]}
+              />
+            </PanelBody>
+          )}
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

package/src/blocks/signpost/signpost-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, RATIOS} from './constants'
+import {COLUMNS, DEFAULT_SHADOWS, HEADING_LEVELS, RATIOS} from './constants'
 import {createSignpostGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
@@ -9,6 +9,40 @@ import type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
 export type {SignpostGroupAttributes, SignpostGroupOptions}
 
 export function createSignpostGroupBlock(options: SignpostGroupOptions): BlockConfiguration<SignpostGroupAttributes> {
+  const exclude = options.exclude ?? []
+
+  const attributes: Record<string, unknown> = {
+    columns: {
+      type: 'number',
+      default: COLUMNS[1],
+      enum: [...COLUMNS],
+    },
+    ratio: {
+      type: 'string',
+      default: RATIOS[0],
+      enum: [...RATIOS],
+    },
+    headingLevel: {
+      type: 'number',
+      default: HEADING_LEVELS[0],
+      enum: [...HEADING_LEVELS],
+    },
+  }
+
+  if (!exclude.includes('colors')) {
+    attributes.style = {
+      type: 'object',
+      default: {shadow: DEFAULT_SHADOWS[0].value, borderColor: '', backgroundColor: '', textColor: ''},
+    }
+  }
+
+  if (!exclude.includes('padding')) {
+    attributes.padding = {
+      type: 'object',
+      default: {value: 1},
+    }
+  }
+
   return {
     name: options.name,
     title: options.title ?? __('Rozcestník', 'brilo-blocks'),
@@ -17,23 +51,7 @@ export function createSignpostGroupBlock(options: SignpostGroupOptions): BlockCo
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? {src: defaultIcon},
     supports: {html: false, customClassName: false},
-    attributes: {
-      columns: {
-        type: 'number',
-        default: COLUMNS[1],
-        enum: [...COLUMNS],
-      },
-      ratio: {
-        type: 'string',
-        default: RATIOS[0],
-        enum: [...RATIOS],
-      },
-      headingLevel: {
-        type: 'number',
-        default: HEADING_LEVELS[0],
-        enum: [...HEADING_LEVELS],
-      },
-    },
+    attributes,
     edit: createSignpostGroupEdit(options),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<SignpostGroupAttributes>

package/src/blocks/signpost/signpost-group/index.ts

@@ -1,5 +1,5 @@
-export type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
 export {createSignpostGroupBlock} from './factory'
+export type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
 
 import type {SignpostGroupOptions} from './types'
 

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

@@ -1,9 +1,23 @@
-import {BriloBlockType} from '~/types'
+import type {BriloBlockType} from '~/types'
+import type {DEFAULT_SHADOWS} from './constants'
+
+export type SignpostShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type ExcludableSignpostAttr = 'colors' | 'padding'
 
 export interface SignpostGroupAttributes extends Record<string, unknown> {
   columns: number
   headingLevel: number
   ratio: string
+  style: {
+    shadow: SignpostShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+  }
+  padding: {value: number}
 }
 
-export interface SignpostGroupOptions extends BriloBlockType {}
+export interface SignpostGroupOptions extends BriloBlockType {
+  exclude?: ExcludableSignpostAttr[]
+}

package/src/blocks/signpost/signpost-item/constants.ts

@@ -1,4 +1,2 @@
-import {__} from '@wordpress/i18n'
-
-// No item-specific constants yet, but file is required by anatomy
-export {}
+export const BUTTON_TYPES = ['button', 'link'] as const
+export const BUTTON_VARIANTS = ['primary', 'secondary'] as const

package/src/blocks/signpost/signpost-item/edit.tsx

@@ -1,9 +1,18 @@
-import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
-import {Button, PanelBody, TextControl, ToggleControl} from '@wordpress/components'
+import {ColorPalette, InspectorControls, RichText} from '@wordpress/block-editor'
+import {
+  Button,
+  PanelBody,
+  TextControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {ImagePickerControl} from '~/components/ImagePicker'
-import type {SignpostItemAttributes, SignpostItemOptions} from './types'
+import type {SignpostItemAttributes, SignpostItemOptions, ButtonType, ButtonVariant} from './types'
+import {BUTTON_TYPES, BUTTON_VARIANTS} from './constants'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import clsx from 'clsx'
 
 export function createSignpostItemEdit(options: SignpostItemOptions) {
@@ -14,7 +23,13 @@ export function createSignpostItemEdit(options: SignpostItemOptions) {
     attributes: SignpostItemAttributes
     setAttributes: (a: Partial<SignpostItemAttributes>) => void
   }) {
-    const {title, img, button, url} = attributes
+    const {title, img, url} = attributes
+    const button = {
+      ...attributes.button,
+      type: attributes.button.type ?? BUTTON_TYPES[0],
+      variant: attributes.button.variant ?? BUTTON_VARIANTS[0],
+    }
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'i-signpost'),
@@ -37,6 +52,44 @@ export function createSignpostItemEdit(options: SignpostItemOptions) {
               value={button.title}
               onChange={(v) => setAttributes({button: {...button, title: v}})}
             />
+            <ToggleGroupControl
+              label={__('Typ tlačítka', 'brilo-blocks')}
+              value={button.type}
+              onChange={(v) => setAttributes({button: {...button, type: v as ButtonType}})}
+              isBlock
+            >
+              {BUTTON_TYPES.map((type) => (
+                <ToggleGroupControlOption key={type} value={type} label={type} />
+              ))}
+            </ToggleGroupControl>
+            {button.type === 'button' ? (
+              <>
+                <ToggleGroupControl
+                  label={__('Varianta', 'brilo-blocks')}
+                  value={button.variant}
+                  onChange={(v) => setAttributes({button: {...button, variant: v as ButtonVariant}})}
+                  isBlock
+                >
+                  {BUTTON_VARIANTS.map((variant) => (
+                    <ToggleGroupControlOption key={variant} value={variant} label={variant} />
+                  ))}
+                </ToggleGroupControl>
+                <ToggleControl
+                  label={__('Outline', 'brilo-blocks')}
+                  checked={button.outline}
+                  onChange={(v) => setAttributes({button: {...button, outline: v}})}
+                />
+              </>
+            ) : (
+              <>
+                <p>{__('Barva textu', 'brilo-blocks')}</p>
+                <ColorPalette
+                  colors={paletteColors}
+                  value={button.color || undefined}
+                  onChange={(v) => setAttributes({button: {...button, color: v ?? ''}})}
+                />
+              </>
+            )}
           </PanelBody>
           <PanelBody title={__('Odkaz', 'brilo-blocks')} initialOpen={false}>
             <TextControl label={__('URL', 'brilo-blocks')} value={url.src} onChange={(v) => setAttributes({url: {...url, src: v}})} />

package/src/blocks/signpost/signpost-item/factory.tsx

@@ -3,6 +3,7 @@ import {__} from '@wordpress/i18n'
 import {createSignpostItemEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {SignpostItemAttributes, SignpostItemOptions} from './types'
+import {BUTTON_TYPES} from './constants'
 import {InnerBlocks} from '@wordpress/block-editor'
 
 export type {SignpostItemAttributes, SignpostItemOptions}
@@ -19,7 +20,7 @@ export function createSignpostItemBlock(options: SignpostItemOptions): BlockConf
     attributes: {
       title: {type: 'string', default: ''},
       img: {type: 'object', default: {id: 0, alt: ''}},
-      button: {type: 'object', default: {title: ''}},
+      button: {type: 'object', default: {title: '', type: BUTTON_TYPES[0], variant: 'primary', outline: false, color: ''}},
       url: {type: 'object', default: {src: '', blank: false}},
     },
     edit: createSignpostItemEdit(options),

package/src/blocks/signpost/signpost-item/types.ts

@@ -1,10 +1,20 @@
-import {BriloBlockType} from '~/types'
-import {ImageValue} from '~/components/ImagePicker/ImagePicker'
+import type {ImageValue} from '~/components/ImagePicker/ImagePicker'
+import type {BriloBlockType} from '~/types'
+import type {BUTTON_TYPES, BUTTON_VARIANTS} from './constants'
+
+export type ButtonType = (typeof BUTTON_TYPES)[number]
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number]
 
 export interface SignpostItemAttributes extends Record<string, unknown> {
   title: string
   img: ImageValue
-  button: {title: string}
+  button: {
+    title: string
+    type: ButtonType
+    variant: ButtonVariant
+    outline: boolean
+    color: string
+  }
   url: {src: string; blank: boolean}
 }
 

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

@@ -3,12 +3,15 @@ import {
   PanelBody,
   SelectControl,
   ToggleControl,
+  BaseControl,
+  ColorPalette,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import {
   DEFAULT_ALIGNMENTS,
   DEFAULT_COLUMNS,
@@ -54,6 +57,7 @@ export function createUspGroupEdit(options: UspGroupOptions) {
     setAttributes: (a: Partial<UspGroupAttributes>) => void
   }) {
     const {columns, headingSettings, content, style} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(
@@ -138,23 +142,42 @@ export function createUspGroupEdit(options: UspGroupOptions) {
             </ToggleGroupControl>
           </PanelBody>
           <PanelBody title={__('Styl', 'brilo-blocks')}>
-            <ToggleControl
-              label={__('Karta', 'brilo-blocks')}
-              checked={style.card}
-              onChange={(v) => setAttributes({style: {...style, card: v}})}
-            />
-            {style.card && (
-              <ToggleGroupControl
-                isBlock
-                label={__('Stín', 'brilo-blocks')}
-                value={style.shadow}
-                onChange={(v) => setAttributes({style: {...style, shadow: v as UspShadow}})}
-              >
-                {SHADOWS.map((s) => (
-                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
-                ))}
-              </ToggleGroupControl>
-            )}
+            <ToggleGroupControl
+              isBlock
+              label={__('Stín', 'brilo-blocks')}
+              value={style.shadow}
+              onChange={(v) => setAttributes({style: {...style, shadow: v as UspShadow}})}
+            >
+              {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="usp-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="usp-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="usp-group-text-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.textColor || undefined}
+                onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+              />
+            </BaseControl>
           </PanelBody>
           <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
             <ToggleGroupControl

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

@@ -91,6 +91,9 @@ export function createUspGroupBlock<
           card: false,
           direction: directions[0].value,
           align: alignments[0].value,
+          borderColor: '',
+          backgroundColor: '',
+          textColor: '',
           icon: {size: iconSizes[2]?.value ?? iconSizes[0].value, color: iconColors[0].value, background: iconBackgrounds[0].value},
         },
       },