@brilo/base-blocks 0.1.13 → 0.1.15

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},
         },
       },

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

@@ -42,6 +42,9 @@ export interface UspGroupAttributes<
     card: boolean
     direction: TDirection
     align: TAlignment
+    borderColor: string
+    backgroundColor: string
+    textColor: string
     icon: {size: TIconSize; color: TIconColor; background: TIconBackground; bordered?: boolean}
   }
 }

package/src/components/ImagePicker/ImagePicker.tsx

@@ -30,7 +30,7 @@ export function useMediaData(id: number): {url?: string; mimeType?: string} {
     (select) => {
       if (!id) return {}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const media = (select('core') as any).getMedia(id)
+      const media = (select('core') as any).getEntityRecord('postType', 'attachment', id)
       return {
         url: media?.source_url as string | undefined,
         mimeType: media?.mime_type as string | undefined,

package/src/components/ItemIconControl/ItemIconControl.tsx

@@ -42,7 +42,7 @@ export function ItemIconControl({icon, setAttributes, options, iconTypes}: ItemI
 
       {icon.type === 'media' && (
         <ImagePickerControl
-          value={icon.media}
+          value={icon.media ?? {id: 0, alt: ''}}
           onChange={(val) => setAttributes({icon: {...icon, media: val}})}
           labels={{
             select: __('Vybrat ikonu', 'brilo-blocks'),

package/src/components/ItemIconControl/ItemIconPreview.tsx

@@ -6,7 +6,7 @@ import {ItemIconModal} from './ItemIconModal'
 
 export function ItemIconPreview({icon, className, options, setAttributes}: ItemIconPreviewProps) {
   const [isModalOpen, setModalOpen] = useState(false)
-  const mediaIconUrl = useMediaUrl(icon.media.id)
+  const mediaIconUrl = useMediaUrl(icon.media?.id ?? 0)
   const preselectedIconUrl = icon.type === 'preselected' && icon.src ? `${options.iconsSrc}${icon.src}.svg` : ''
 
   const renderContent = () => {
@@ -41,7 +41,7 @@ export function ItemIconPreview({icon, className, options, setAttributes}: ItemI
     }
 
     if (icon.type === 'media') {
-      if (icon.media.id && mediaIconUrl) {
+      if (icon.media?.id && mediaIconUrl) {
         return (
           <div className={clsx('i-item-icon', className)}>
             <img src={mediaIconUrl} alt={icon.media.alt} className={clsx(className ? `${className}-img` : null, 'i-item-icon__img')} />

package/src/index.ts

@@ -21,6 +21,7 @@ export {
   CONTACT_ICON_TYPES,
   contactItemDefaults,
   createContactItemBlock,
+  createContactItemEdit,
 } from './blocks/contact/contact-item'
 export type {FaqItemAttributes, FaqItemOptions} from './blocks/faq/faq-item'
 export {createFaqItemBlock, faqItemDefaults} from './blocks/faq/faq-item'