@brilo/base-blocks 0.1.15 → 0.1.16

package/build/blocks/contact/contact-group/constants.d.ts

@@ -1,3 +1,20 @@
 export declare const CONTACT_COLUMNS: readonly [2, 3];
 export declare const CONTACT_COLUMNS_CONTEXT = "brilo/contact-columns";
+export declare const DEFAULT_SHADOWS: readonly [{
+    readonly value: 'none';
+    readonly label: import("@wordpress/i18n").TransformedText<"Žádný">;
+}, {
+    readonly value: 'sm';
+    readonly label: import("@wordpress/i18n").TransformedText<"Malý">;
+}, {
+    readonly value: 'md';
+    readonly label: import("@wordpress/i18n").TransformedText<"Střední">;
+}];
+export declare const TEXT_ALIGNS: readonly [{
+    readonly value: 'left';
+    readonly label: import("@wordpress/i18n").TransformedText<"Vlevo">;
+}, {
+    readonly value: 'center';
+    readonly label: import("@wordpress/i18n").TransformedText<"Na střed">;
+}];
 //# sourceMappingURL=constants.d.ts.map

package/build/blocks/contact/contact-group/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,YAAI,CAAC,EAAE,CAAC,CAAU,CAAA;AAE9C,eAAO,MAAM,uBAAuB,0BAA0B,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,YAAI,CAAC,EAAE,CAAC,CAAU,CAAA;AAE9C,eAAO,MAAM,uBAAuB,0BAA0B,CAAA;AAE9D,eAAO,MAAM,eAAe;aACzB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,IAAI;aAAE,KAAK;;aAClB,KAAK,EAAE,IAAI;aAAE,KAAK;EACX,CAAA;AAEV,eAAO,MAAM,WAAW;aACrB,KAAK,EAAE,MAAM;aAAE,KAAK;;aACpB,KAAK,EAAE,QAAQ;aAAE,KAAK;EACf,CAAA"}

package/build/blocks/contact/contact-group/constants.js

@@ -1,2 +1,12 @@
+import { __ } from '@wordpress/i18n';
 export const CONTACT_COLUMNS = [2, 3];
 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') },
+];
+export const TEXT_ALIGNS = [
+    { value: 'left', label: __('Vlevo', 'brilo-blocks') },
+    { value: 'center', label: __('Na střed', 'brilo-blocks') },
+];

package/build/blocks/contact/contact-group/edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/edit.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAiB,sBAAsB,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAExF,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,mBAAmB,oCAM9D;IACD,UAAU,EAAE,sBAAsB,CAAA;IAClC,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,KAAK,IAAI,CAAA;CAC5D,iCAmCF"}
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/edit.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAiB,sBAAsB,EAAE,mBAAmB,EAAkC,MAAM,SAAS,CAAA;AAEzH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,mBAAmB,oCAM9D;IACD,UAAU,EAAE,sBAAsB,CAAA;IAClC,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,KAAK,IAAI,CAAA;CAC5D,iCAmFF"}

package/build/blocks/contact/contact-group/edit.js

@@ -1,16 +1,18 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components';
+import { BaseControl, ColorPalette, PanelBody, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useGroupBlock } from '../../../hooks/useGroupBlock';
-import { CONTACT_COLUMNS } from './constants';
+import { useTenantColorPalette } from '../../../hooks/useTenantColorPalette';
+import { CONTACT_COLUMNS, DEFAULT_SHADOWS, TEXT_ALIGNS } from './constants';
 export function createContactGroupEdit(options) {
     var _a;
     const COLUMNS = (_a = options.columns) !== null && _a !== void 0 ? _a : CONTACT_COLUMNS;
     return function Edit({ attributes, setAttributes, }) {
         var _a, _b;
-        const { columns } = attributes;
+        const { columns, style } = attributes;
+        const { paletteColors } = useTenantColorPalette();
         const { blockProps, innerBlocksProps } = useGroupBlock({
             blockClassName: clsx((_a = options.blockClassName) !== null && _a !== void 0 ? _a : 'g-contact wp-block-section'),
             containerClassName: [(_b = options.containerClassName) !== null && _b !== void 0 ? _b : 'g-contact__items', `--cols-${columns}`],
@@ -20,6 +22,6 @@ export function createContactGroupEdit(options) {
             template: options.template,
             layout: { type: 'default' },
         });
-        return (_jsxs(_Fragment, { children: [_jsx(InspectorControls, { children: _jsx(PanelBody, { title: __('Rozložení', 'brilo-blocks'), children: _jsx(ToggleGroupControl, { isBlock: true, label: __('Počet sloupců', 'brilo-blocks'), value: String(columns), onChange: (v) => setAttributes({ columns: Number(v) }), children: COLUMNS.map((c) => (_jsx(ToggleGroupControlOption, { value: String(c), label: String(c) }, c))) }) }) }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(InspectorControls, { children: [_jsx(PanelBody, { title: __('Rozložení', 'brilo-blocks'), children: _jsx(ToggleGroupControl, { isBlock: true, label: __('Počet sloupců', 'brilo-blocks'), value: String(columns), onChange: (v) => setAttributes({ columns: Number(v) }), children: COLUMNS.map((c) => (_jsx(ToggleGroupControlOption, { value: String(c), label: String(c) }, c))) }) }), _jsxs(PanelBody, { title: __('Styl', 'brilo-blocks'), children: [_jsx(ToggleGroupControl, { isBlock: true, label: __('Stín', 'brilo-blocks'), value: style.shadow, onChange: (v) => setAttributes({ style: { ...style, shadow: v } }), children: DEFAULT_SHADOWS.map((s) => (_jsx(ToggleGroupControlOption, { value: s.value, label: s.label }, s.value))) }), _jsx(BaseControl, { label: __('Barva okraje', 'brilo-blocks'), help: __('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks'), id: "contact-group-border-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.borderColor || undefined, onChange: (value) => setAttributes({ style: { ...style, borderColor: value !== null && value !== void 0 ? value : '' } }) }) }), _jsx(BaseControl, { label: __('Barva pozadí', 'brilo-blocks'), id: "contact-group-background-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.backgroundColor || undefined, onChange: (value) => setAttributes({ style: { ...style, backgroundColor: value !== null && value !== void 0 ? value : '' } }) }) }), _jsx(BaseControl, { label: __('Barva textu', 'brilo-blocks'), id: "contact-group-text-color", children: _jsx(ColorPalette, { colors: paletteColors, value: style.textColor || undefined, onChange: (value) => setAttributes({ style: { ...style, textColor: value !== null && value !== void 0 ? value : '' } }) }) }), _jsx(ToggleGroupControl, { isBlock: true, label: __('Zarovnání textu', 'brilo-blocks'), value: style.textAlign, onChange: (v) => setAttributes({ style: { ...style, textAlign: v } }), children: TEXT_ALIGNS.map((a) => (_jsx(ToggleGroupControlOption, { value: a.value, label: a.label }, a.value))) })] })] }), _jsx("div", { ...blockProps, children: _jsx("div", { ...innerBlocksProps }) })] }));
     };
 }

package/build/blocks/contact/contact-group/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AACxC,OAAO,EAAC,eAAe,EAA0B,MAAM,aAAa,CAAA;AAEpE,OAAO,KAAK,EAAC,sBAAsB,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAExE,YAAY,EAAC,sBAAsB,EAAE,mBAAmB,EAAC,CAAA;AAEzD,wBAAgB,uBAAuB,CAAC,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,EAC3F,OAAO,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GACrC,kBAAkB,CAAC,sBAAsB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAsB9D"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/factory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AACxC,OAAO,EAAC,eAAe,EAA2C,MAAM,aAAa,CAAA;AAErF,OAAO,KAAK,EAAC,sBAAsB,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAExE,YAAY,EAAC,sBAAsB,EAAE,mBAAmB,EAAC,CAAA;AAEzD,wBAAgB,uBAAuB,CAAC,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,EAC3F,OAAO,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GACrC,kBAAkB,CAAC,sBAAsB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CA0B9D"}

package/build/blocks/contact/contact-group/factory.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT } from './constants';
+import { CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT, DEFAULT_SHADOWS } from './constants';
 import { createContactGroupEdit } from './edit';
 export function createContactGroupBlock(options) {
     var _a, _b, _c, _d, _e;
@@ -21,6 +21,10 @@ export function createContactGroupBlock(options) {
                 default: (_e = columns[1]) !== null && _e !== void 0 ? _e : columns[0],
                 enum: [...columns],
             },
+            style: {
+                type: 'object',
+                default: { shadow: DEFAULT_SHADOWS[0].value, borderColor: '', backgroundColor: '', textColor: '', textAlign: 'left' },
+            },
         },
         edit: createContactGroupEdit(options),
         save: () => _jsx(InnerBlocks.Content, {}),

package/build/blocks/contact/contact-group/types.d.ts

@@ -1,8 +1,17 @@
 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 {
     columns?: TColumns;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACxD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,aAAa,CAAA;AAEhD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,cAAc,CAAE,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/G,OAAO,EAAE,QAAQ,CAAA;CAClB;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,CAAE,SAAQ,cAAc;IAChH,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACxD,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAC,MAAM,aAAa,CAAA;AAE9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAErE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAEpE,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,cAAc,CAAE,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/G,OAAO,EAAE,QAAQ,CAAA;IACjB,KAAK,EAAE;QACL,MAAM,EAAE,aAAa,CAAA;QACrB,WAAW,EAAE,MAAM,CAAA;QACnB,eAAe,EAAE,MAAM,CAAA;QACvB,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE,gBAAgB,CAAA;KAC5B,CAAA;CACF;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ,SAAS,WAAW,GAAG,OAAO,eAAe,CAAE,SAAQ,cAAc;IAChH,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB"}

package/build/blocks/contact/contact-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,eAAe,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAC/G,OAAO,EAAC,sBAAsB,EAAC,MAAM,WAAW,CAAA;AAChD,OAAO,EAAC,qBAAqB,EAAC,MAAM,QAAQ,CAAA;AAC5C,OAAO,EAAC,uBAAuB,EAAE,kBAAkB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAA;AAE3F,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAE/C,eAAO,MAAM,mBAAmB,EAAE,kBAiBjC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/contact/contact-item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,eAAe,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAC/G,OAAO,EAAC,sBAAsB,EAAC,MAAM,WAAW,CAAA;AAChD,OAAO,EAAC,qBAAqB,EAAC,MAAM,QAAQ,CAAA;AAC5C,OAAO,EAAC,uBAAuB,EAAE,kBAAkB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAA;AAE3F,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAE/C,eAAO,MAAM,mBAAmB,EAAE,kBAkBjC,CAAA"}

package/build/blocks/contact/contact-item/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "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}],