@brilo/base-blocks 0.1.7 → 0.1.9

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

@@ -0,0 +1,103 @@
+import {InspectorControls, RichText} from '@wordpress/block-editor'
+import {PanelBody, TextControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerControl} from '~/components/ImagePicker'
+import type {PersonItemAttributes, PersonItemOptions} from './types'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import clsx from 'clsx'
+import {Icon, mobile, envelope} from '@wordpress/icons'
+
+export function createPersonItemEdit(options: PersonItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PersonItemAttributes
+    setAttributes: (a: Partial<PersonItemAttributes>) => void
+  }) {
+    const {title, description, img, email, phone} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-person'),
+      containerClassName: [options.containerClassName ?? 'i-person__content wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+          <PanelBody title={__('Kontakty', 'brilo-blocks')}>
+            <TextControl label={__('Email', 'brilo-blocks')} value={email} onChange={(v) => setAttributes({email: v})} />
+            <TextControl label={__('Telefon', 'brilo-blocks')} value={phone} onChange={(v) => setAttributes({phone: v})} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-person__inner">
+            <div className="i-person__image-wrapper">
+              {img.id ? (
+                <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} size={[96, 96]} />
+              ) : (
+                <div className="i-person__image-placeholder">
+                  <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+                </div>
+              )}
+            </div>
+
+            <div className="i-person__body">
+              <RichText
+                tagName="h3"
+                className="i-person__title u-text-editable"
+                value={title}
+                onChange={(v) => setAttributes({title: v})}
+                placeholder={__('Nadpis...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+
+              <RichText
+                tagName="p"
+                className="i-person__description u-text-editable"
+                value={description}
+                onChange={(v) => setAttributes({description: v})}
+                placeholder={__('Popis...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+
+              <div {...innerBlocksProps} />
+
+              <div className="i-person__contact">
+                <Icon icon={envelope} />
+                <RichText
+                  tagName="p"
+                  className="i-person__email u-text-editable"
+                  value={email}
+                  onChange={(v) => setAttributes({email: v})}
+                  placeholder={__('Email...', 'brilo-blocks')}
+                  allowedFormats={[]}
+                />
+              </div>
+
+              <div className="i-person__contact">
+                <Icon icon={mobile} />
+                <RichText
+                  tagName="p"
+                  className="i-person__phone u-text-editable"
+                  value={phone}
+                  onChange={(v) => setAttributes({phone: v})}
+                  placeholder={__('Telefon...', 'brilo-blocks')}
+                  allowedFormats={[]}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/person/person-item/editor.scss

@@ -0,0 +1,35 @@
+@layer base {
+  .i-person {
+    width: 100%;
+  }
+
+  .i-person__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+
+  .i-person__image-placeholder {
+    border: 1px dashed #0073aa;
+    padding: 16px 8px 8px;
+  }
+
+  .i-person__image-wrapper {
+    .c-image-picker-control__row {
+      flex-direction: column;
+    }
+  }
+
+  .i-person__contact {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .u-text-editable {
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createPersonItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PersonItemAttributes, PersonItemOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export type {PersonItemAttributes, PersonItemOptions}
+
+export function createPersonItemBlock(options: PersonItemOptions): BlockConfiguration<PersonItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Položka osoby', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      description: {type: 'string', default: ''},
+      img: {type: 'object', default: {id: 0, alt: ''}},
+      email: {type: 'string', default: ''},
+      phone: {type: 'string', default: ''},
+    },
+    edit: createPersonItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<PersonItemAttributes>
+}

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

@@ -0,0 +1,7 @@
+import {Path, SVG} from '@wordpress/components'
+
+export const icon = (
+  <SVG width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <Path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+  </SVG>
+)

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

@@ -0,0 +1,10 @@
+export type {PersonItemAttributes, PersonItemOptions} from './types'
+export {createPersonItemBlock} from './factory'
+
+import type {PersonItemOptions} from './types'
+
+export const personItemDefaults: PersonItemOptions = {
+  name: 'brilo/person-item',
+  parent: ['brilo/person-group'],
+  allowedBlocks: ['core/paragraph', 'core/list', 'core/heading'],
+}

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

@@ -0,0 +1,12 @@
+import {BriloBlockType} from '~/types'
+import {ImageValue} from '~/components/ImagePicker/ImagePicker'
+
+export interface PersonItemAttributes extends Record<string, unknown> {
+  title: string
+  description: string
+  img: ImageValue
+  email: string
+  phone: string
+}
+
+export interface PersonItemOptions extends BriloBlockType {}

package/src/blocks/responsive-grid/responsive-grid-item/editor.scss

@@ -0,0 +1,9 @@
+.wp-block-brilo-responsive-grid-item {
+  width: 100%;
+  margin-block: 0;
+}
+
+.u-grid-responsive__item-inner {
+  padding: 8px;
+  outline: 1px solid var(--border-color);
+}

package/src/blocks/sections/base-section/attributes.ts

@@ -12,6 +12,10 @@ export const baseAttributes = {
   },
   background: {
     type: 'string',
-    default: 'none',
+    default: '',
+  },
+  textColor: {
+    type: 'string',
+    default: '',
   },
 } as const

package/src/blocks/sections/base-section/constants.ts

@@ -8,11 +8,3 @@ export const SPACING_POSITIONS = [
 ] as const
 
 export const SPACING_SIZES = ['default', 'sm', 'xs'] as const
-
-export const BACKGROUNDS = [
-  {value: 'none', label: __('Žádné', 'brilo-blocks')},
-  {value: 'primary', label: __('Primární', 'brilo-blocks')},
-  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
-  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
-  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
-] as const

package/src/blocks/sections/base-section/controls.tsx

@@ -1,3 +1,4 @@
+import {ColorPalette, ContrastChecker} from '@wordpress/block-editor'
 import {
   PanelBody,
   SelectControl,
@@ -6,8 +7,9 @@ import {
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import type {BaseBlockAttributes, ExcludableBaseAttr} from './types'
-import {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+import {SPACING_POSITIONS, SPACING_SIZES} from './constants'
 
 type SpacingPosition = BaseBlockAttributes['spacing']['position']
 type SpacingSize = BaseBlockAttributes['spacing']['size']
@@ -19,7 +21,8 @@ interface BaseControlsProps {
 }
 
 export function BaseControls({attributes, setAttributes, exclude}: BaseControlsProps) {
-  const {id, spacing, background} = attributes
+  const {id, spacing, background, textColor} = attributes
+  const {paletteColors, resolveHex} = useTenantColorPalette()
 
   return (
     <>
@@ -45,13 +48,20 @@ export function BaseControls({attributes, setAttributes, exclude}: BaseControlsP
       )}
 
       {!exclude.includes('background') && (
-        <PanelBody title={__('Pozadí', 'brilo-blocks')}>
-          <SelectControl<string>
-            label={__('Pozadí', 'brilo-blocks')}
-            value={background}
-            options={[...BACKGROUNDS]}
-            onChange={(value) => setAttributes({background: value})}
+        <PanelBody title={__('Barvy', 'brilo-blocks')}>
+          <p>{__('Pozadí', 'brilo-blocks')}</p>
+          <ColorPalette
+            colors={paletteColors}
+            value={background || undefined}
+            onChange={(value) => setAttributes({background: value ?? ''})}
+          />
+          <p>{__('Barva textu', 'brilo-blocks')}</p>
+          <ColorPalette
+            colors={paletteColors}
+            value={textColor || undefined}
+            onChange={(value) => setAttributes({textColor: value ?? ''})}
           />
+          {!!background && !!textColor && <ContrastChecker backgroundColor={resolveHex(background)} textColor={resolveHex(textColor)} />}
         </PanelBody>
       )}
 

package/src/blocks/sections/base-section/edit.tsx

@@ -8,7 +8,14 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
 
   return function Edit(props: BlockEditProps<BaseBlockAttributes & TExtra>) {
     const {attributes, setAttributes} = props
-    const blockProps = useBlockProps({className: options.blockClassName})
+    const {background, textColor} = attributes as BaseBlockAttributes
+    const blockProps = useBlockProps({
+      className: options.blockClassName,
+      style: {
+        ...(background ? {backgroundColor: background, padding: '16px'} : {}),
+        ...(textColor ? {color: textColor} : {}),
+      },
+    })
     const innerBlocksProps = useInnerBlocksProps({className: options.containerClassName}, {
       allowedBlocks: options.allowedBlocks,
       orientation: 'vertical',

package/src/blocks/sections/base-section/factory.tsx

@@ -2,7 +2,6 @@ import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {baseAttributes} from './attributes'
-import {BACKGROUNDS} from './constants'
 import {createBaseSectionEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
@@ -16,12 +15,9 @@ export function createBaseSectionBlock<TExtra extends Record<string, unknown> =
 
   const attributes: Record<string, unknown> = {}
   for (const [key, value] of Object.entries(baseAttributes)) {
-    if (!exclude.includes(key as keyof typeof baseAttributes)) {
-      if (key === 'background') {
-        attributes[key] = {...value, enum: BACKGROUNDS.map((b) => b.value)}
-      } else {
-        attributes[key] = value
-      }
+    const excludeKey: ExcludableBaseAttr = key === 'textColor' ? 'background' : (key as ExcludableBaseAttr)
+    if (!exclude.includes(excludeKey)) {
+      attributes[key] = value
     }
   }
 

package/src/blocks/sections/base-section/index.ts

@@ -1,6 +1,6 @@
 export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
 export {baseAttributes} from './attributes'
-export {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+export {SPACING_POSITIONS, SPACING_SIZES} from './constants'
 export {createBaseSectionEdit} from './edit'
 export {createBaseSectionBlock} from './factory'
 

package/src/blocks/sections/base-section/types.ts

@@ -9,6 +9,7 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
     size: string
   }
   background: string
+  textColor: string
 }
 
 export type ExcludableBaseAttr = 'spacing' | 'background' | 'id'

package/src/components/ImagePicker/ImagePicker.tsx

@@ -7,6 +7,7 @@ import {CSSProperties} from 'react'
 export interface ImageValue {
   id: number
   alt: string
+  mimeType?: string
 }
 
 export interface ImageLabels {
@@ -24,30 +25,38 @@ interface ImagePickerProps {
   size?: [number, number]
 }
 
-export function useMediaUrl(id: number): string | undefined {
+export function useMediaData(id: number): {url?: string; mimeType?: string} {
   return useSelect(
     (select) => {
-      if (!id) return undefined
+      if (!id) return {}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const media = (select('core') as any).getMedia(id)
-      return media?.source_url as string | undefined
+      return {
+        url: media?.source_url as string | undefined,
+        mimeType: media?.mime_type as string | undefined,
+      }
     },
     [id],
   )
 }
 
+export function useMediaUrl(id: number): string | undefined {
+  return useMediaData(id).url
+}
+
 function useImagePicker(value: ImageValue, onChange: (v: ImageValue) => void, labels?: ImageLabels) {
-  const mediaUrl = useMediaUrl(value.id)
+  const {url: mediaUrl, mimeType} = useMediaData(value.id)
   const selectLabel = labels?.select ?? __('Vybrat obrázek', 'brilo-blocks')
   const changeLabel = labels?.change ?? __('Změnit', 'brilo-blocks')
   const removeLabel = labels?.remove ?? __('Odebrat', 'brilo-blocks')
-  const handleSelect = (media: {id: number; alt: string}) => onChange({id: media.id, alt: media.alt ?? ''})
+  const handleSelect = (media: {id: number; alt: string; mime?: string; type?: string}) =>
+    onChange({id: media.id, alt: media.alt ?? '', mimeType: media.mime ?? (media.type === 'video' ? 'video' : undefined)})
   const handleRemove = () => onChange({id: 0, alt: ''})
-  return {mediaUrl, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove}
+  return {mediaUrl, mimeType: value.mimeType ?? mimeType, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove}
 }
 
 export function ImagePickerBody({value, onChange, allowedTypes = ['image'], placeholder, labels}: ImagePickerProps) {
-  const {mediaUrl, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove} = useImagePicker(value, onChange, labels)
+  const {mediaUrl, mimeType, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove} = useImagePicker(value, onChange, labels)
 
   return (
     <MediaUploadCheck>
@@ -58,7 +67,10 @@ export function ImagePickerBody({value, onChange, allowedTypes = ['image'], plac
         render={({open}: {open: () => void}) =>
           value.id ? (
             <div className="c-image-picker-body">
-              <div className="c-image-picker-body__preview">{mediaUrl && <img src={mediaUrl} alt={value.alt} />}</div>
+              <div className="c-image-picker-body__preview">
+                {mediaUrl &&
+                  (mimeType?.startsWith('video') ? <video src={mediaUrl} autoPlay muted loop /> : <img src={mediaUrl} alt={value.alt} />)}
+              </div>
               <div className="c-image-picker-body__actions">
                 <Button onClick={open} variant="secondary">
                   {changeLabel}
@@ -80,7 +92,7 @@ export function ImagePickerBody({value, onChange, allowedTypes = ['image'], plac
 }
 
 export function ImagePickerControl({value, onChange, allowedTypes = ['image'], placeholder, labels, size = [48, 48]}: ImagePickerProps) {
-  const {mediaUrl, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove} = useImagePicker(value, onChange, labels)
+  const {mediaUrl, mimeType, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove} = useImagePicker(value, onChange, labels)
 
   return (
     <div
@@ -101,7 +113,7 @@ export function ImagePickerControl({value, onChange, allowedTypes = ['image'], p
             <div className="c-image-picker-control__row">
               {!!value.id && !!mediaUrl && (
                 <div className="c-image-picker-control__thumb">
-                  <img src={mediaUrl} alt={value.alt} />
+                  {mimeType?.startsWith('video') ? <video src={mediaUrl} autoPlay muted loop /> : <img src={mediaUrl} alt={value.alt} />}
                 </div>
               )}
               <div className="c-image-picker-control__btns">

package/src/components/ImagePicker/editor.scss

@@ -64,8 +64,8 @@
 
     img {
       width: 100%;
-      height: 100%;
-      object-fit: cover;
+      max-height: 100%;
+      object-fit: contain;
       display: block;
     }
   }

package/src/editor.scss

@@ -1,5 +1,6 @@
 @forward "./globals";
 @forward "./blocks/column/column-group/editor";
+@forward "./blocks/link/link-item/editor";
 @forward "./blocks/column/column-item/editor";
 @forward "./blocks/compare/compare-item/editor";
 @forward "./blocks/compare/compare-option/editor";
@@ -12,6 +13,8 @@
 @forward "./blocks/faq/faq-item/editor";
 @forward "./blocks/form/form-field/editor";
 @forward "./blocks/form/form-group/editor";
+@forward "./blocks/gallery/gallery-group/editor";
+@forward "./blocks/gallery/gallery-item/editor";
 @forward "./blocks/groups/banner-group/editor";
 @forward "./blocks/groups/basic-header-group/editor";
 @forward "./blocks/groups/button-group/editor";
@@ -29,6 +32,9 @@
 @forward "./blocks/text-and-form/text-and-form-text-column/editor";
 @forward "./blocks/usp/usp-group/editor";
 @forward "./blocks/usp/usp-item/editor";
+@forward "./blocks/person/person-group/editor";
+@forward "./blocks/person/person-item/editor";
+@forward "./blocks/responsive-grid/responsive-grid-item/editor";
 @forward "./components/IconControl/editor";
 @forward "./components/ImagePicker/editor";
 @forward "./components/ItemIconControl/editor";

package/src/hooks/useTenantColorPalette.ts

@@ -0,0 +1,21 @@
+import {useSettings} from '@wordpress/block-editor'
+import {useMemo} from '@wordpress/element'
+
+interface PaletteColor {
+  name: string
+  slug: string
+  color: string
+}
+
+export function useTenantColorPalette() {
+  const [rawColors] = useSettings('color.palette')
+  const colors = (rawColors ?? []) as PaletteColor[]
+
+  return useMemo(() => {
+    const paletteColors = colors.map((c) => ({...c, color: `var(--${c.slug})`}))
+    const hexByValue = new Map(colors.map((c) => [`var(--${c.slug})`, c.color]))
+    const resolveHex = (value: string) => hexByValue.get(value) ?? value
+
+    return {paletteColors, resolveHex}
+  }, [colors])
+}

package/src/index.ts

@@ -56,6 +56,14 @@ export type {UspGroupAttributes, UspGroupOptions} from './blocks/usp/usp-group'
 export {createUspGroupBlock, uspGroupDefaults} from './blocks/usp/usp-group'
 export type {UspItemAttributes, UspItemOptions} from './blocks/usp/usp-item'
 export {createUspItemBlock, uspItemDefaults} from './blocks/usp/usp-item'
+export type {GalleryGroupAttributes, GalleryGroupOptions} from './blocks/gallery/gallery-group'
+export {createGalleryGroupBlock, galleryGroupDefaults} from './blocks/gallery/gallery-group'
+export type {GalleryItemAttributes, GalleryItemOptions} from './blocks/gallery/gallery-item'
+export {createGalleryItemBlock, galleryItemDefaults} from './blocks/gallery/gallery-item'
+export type {PersonGroupAttributes, PersonGroupOptions} from './blocks/person/person-group'
+export {createPersonGroupBlock, personGroupDefaults} from './blocks/person/person-group'
+export type {PersonItemAttributes, PersonItemOptions} from './blocks/person/person-item'
+export {createPersonItemBlock, personItemDefaults} from './blocks/person/person-item'
 export type {TestimonialGroupAttributes} from './blocks/testimonial/testimonial-group'
 export {createTestimonialGroupBlock, testimonialGroupDefaults} from './blocks/testimonial/testimonial-group'
 export type {TestimonialItemAttributes} from './blocks/testimonial/testimonial-item'
@@ -82,7 +90,6 @@ export type {ColumnItemAttributes, ColumnItemOptions} from './blocks/column/colu
 export {createColumnItemBlock, columnItemDefaults} from './blocks/column/column-item'
 export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './blocks/sections/base-section'
 export {
-  BACKGROUNDS,
   baseAttributes,
   baseSectionDefaults,
   createBaseSectionBlock,
@@ -122,3 +129,5 @@ export type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './bl
 export {createResponsiveGridItemBlock, responsiveGridItemDefaults} from './blocks/responsive-grid/responsive-grid-item'
 export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './blocks/post/post-slider-group'
 export {createPostSliderGroupBlock, postSliderGroupDefaults} from './blocks/post/post-slider-group'
+export type {LinkItemAttributes, LinkItemIcon, LinkItemOptions} from './blocks/link/link-item'
+export {createLinkItemBlock, linkItemDefaults} from './blocks/link/link-item'

package/src/types.ts

@@ -1,4 +1,5 @@
 import {BlockTypeIconDescriptor} from '@wordpress/blocks'
+
 export interface SelectOption {
   value: string
   label: string
@@ -7,6 +8,7 @@ export interface SelectOption {
 export interface Media {
   id: number
   alt: string
+  mimeType?: string
 }
 
 export interface Icon {
@@ -26,6 +28,7 @@ export interface BriloBlockType {
   category?: string
   allowedBlocks?: string[]
   template?: [string, Record<string, unknown>][]
+  attributes?: Record<string, unknown>
   blockClassName?: string
   containerClassName?: string
   icon?: BlockTypeIconDescriptor