@brilo/base-blocks 0.1.15 → 0.1.17

package/build/blocks/usp/usp-group/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-group/types.ts"],"names":[],"mappings":"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"}

package/build/blocks/usp/usp-item/buildPreviewStyle.d.ts

@@ -0,0 +1,25 @@
+export interface UspSharedStyle {
+    direction?: string;
+    align?: string;
+    textAlign?: string;
+    shadow?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    icon?: {
+        size?: number;
+        color?: string;
+        background?: string;
+        backgroundSize?: number;
+        backgroundShape?: string;
+        borderColor?: string;
+        borderWidth?: number;
+    };
+}
+export interface UspPreviewStyle {
+    rootClassName: string;
+    iconClassName: string;
+    cssVars: Record<string, string>;
+}
+export declare function buildUspPreviewStyle(shared?: UspSharedStyle, resolveHex?: (value: string) => string): UspPreviewStyle;
+//# sourceMappingURL=buildPreviewStyle.d.ts.map

package/build/blocks/usp/usp-item/buildPreviewStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildPreviewStyle.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/buildPreviewStyle.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,GAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAyB,GAAG,eAAe,CAsCvI"}

package/build/blocks/usp/usp-item/buildPreviewStyle.js

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+export function buildUspPreviewStyle(shared, resolveHex = (value) => value) {
+    var _a;
+    if (!shared) {
+        return { rootClassName: '', iconClassName: '', cssVars: {} };
+    }
+    const icon = (_a = shared.icon) !== null && _a !== void 0 ? _a : {};
+    const rootClassName = clsx(shared.direction && `--direction-${shared.direction}`, shared.align && `--align-${shared.align}`, shared.textAlign && `--body-align-${shared.textAlign}`, shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`, icon.background && '--icon-background', icon.color && '--icon-color', icon.borderColor && '--icon-bordered', shared.backgroundColor && '--background-color', shared.borderColor && '--border', shared.textColor && '--text-color');
+    const iconClassName = clsx(icon.backgroundShape && icon.backgroundShape !== 'none' && `--background-shape --background-shape-${icon.backgroundShape}`);
+    const cssVars = {};
+    if (shared.borderColor)
+        cssVars['--border-color'] = resolveHex(shared.borderColor);
+    if (shared.backgroundColor)
+        cssVars['--background-color'] = resolveHex(shared.backgroundColor);
+    if (shared.textColor)
+        cssVars['--text-color'] = resolveHex(shared.textColor);
+    if (icon.background)
+        cssVars['--icon-background-color'] = resolveHex(icon.background);
+    if (icon.color)
+        cssVars['--icon-color'] = resolveHex(icon.color);
+    if (icon.size)
+        cssVars['--icon-size'] = `${icon.size}px`;
+    if (icon.backgroundSize)
+        cssVars['--icon-background-size'] = `${icon.backgroundSize}px`;
+    if (icon.borderColor) {
+        cssVars['--icon-outline-color'] = resolveHex(icon.borderColor);
+        cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`;
+    }
+    return { rootClassName, iconClassName, cssVars };
+}

package/build/blocks/usp/usp-item/edit.d.ts

@@ -1,6 +1,10 @@
+import { type UspSharedStyle } from './buildPreviewStyle';
 import type { UspItemAttributes, UspItemOptions } from './types';
-export declare function createUspItemEdit(options: UspItemOptions): ({ attributes, setAttributes, }: {
+export declare function createUspItemEdit(options: UspItemOptions): ({ attributes, setAttributes, context, }: {
     attributes: UspItemAttributes;
     setAttributes: (a: Partial<UspItemAttributes>) => void;
+    context?: {
+        'brilo/usp-style'?: UspSharedStyle;
+    };
 }) => import("react").JSX.Element;
 //# sourceMappingURL=edit.d.ts.map

package/build/blocks/usp/usp-item/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/edit.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,cAAc,oCAIpD;IACD,UAAU,EAAE,iBAAiB,CAAA;IAC7B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CACvD,iCA+CF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/edit.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAuB,KAAK,cAAc,EAAC,MAAM,qBAAqB,CAAA;AAE7E,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,cAAc,6CAKpD;IACD,UAAU,EAAE,iBAAiB,CAAA;IAC7B,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACtD,OAAO,CAAC,EAAE;QAAC,iBAAiB,CAAC,EAAE,cAAc,CAAA;KAAC,CAAA;CAC/C,iCAwDF"}

package/build/blocks/usp/usp-item/edit.js

@@ -4,11 +4,15 @@ import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { ItemIconControl, ItemIconPreview } from '../../../components/ItemIconControl';
+import { useTenantColorPalette } from '../../../hooks/useTenantColorPalette';
+import { buildUspPreviewStyle } from './buildPreviewStyle';
 import { ICON_TYPES } from './constants';
 export function createUspItemEdit(options) {
-    return function Edit({ attributes, setAttributes, }) {
+    return function Edit({ attributes, setAttributes, context, }) {
         const { title, content, url, icon } = attributes;
-        const blockProps = useBlockProps({ className: 'i-usp' });
-        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsx(PanelBody, { title: __('Ikona', 'brilo-blocks'), children: _jsx(ItemIconControl, { icon: icon, setAttributes: setAttributes, iconTypes: ICON_TYPES, options: options }) }), _jsxs(PanelBody, { title: __('Odkaz', 'brilo-blocks'), initialOpen: false, children: [_jsx(TextControl, { label: __('URL', 'brilo-blocks'), value: url.src, onChange: (v) => setAttributes({ url: { ...url, src: v } }) }), _jsx(ToggleControl, { label: __('Otevřít v nové záložce', 'brilo-blocks'), checked: url.blank, onChange: (v) => setAttributes({ url: { ...url, blank: v } }) })] })] }), _jsx("div", { ...blockProps, children: _jsxs("div", { className: "i-usp__inner wp-block-inner", children: [_jsx(ItemIconPreview, { icon: icon, className: "i-usp__icon", setAttributes: setAttributes, options: options }), _jsxs("div", { className: clsx('i-usp__body', 'grow'), children: [_jsx(RichText, { tagName: "h3", className: "i-usp__title u-text-editable", value: title, onChange: (v) => setAttributes({ title: v }), placeholder: __('Nadpis...', 'brilo-blocks'), allowedFormats: ['core/bold', 'core/italic'] }), _jsx(RichText, { tagName: "p", className: "i-usp__content u-text-editable", value: content, onChange: (v) => setAttributes({ content: v }), placeholder: __('Popis...', 'brilo-blocks') })] })] }) })] }));
+        const { resolveHex } = useTenantColorPalette();
+        const { rootClassName, iconClassName, cssVars } = buildUspPreviewStyle(context === null || context === void 0 ? void 0 : context['brilo/usp-style'], resolveHex);
+        const blockProps = useBlockProps({ className: clsx('i-usp', rootClassName), style: cssVars });
+        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsx(PanelBody, { title: __('Ikona', 'brilo-blocks'), children: _jsx(ItemIconControl, { icon: icon, setAttributes: setAttributes, iconTypes: ICON_TYPES, options: options }) }), _jsxs(PanelBody, { title: __('Odkaz', 'brilo-blocks'), initialOpen: false, children: [_jsx(TextControl, { label: __('URL', 'brilo-blocks'), value: url.src, onChange: (v) => setAttributes({ url: { ...url, src: v } }) }), _jsx(ToggleControl, { label: __('Otevřít v nové záložce', 'brilo-blocks'), checked: url.blank, onChange: (v) => setAttributes({ url: { ...url, blank: v } }) })] })] }), _jsx("div", { ...blockProps, children: _jsxs("div", { className: "i-usp__inner wp-block-inner", children: [_jsx(ItemIconPreview, { icon: icon, className: "i-usp__icon", modifierClassName: iconClassName, style: cssVars, setAttributes: setAttributes, options: options }), _jsxs("div", { className: clsx('i-usp__body', 'grow'), children: [_jsx(RichText, { tagName: "h3", className: "i-usp__title u-text-editable", value: title, onChange: (v) => setAttributes({ title: v }), placeholder: __('Nadpis...', 'brilo-blocks'), allowedFormats: ['core/bold', 'core/italic'] }), _jsx(RichText, { tagName: "p", className: "i-usp__content u-text-editable", value: content, onChange: (v) => setAttributes({ content: v }), placeholder: __('Popis...', 'brilo-blocks') })] })] }) })] }));
     };
 }

package/build/blocks/usp/usp-item/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,YAAY,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAA;AAE/C,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAqBjG"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAIzD,OAAO,KAAK,EAAC,iBAAiB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAE9D,YAAY,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAA;AAE/C,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAsBjG"}

package/build/blocks/usp/usp-item/factory.js

@@ -11,6 +11,7 @@ export function createUspItemBlock(options) {
         ...(options.parent && { parent: options.parent }),
         icon: (_c = options.icon) !== null && _c !== void 0 ? _c : 'star-filled',
         supports: { html: false, customClassName: false },
+        usesContext: ['brilo/usp-style'],
         attributes: {
             title: { type: 'string', default: '' },
             content: { type: 'string', default: '' },

package/build/components/ItemIconControl/ItemIconPreview.d.ts

@@ -1,3 +1,3 @@
 import type { ItemIconPreviewProps } from './types';
-export declare function ItemIconPreview({ icon, className, options, setAttributes }: ItemIconPreviewProps): import("react").JSX.Element;
+export declare function ItemIconPreview({ icon, className, modifierClassName, style, options, setAttributes }: ItemIconPreviewProps): import("react").JSX.Element;
 //# sourceMappingURL=ItemIconPreview.d.ts.map

package/build/components/ItemIconControl/ItemIconPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemIconPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ItemIconControl/ItemIconPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAA;AAGjD,wBAAgB,eAAe,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAC,EAAE,oBAAoB,+BAsF9F"}
+{"version":3,"file":"ItemIconPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ItemIconControl/ItemIconPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAA;AAGjD,wBAAgB,eAAe,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAC,EAAE,oBAAoB,+BAsFxH"}

package/build/components/ItemIconControl/ItemIconPreview.js

@@ -3,7 +3,7 @@ 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 }) {
+export function ItemIconPreview({ icon, className, modifierClassName, style, options, setAttributes }) {
     var _a;
     var _b;
     const [isModalOpen, setModalOpen] = useState(false);
@@ -13,19 +13,19 @@ export function ItemIconPreview({ icon, className, options, setAttributes }) {
         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 }) }));
+                return (_jsx("div", { className: clsx('i-item-icon', className, modifierClassName), style: style, children: _jsx("img", { src: preselectedIconUrl, alt: "", className: clsx(className ? `${className}-img` : 'i-item-icon__img'), width: 40, height: 40 }) }));
             }
             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 (((_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, modifierClassName), style: style, 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" }) }));
         }
         if (icon.type === 'number') {
             if (icon.src) {
-                return (_jsx("div", { className: clsx('i-item-icon', className), children: _jsx("span", { className: clsx(className ? `${className}-number` : 'i-item-icon__number'), children: icon.src }) }));
+                return (_jsx("div", { className: clsx('i-item-icon', className, modifierClassName), style: style, children: _jsx("span", { className: clsx(className ? `${className}-number` : 'i-item-icon__number'), children: icon.src }) }));
             }
             return (_jsx("div", { className: clsx('i-item-icon', className ? `${className}-placeholder` : 'i-item-icon__placeholder'), children: _jsx("span", { children: "\u2606" }) }));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",

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

@@ -1,3 +1,16 @@
+import {__} from '@wordpress/i18n'
+
 export const CONTACT_COLUMNS = [2, 3] as const
 
 export const CONTACT_COLUMNS_CONTEXT = 'brilo/contact-columns'
+
+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

package/src/blocks/contact/contact-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 {CONTACT_COLUMNS} from './constants'
-import type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {CONTACT_COLUMNS, DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
+import type {ContactColumns, ContactGroupAttributes, ContactGroupOptions, ContactShadow, ContactTextAlign} from './types'
 
 export function createContactGroupEdit(options: ContactGroupOptions) {
   const COLUMNS = options.columns ?? CONTACT_COLUMNS
@@ -20,7 +23,8 @@ export function createContactGroupEdit(options: ContactGroupOptions) {
     attributes: ContactGroupAttributes
     setAttributes: (a: Partial<ContactGroupAttributes>) => void
   }) {
-    const {columns} = attributes
+    const {columns, style} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-contact wp-block-section'),
@@ -47,6 +51,53 @@ export function createContactGroupEdit(options: ContactGroupOptions) {
               ))}
             </ToggleGroupControl>
           </PanelBody>
+          <PanelBody title={__('Styl', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Stín', 'brilo-blocks')}
+              value={style.shadow}
+              onChange={(v) => setAttributes({style: {...style, shadow: v as ContactShadow}})}
+            >
+              {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="contact-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="contact-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="contact-group-text-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.textColor || undefined}
+                onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+              />
+            </BaseControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Zarovnání textu', 'brilo-blocks')}
+              value={style.textAlign}
+              onChange={(v) => setAttributes({style: {...style, textAlign: v as ContactTextAlign}})}
+            >
+              {TEXT_ALIGNS.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -2,7 +2,7 @@ import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {NumberArray} from '~/types'
-import {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
+import {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT, DEFAULT_SHADOWS} from './constants'
 import {createContactGroupEdit} from './edit'
 import type {ContactGroupAttributes, ContactGroupOptions} from './types'
 
@@ -28,6 +28,10 @@ export function createContactGroupBlock<TColumns extends NumberArray = typeof CO
         default: columns[1] ?? columns[0],
         enum: [...columns],
       },
+      style: {
+        type: 'object',
+        default: {shadow: DEFAULT_SHADOWS[0].value, borderColor: '', backgroundColor: '', textColor: '', textAlign: 'left'},
+      },
     },
     edit: createContactGroupEdit(options as unknown as ContactGroupOptions),
     save: () => <InnerBlocks.Content />,

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

@@ -1,10 +1,21 @@
 import type {BriloBlockType, NumberArray} from '~/types'
-import type {CONTACT_COLUMNS} from './constants'
+import type {CONTACT_COLUMNS, DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
 
 export type ContactColumns = (typeof CONTACT_COLUMNS)[number]
 
+export type ContactShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type ContactTextAlign = (typeof TEXT_ALIGNS)[number]['value']
+
 export interface ContactGroupAttributes<TColumns extends number = ContactColumns> extends Record<string, unknown> {
   columns: TColumns
+  style: {
+    shadow: ContactShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+    textAlign: ContactTextAlign
+  }
 }
 
 export interface ContactGroupOptions<TColumns extends NumberArray = typeof CONTACT_COLUMNS> extends BriloBlockType {

package/src/blocks/contact/contact-item/index.ts

@@ -17,6 +17,7 @@ export const contactItemDefaults: ContactItemOptions = {
     'brilo/column-group',
     'brilo/responsive-grid-group',
     'brilo/link-item',
+    'core/group',
   ],
   template: [
     ['core/heading', {level: 3}],

package/src/blocks/groups/text-and-media-group/editor.scss

@@ -82,6 +82,12 @@
   .g-text-and-media__inner-blocks {
     margin-top: 8px;
     min-height: 40px;
+
+    p,
+    ul,
+    ol {
+      margin-block: 8px;
+    }
   }
 
   .g-text-and-media__chip {
@@ -121,3 +127,11 @@
     }
   }
 }
+
+.g-text-and-media__inner-blocks {
+  p,
+  ul,
+  ol {
+    margin-block: 8px;
+  }
+}

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

@@ -6,5 +6,5 @@ import type {SignpostItemOptions} from './types'
 export const signpostItemDefaults: SignpostItemOptions = {
   name: 'brilo/signpost-item',
   parent: ['brilo/signpost-group'],
-  allowedBlocks: ['core/paragraph', 'core/list', 'core/heading'],
+  allowedBlocks: ['core/paragraph', 'core/list', 'core/heading', 'core/group', 'brilo/responsive-grid-group', 'brilo/link-item'],
 }

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

@@ -25,27 +25,39 @@ export const DEFAULT_SHADOWS = [
   {value: 'md', label: __('Střední', 'brilo-blocks')},
 ] as const
 
-export const DEFAULT_ICON_SIZES = [
-  {value: 'xs', label: __('Extra Malá', 'brilo-blocks'), description: __('48px', 'brilo-blocks')},
-  {value: 'sm', label: __('Malá', 'brilo-blocks'), description: __('64px', 'brilo-blocks')},
-  {value: 'default', label: __('Výchozí', 'brilo-blocks'), description: __('88px', 'brilo-blocks')},
-  {value: 'lg', label: __('Velká', 'brilo-blocks'), description: __('104px', 'brilo-blocks')},
-  {value: 'xl', label: __('Extra Velká', 'brilo-blocks'), description: __('128px', 'brilo-blocks')},
+export const DEFAULT_ICON_SIZE = 88
+export const ICON_SIZE_MIN = 4
+export const ICON_SIZE_MAX = 128
+
+export const DEFAULT_ICON_SIZE_PRESETS = [
+  {value: 8, label: __('XS', 'brilo-blocks')},
+  {value: 16, label: __('SM', 'brilo-blocks')},
+  {value: 24, label: __('MD', 'brilo-blocks')},
+  {value: 32, label: __('LG', 'brilo-blocks')},
+  {value: 48, label: __('XL', 'brilo-blocks')},
 ] as const
 
-export const DEFAULT_ICON_COLORS = [
-  {value: 'none', label: __('Žádná', 'brilo-blocks')},
-  {value: 'primary', label: __('Primární', 'brilo-blocks')},
-  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
-  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
-  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
+export const DEFAULT_ICON_BACKGROUND_SIZE = 88
+export const ICON_BACKGROUND_SIZE_MIN = 16
+export const ICON_BACKGROUND_SIZE_MAX = 240
+
+export const DEFAULT_ICON_BACKGROUND_SIZE_PRESETS = [
+  {value: 48, label: __('XS', 'brilo-blocks')},
+  {value: 64, label: __('SM', 'brilo-blocks')},
+  {value: 88, label: __('Výchozí', 'brilo-blocks')},
+  {value: 104, label: __('LG', 'brilo-blocks')},
+  {value: 128, label: __('XL', 'brilo-blocks')},
 ] as const
 
-export const DEFAULT_ICON_BACKGROUNDS = [
-  {value: 'none', label: __('Žádné', 'brilo-blocks')},
-  {value: 'primary', label: __('Primární', 'brilo-blocks')},
-  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
-  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+export const DEFAULT_ICON_BACKGROUND_SHAPES = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'circle', label: __('Kruh', 'brilo-blocks')},
+  {value: 'triangle', label: __('Trojúhelník', 'brilo-blocks')},
+  {value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks')},
+  {value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks')},
+  {value: 'bevel', label: __('Zkosený', 'brilo-blocks')},
+  {value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks')},
+  {value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks')},
 ] as const
 
 export const DEFAULT_ALIGNMENTS = [

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

@@ -1,10 +1,11 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
   PanelBody,
-  SelectControl,
-  ToggleControl,
+  Button,
+  RangeControl,
   BaseControl,
   ColorPalette,
+  SelectControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
@@ -18,11 +19,15 @@ import {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_DIRECTIONS,
   DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE_PRESETS,
+  DEFAULT_ICON_SIZE_PRESETS,
   DEFAULT_SHADOWS,
   HEADING_LEVELS,
+  ICON_BACKGROUND_SIZE_MAX,
+  ICON_BACKGROUND_SIZE_MIN,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
 } from './constants'
 import type {
   UspAlignment,
@@ -32,20 +37,48 @@ import type {
   UspGroupOptions,
   UspHeadingLevel,
   UspHeadingStyle,
-  UspIconBackground,
-  UspIconColor,
-  UspIconSize,
+  UspIconBackgroundShape,
+  UspSizePreset,
   UspShadow,
 } from './types'
 
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly UspSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`usp-group-size-${label}`}>
+      <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 createUspGroupEdit(options: UspGroupOptions) {
   const COLUMNS = options.columns ?? DEFAULT_COLUMNS
   const DIRECTIONS = options.directions ?? DEFAULT_DIRECTIONS
   const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
   const SHADOWS = options.shadows ?? DEFAULT_SHADOWS
-  const ICON_SIZES = options.iconSizes ?? DEFAULT_ICON_SIZES
-  const ICON_COLORS = options.iconColors ?? DEFAULT_ICON_COLORS
-  const ICON_BACKGROUND = options.iconBackgrounds ?? DEFAULT_ICON_BACKGROUNDS
+  const ICON_SIZE_PRESETS = options.iconSizePresets ?? DEFAULT_ICON_SIZE_PRESETS
+  const ICON_BACKGROUND_SIZE_PRESETS = options.iconBackgroundSizePresets ?? DEFAULT_ICON_BACKGROUND_SIZE_PRESETS
+  const ICON_BACKGROUND_SHAPES = options.iconBackgroundShapes ?? DEFAULT_ICON_BACKGROUND_SHAPES
   const ALIGNMENTS = options.alignments ?? DEFAULT_ALIGNMENTS
   const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
 
@@ -110,6 +143,18 @@ export function createUspGroupEdit(options: UspGroupOptions) {
                 ))}
               </ToggleGroupControl>
             )}
+            {style.direction === 'vertical' && (
+              <ToggleGroupControl
+                isBlock
+                label={__('Zarovnání textu', 'brilo-blocks')}
+                value={style.textAlign}
+                onChange={(v) => setAttributes({style: {...style, textAlign: (v as string) ?? ''}})}
+              >
+                {ALIGNMENTS.map((a) => (
+                  <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+                ))}
+              </ToggleGroupControl>
+            )}
             <ToggleGroupControl
               isBlock
               label={__('Úroveň nadpisu položek', 'brilo-blocks')}
@@ -180,33 +225,63 @@ export function createUspGroupEdit(options: UspGroupOptions) {
             </BaseControl>
           </PanelBody>
           <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
-            <ToggleGroupControl
-              isBlock
+            <PresetSizeControl
               label={__('Velikost', 'brilo-blocks')}
               value={style.icon.size}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v as UspIconSize}}})}
-            >
-              {ICON_SIZES.map((s) => (
-                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} aria-label={s.description} showTooltip />
-              ))}
-            </ToggleGroupControl>
-            <SelectControl<string>
-              label={__('Barva', 'brilo-blocks')}
-              value={style.icon.color}
-              options={[...ICON_COLORS]}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, color: v as UspIconColor}}})}
+              presets={ICON_SIZE_PRESETS}
+              min={ICON_SIZE_MIN}
+              max={ICON_SIZE_MAX}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v}}})}
             />
-            <SelectControl<string>
-              label={__('Pozadí', 'brilo-blocks')}
-              value={style.icon.background}
-              options={[...ICON_BACKGROUND]}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, background: v as UspIconBackground}}})}
+            <BaseControl label={__('Barva', 'brilo-blocks')} id="usp-group-icon-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.color || undefined}
+                onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, color: value ?? ''}}})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Pozadí', 'brilo-blocks')} id="usp-group-icon-background-color">
+              <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')}
+              value={style.icon.backgroundSize}
+              presets={ICON_BACKGROUND_SIZE_PRESETS}
+              min={ICON_BACKGROUND_SIZE_MIN}
+              max={ICON_BACKGROUND_SIZE_MAX}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, backgroundSize: v}}})}
             />
-            {style.icon.background !== 'none' && (
-              <ToggleControl
-                label={__('Ohraničení ikony', 'brilo-blocks')}
-                checked={style.icon.bordered ?? false}
-                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, bordered: v}}})}
+            {style.icon.background && (
+              <SelectControl<string>
+                label={__('Tvar pozadí', 'brilo-blocks')}
+                value={style.icon.backgroundShape}
+                options={[...ICON_BACKGROUND_SHAPES]}
+                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, backgroundShape: v as UspIconBackgroundShape}}})}
+              />
+            )}
+            <BaseControl
+              label={__('Barva ohraničení', 'brilo-blocks')}
+              help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+              id="usp-group-icon-border-color"
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.borderColor || undefined}
+                onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, borderColor: value ?? ''}}})}
+              />
+            </BaseControl>
+            {style.icon.borderColor && (
+              <RangeControl
+                label={__('Šířka ohraničení (px)', 'brilo-blocks')}
+                value={style.icon.borderWidth}
+                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, borderWidth: v ?? 0}}})}
+                min={0}
+                max={10}
+                step={1}
               />
             )}
           </PanelBody>