@brilo/base-blocks 0.1.8 → 0.1.10

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

@@ -13,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";
@@ -30,6 +32,8 @@
 @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";

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'
@@ -91,8 +99,10 @@ export {
 } from './blocks/sections/base-section'
 export type {IconType} from './components/IconControl'
 export {IconControl} from './components/IconControl'
+export * from './components/ItemIconControl'
 export type {ImageLabels, ImageValue} from './components/ImagePicker'
 export {ImagePickerBody, ImagePickerControl, useMediaUrl} from './components/ImagePicker'
+export type {Icon, Media} from './types'
 export type {GroupBlockConfig} from './hooks/useGroupBlock'
 export {useGroupBlock} from './hooks/useGroupBlock'
 export type {TypedEditComponent} from './utils/createEditAdapter'

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