@brilo/base-blocks 0.1.8 → 0.1.9

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

@@ -0,0 +1,26 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createGalleryItemEdit} from './edit'
+import type {GalleryItemAttributes, GalleryItemOptions} from './types'
+
+export type {GalleryItemAttributes, GalleryItemOptions}
+
+export function createGalleryItemBlock(options: GalleryItemOptions): BlockConfiguration<GalleryItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Gallery Item', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'format-image',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      img: {
+        type: 'object',
+        default: {id: 0, alt: ''},
+      },
+    },
+    edit: createGalleryItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<GalleryItemAttributes>
+}

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

@@ -0,0 +1,10 @@
+import {GalleryItemOptions} from './types'
+
+export type {GalleryItemAttributes, GalleryItemOptions} from './types'
+export {createGalleryItemBlock} from './factory'
+
+export const galleryItemDefaults: GalleryItemOptions = {
+  name: 'brilo/gallery-item',
+  parent: ['brilo/gallery-group'],
+  template: [],
+}

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

@@ -0,0 +1,7 @@
+import type {BriloBlockType, Media} from '~/types'
+
+export interface GalleryItemAttributes extends Record<string, unknown> {
+  img: Media
+}
+
+export interface GalleryItemOptions extends BriloBlockType {}

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

@@ -22,7 +22,7 @@ export function createLinkItemEdit(options: LinkItemOptions) {
     attributes: LinkItemAttributes
     setAttributes: (a: Partial<LinkItemAttributes>) => void
   }) {
-    const {title, url, icon, color, underline_initial} = attributes
+    const {title, url, icon, color, underline_initial, size} = attributes
     const {paletteColors} = useTenantColorPalette()
     const hasIcon = icon.type !== 'none' && (icon.src || icon.media?.id)
 
@@ -87,6 +87,14 @@ export function createLinkItemEdit(options: LinkItemOptions) {
               checked={underline_initial}
               onChange={(v) => setAttributes({underline_initial: v})}
             />
+            <RangeControl
+              label={__('Velikost textu (px)', 'brilo-blocks')}
+              value={size}
+              onChange={(v) => setAttributes({size: v ?? 16})}
+              min={8}
+              max={80}
+              step={1}
+            />
           </PanelBody>
         </InspectorControls>
 

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

@@ -21,6 +21,7 @@ export function createLinkItemBlock(options: LinkItemOptions): BlockConfiguratio
         default: {type: 'none', src: '', media: {}, position: 'after', size: 24},
       },
       color: {type: 'string', default: ''},
+      size: {type: 'number', default: 16},
       underline_initial: {type: 'boolean', default: false},
     },
     edit: createLinkItemEdit(options),

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

@@ -15,6 +15,7 @@ export interface LinkItemAttributes extends Record<string, unknown> {
   url: {src: string; blank: boolean}
   icon: LinkItemIcon
   color: string
+  size: number
   underline_initial: boolean
 }
 

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

@@ -1,5 +1,5 @@
 import {__} from '@wordpress/i18n'
-import {HEADING_STYLES} from "~/constants";
+import {HEADING_STYLES} from '~/constants'
 
 export const DEFAULT_HEADING_STYLES = HEADING_STYLES
 

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

@@ -1,24 +1,28 @@
 import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
 import {
-  PanelBody, BaseControl, TextControl, SelectControl, TextareaControl,
+  PanelBody,
+  BaseControl,
+  TextControl,
+  SelectControl,
+  TextareaControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {ImagePickerControl} from '~/components/ImagePicker'
 import {MAP_TYPES} from './constants'
 import type {MapGroupAttributes, MapGroupOptions} from './types'
 import {Icon, mapMarker} from '@wordpress/icons'
-import {useGroupBlock} from "~/hooks/useGroupBlock";
-import clsx from "clsx";
-import type {HeadingLevels, HeadingStyles} from "~/blocks/groups/banner-group/types";
-import {HEADING_LEVELS, HEADING_STYLES} from "~/constants";
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import clsx from 'clsx'
+import type {HeadingLevels, HeadingStyles} from '~/blocks/groups/banner-group/types'
+import {HEADING_LEVELS, HEADING_STYLES} from '~/constants'
 
 export function createMapGroupEdit(options: MapGroupOptions) {
   return function Edit({
-                         attributes,
-                         setAttributes,
-                       }: {
+    attributes,
+    setAttributes,
+  }: {
     attributes: MapGroupAttributes
     setAttributes: (a: Partial<MapGroupAttributes>) => void
   }) {
@@ -60,7 +64,7 @@ export function createMapGroupEdit(options: MapGroupOptions) {
               ))}
             </ToggleGroupControl>
           </PanelBody>
-          
+
           <PanelBody title={__('Nastavení mapy', 'brilo-blocks')}>
             <SelectControl
               label={__('Typ mapy', 'brilo-blocks')}

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

@@ -3,15 +3,15 @@ import {__} from '@wordpress/i18n'
 import {createMapGroupEdit} from './edit'
 import type {MapGroupAttributes, MapGroupOptions} from './types'
 import {MAP_TYPES} from './constants'
-import type {StringArray} from "~/types";
-import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from "~/blocks/groups/banner-group/constants";
-import {InnerBlocks} from "@wordpress/block-editor";
-import {HEADING_LEVELS} from "~/constants";
+import type {StringArray} from '~/types'
+import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from '~/blocks/groups/banner-group/constants'
+import {InnerBlocks} from '@wordpress/block-editor'
+import {HEADING_LEVELS} from '~/constants'
 
 export type {MapGroupAttributes, MapGroupOptions}
 
 export function createMapGroupBlock<THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES>(
-  options: MapGroupOptions<THeadingStyles>
+  options: MapGroupOptions<THeadingStyles>,
 ): BlockConfiguration<MapGroupAttributes<THeadingStyles[number]>> {
   const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
 

package/src/blocks/map/map-group/index.ts

@@ -6,5 +6,5 @@ import type {MapGroupOptions} from './types'
 export const mapGroupDefaults: MapGroupOptions = {
   name: 'brilo/map-group',
   parent: ['brilo/base-section'],
-  allowedBlocks: ['brilo/button-group', 'brilo/basic-button']
+  allowedBlocks: ['brilo/button-group', 'brilo/basic-button'],
 }

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

@@ -1,6 +1,6 @@
 import {BriloBlockType, Media, type OptionArray, type StringArray} from '~/types'
 import {DEFAULT_HEADING_STYLES, MAP_TYPES} from './constants'
-import {HEADING_LEVELS} from "~/constants";
+import {HEADING_LEVELS} from '~/constants'
 
 export type MapType = (typeof MAP_TYPES)[number]['value']
 
@@ -22,9 +22,7 @@ export interface MapGroupAttributes<THeadingStyle extends string = HeadingStyles
   long: string
 }
 
-export interface MapGroupOptions<
-  THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES,
-> extends BriloBlockType {
+export interface MapGroupOptions<THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES> extends BriloBlockType {
   headingStyles?: THeadingStyles
   headingLevels?: HeadingLevels
 }

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

@@ -0,0 +1,2 @@
+export const COLUMNS = [4, 3, 2] as const
+export const HEADING_LEVELS = [2, 3, 4] as const

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

@@ -0,0 +1,65 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {COLUMNS, HEADING_LEVELS} from './constants'
+import type {PersonGroupAttributes, PersonGroupOptions} from './types'
+
+export function createPersonGroupEdit(options: PersonGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PersonGroupAttributes
+    setAttributes: (a: Partial<PersonGroupAttributes>) => void
+  }) {
+    const {columns, headingLevel} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-person wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`],
+      containerStyle: {'--grid-max-col-count': columns},
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={String(columns)}
+              onChange={(v) => setAttributes({columns: Number(v) as PersonGroupAttributes['columns']})}
+            >
+              {COLUMNS.map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Úroveň nadpisu položek', 'brilo-blocks')}
+              value={String(headingLevel)}
+              onChange={(v) => setAttributes({headingLevel: Number(v)})}
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {COLUMNS, HEADING_LEVELS} from './constants'
+import {createPersonGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PersonGroupAttributes, PersonGroupOptions} from './types'
+
+export type {PersonGroupAttributes, PersonGroupOptions}
+
+export function createPersonGroupBlock(options: PersonGroupOptions): BlockConfiguration<PersonGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('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: {
+      columns: {
+        type: 'number',
+        default: COLUMNS[1],
+        enum: [...COLUMNS],
+      },
+      headingLevel: {
+        type: 'number',
+        default: HEADING_LEVELS[0],
+        enum: [...HEADING_LEVELS],
+      },
+    },
+    edit: createPersonGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<PersonGroupAttributes>
+}

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

@@ -0,0 +1,14 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2.5" y="1.5" width="15" height="17" stroke="black" fill="none" />
+    <path d="M7 13H13V14H7V13Z" fill="black" />
+    <path d="M6 15H14V16H6V15Z" fill="black" />
+    <path d="M8 6C8 4.89543 8.89543 4 10 4C11.1046 4 12 4.89543 12 6C12 7.10457 11.1046 8 10 8C8.89543 8 8 7.10457 8 6Z" fill="#357AB5" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.99664 11H13.0009C12.9997 9.34295 11.6561 8 9.99875 8C8.34144 8 6.99778 9.34295 6.99664 11Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {PersonGroupAttributes, PersonGroupOptions} from './types'
+export {createPersonGroupBlock} from './factory'
+
+import type {PersonGroupOptions} from './types'
+
+export const personGroupDefaults: PersonGroupOptions = {
+  name: 'brilo/person-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/person-item'],
+  template: [
+    ['brilo/person-item', {}],
+    ['brilo/person-item', {}],
+    ['brilo/person-item', {}],
+  ],
+}

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

@@ -0,0 +1,8 @@
+import {BriloBlockType} from '~/types'
+
+export interface PersonGroupAttributes extends Record<string, unknown> {
+  columns: number
+  headingLevel: number
+}
+
+export interface PersonGroupOptions extends BriloBlockType {}

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

@@ -0,0 +1,4 @@
+import {__} from '@wordpress/i18n'
+
+// No item-specific constants yet, but file is required by anatomy
+export {}

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/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;
     }
   }