@brilo/base-blocks 0.1.54 → 0.1.56

package/src/blocks/groups/basic-header-group/factory.tsx

@@ -1,4 +1,5 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
+import {withObjectDefaults} from '~/utils/withObjectDefaults'
 import {__} from '@wordpress/i18n'
 import type {NumberArray, OptionArray, StringArray} from '~/types'
 import {DEFAULT_ALIGNMENTS, DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
@@ -40,7 +41,7 @@ export function createBasicHeaderGroupBlock<
         enum: alignments.map((a) => a.value),
       },
     },
-    edit: createBasicHeaderGroupEdit(options as unknown as BasicHeaderGroupOptions),
+    edit: withObjectDefaults(createBasicHeaderGroupEdit(options as unknown as BasicHeaderGroupOptions)),
     save: () => null,
   } as unknown as BlockConfiguration<BasicHeaderGroupAttributes<TLevels[number], TStyles[number], TAlignments[number]['value']>>
 }

package/src/blocks/groups/content-group/index.ts

@@ -20,6 +20,6 @@ export const contentGroupDefaults: ContentGroupOptions = {
     'core/embed',
     'core/video',
     'core/file',
-    'brilo/link',
+    'brilo/link-item',
   ],
 }

package/src/blocks/groups/text-and-media-group/factory.tsx

@@ -1,4 +1,5 @@
 import {InnerBlocks} from '@wordpress/block-editor'
+import {withObjectDefaults} from '~/utils/withObjectDefaults'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {OptionArray} from '~/types'
@@ -90,7 +91,7 @@ export function createTextAndMediaGroupBlock<
       },
       content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
     },
-    edit: createTextAndMediaGroupEdit(options as unknown as TextAndMediaGroupOptions),
+    edit: withObjectDefaults(createTextAndMediaGroupEdit(options as unknown as TextAndMediaGroupOptions)),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<
     TextAndMediaGroupAttributes<

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

@@ -1,4 +1,5 @@
 import {InspectorControls, RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import type {BlockEditProps} from '@wordpress/blocks'
 import {
   PanelBody,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -18,13 +19,8 @@ import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import clsx from 'clsx'
 
 export function createHeroItemEdit(options: HeroItemOptions) {
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: HeroItemAttributes
-    setAttributes: (a: Partial<HeroItemAttributes>) => void
-  }) {
+  return function Edit(props: BlockEditProps<HeroItemAttributes>) {
+    const {attributes, setAttributes} = props
     const {title, titleColor, img, headingLevel, contentPosition, url, focalPoint, overline} = attributes
     const {paletteColors} = useTenantColorPalette()
 
@@ -110,6 +106,7 @@ export function createHeroItemEdit(options: HeroItemOptions) {
               onChange={(v) => setAttributes({url: {...url, blank: v}})}
             />
           </PanelBody>
+          {options.extraControls?.(props as unknown as Parameters<NonNullable<typeof options.extraControls>>[0])}
         </InspectorControls>
 
         <div {...blockProps}>

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

@@ -7,7 +7,9 @@ import {InnerBlocks} from '@wordpress/block-editor'
 
 export type {HeroItemAttributes, HeroItemOptions}
 
-export function createHeroItemBlock(options: HeroItemOptions): BlockConfiguration<HeroItemAttributes> {
+export function createHeroItemBlock<TExtra extends Record<string, unknown> = Record<string, never>>(
+  options: HeroItemOptions<TExtra>,
+): BlockConfiguration<HeroItemAttributes & TExtra> {
   const contentPositions = options.contentPositions ?? CONTENT_POSITIONS
 
   return {
@@ -44,8 +46,9 @@ export function createHeroItemBlock(options: HeroItemOptions): BlockConfiguratio
         type: 'object',
         default: {point: 'center center', sm: {point: 'center center'}},
       },
+      ...options.extraAttributes,
     },
-    edit: createHeroItemEdit(options),
+    edit: createHeroItemEdit(options as unknown as HeroItemOptions),
     save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<HeroItemAttributes>
+  } as unknown as BlockConfiguration<HeroItemAttributes & TExtra>
 }

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

@@ -1,3 +1,5 @@
+import type {BlockEditProps} from '@wordpress/blocks'
+import type {ReactNode} from 'react'
 import type {BriloBlockType, Media, OptionArray} from '~/types'
 import type {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
 
@@ -36,6 +38,13 @@ export interface HeroItemAttributes extends Record<string, unknown> {
   focalPoint: HeroItemFocalPoint
 }
 
-export interface HeroItemOptions extends BriloBlockType {
+export interface HeroItemOptions<TExtra extends Record<string, unknown> = Record<string, never>> extends BriloBlockType {
   contentPositions?: OptionArray
+  extraAttributes?: {
+    [K in keyof TExtra]: {
+      type: string
+      default: TExtra[K]
+    }
+  }
+  extraControls?: (props: BlockEditProps<HeroItemAttributes & TExtra>) => ReactNode
 }

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

@@ -1,4 +1,5 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
+import {withObjectDefaults} from '~/utils/withObjectDefaults'
 import {__} from '@wordpress/i18n'
 import {createMapGroupEdit} from './edit'
 import type {MapGroupAttributes, MapGroupOptions} from './types'
@@ -67,7 +68,7 @@ export function createMapGroupBlock<THeadingStyles extends StringArray = typeof
         default: '',
       },
     },
-    edit: createMapGroupEdit(options as unknown as MapGroupOptions),
+    edit: withObjectDefaults(createMapGroupEdit(options as unknown as MapGroupOptions)),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<MapGroupAttributes<THeadingStyles[number]>>
 }

package/src/blocks/newsletter/newsletter-form/factory.tsx

@@ -1,4 +1,5 @@
 import type {BlockConfiguration} from '@wordpress/blocks'
+import {withObjectDefaults} from '~/utils/withObjectDefaults'
 import {__} from '@wordpress/i18n'
 import {DEFAULT_HEADING_STYLES, NEWSLETTER_LEVELS} from './constants'
 import {createNewsletterFormEdit} from './edit'
@@ -53,7 +54,7 @@ export function createNewsletterFormBlock(options: NewsletterFormOptions): Block
         },
       },
     },
-    edit: createNewsletterFormEdit(options),
+    edit: withObjectDefaults(createNewsletterFormEdit(options)),
     save: () => null,
   } as unknown as BlockConfiguration<NewsletterFormAttributes>
 }

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

@@ -9,7 +9,8 @@ export function createTestimonialItemBlock(
   return {
     name: options.name,
     title: options.title ?? __('Reference - položka', 'brilo-blocks'),
-    category: options.category ?? 'brilo',
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
     supports: {html: false, customClassName: false},
     attributes: {
       title: {

package/src/blocks/text-and-form/text-and-form-text-column/factory.tsx

@@ -1,4 +1,5 @@
 import {InnerBlocks} from '@wordpress/block-editor'
+import {withObjectDefaults} from '~/utils/withObjectDefaults'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {OptionArray} from '~/types'
@@ -35,7 +36,7 @@ export function createTextAndFormTextColumnBlock<
       },
       content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
     },
-    edit: createTextAndFormTextColumnEdit(options as unknown as TextAndFormTextColumnOptions),
+    edit: withObjectDefaults(createTextAndFormTextColumnEdit(options as unknown as TextAndFormTextColumnOptions)),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<TextAndFormTextColumnAttributes<THeadingStyles[number]['value'], TContentSizes[number]['value']>>
 }

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

@@ -1,4 +1,5 @@
 import {InnerBlocks} from '@wordpress/block-editor'
+import {withObjectDefaults} from '~/utils/withObjectDefaults'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
@@ -94,7 +95,7 @@ export function createUspGroupBlock<
       },
       ...ITEM_SPACING_ATTRIBUTE,
     },
-    edit: createUspGroupEdit(options as unknown as UspGroupOptions),
+    edit: withObjectDefaults(createUspGroupEdit(options as unknown as UspGroupOptions)),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<
     UspGroupAttributes<

package/src/utils/withObjectDefaults.tsx

@@ -0,0 +1,37 @@
+import {getBlockType} from '@wordpress/blocks'
+import {useMemo} from '@wordpress/element'
+import type {ComponentType} from 'react'
+
+type PlainObject = Record<string, unknown>
+
+const isPlainObject = (value: unknown): value is PlainObject => typeof value === 'object' && value !== null && !Array.isArray(value)
+
+// keys present in the value win, missing ones are taken from the fallback (recursively)
+function mergeMissing(fallback: unknown, value: unknown): unknown {
+  if (value === undefined) return fallback
+  if (!isPlainObject(fallback) || !isPlainObject(value)) return value
+  const merged: PlainObject = {...value}
+  for (const [key, fallbackValue] of Object.entries(fallback)) merged[key] = mergeMissing(fallbackValue, value[key])
+  return merged
+}
+
+/**
+ * Block markup can carry partial object attributes (e.g. generated content) and WP does not deep-merge
+ * them with the attribute default, so edit code reading nested keys would crash. Fills the missing
+ * nested keys from the registered defaults before the edit component reads them.
+ */
+export function withObjectDefaults<Props extends {attributes: PlainObject}>(Edit: ComponentType<Props>) {
+  return function EditWithObjectDefaults(props: Props) {
+    const {name} = props as Props & {name?: string}
+    const attributes = useMemo(() => {
+      const definitions = (name ? getBlockType(name)?.attributes : undefined) ?? {}
+      const filled: PlainObject = {...props.attributes}
+      for (const [key, definition] of Object.entries(definitions as Record<string, {type?: unknown; default?: unknown}>)) {
+        if (definition.type === 'object' && isPlainObject(definition.default)) filled[key] = mergeMissing(definition.default, filled[key])
+      }
+      return filled as Props['attributes']
+    }, [name, props.attributes])
+
+    return <Edit {...props} attributes={attributes} />
+  }
+}