@brilo/base-blocks 0.1.14 → 0.1.16

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

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/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')} />