@brilo/base-blocks 0.1.20 → 0.1.22

package/src/blocks/form/form-field/normalizeOptions.ts

@@ -0,0 +1,58 @@
+export type PersistedOption = string | {label?: unknown; value?: unknown; email?: unknown}
+
+export type OptionRow = {
+  id: string
+  label: string
+  value: string
+  email: string
+}
+
+function makeId(): string {
+  return typeof crypto !== 'undefined' && 'randomUUID' in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
+}
+
+export function normalizeOptions(options: unknown): OptionRow[] {
+  if (!Array.isArray(options)) {
+    return []
+  }
+
+  return (options as PersistedOption[])
+    .map((option): OptionRow | null => {
+      if (typeof option === 'string') {
+        return option === '' ? null : {id: makeId(), label: option, value: '', email: ''}
+      }
+
+      if (option && typeof option === 'object') {
+        const label = typeof option.label === 'string' ? option.label : ''
+        const value = typeof option.value === 'string' ? option.value : ''
+        const email = typeof option.email === 'string' ? option.email : ''
+
+        if (label === '') {
+          return null
+        }
+
+        return {id: makeId(), label, value, email}
+      }
+
+      return null
+    })
+    .filter((row): row is OptionRow => row !== null)
+}
+
+export function serializeOptions(rows: OptionRow[]): Array<{label: string; value?: string; email?: string}> {
+  return rows
+    .filter((row) => row.label.trim() !== '')
+    .map((row) => {
+      const option: {label: string; value?: string; email?: string} = {label: row.label}
+
+      if (row.value.trim() !== '') {
+        option.value = row.value.trim()
+      }
+
+      if (row.email.trim() !== '') {
+        option.email = row.email.trim()
+      }
+
+      return option
+    })
+}

package/src/blocks/form/form-field/types.ts

@@ -1,8 +1,11 @@
-import {FIELD_TEXT_TYPES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES} from './constants'
+import {FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES} from './constants'
 import type {BriloBlockType} from '~/types'
 
 export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number]
 export type FormFieldTextType = (typeof FIELD_TEXT_TYPE_VALUES)[number]
+export type FormFieldSelectMode = (typeof FIELD_SELECT_MODE_VALUES)[number]
+
+export type FormFieldOption = string | {label?: string; value?: string; email?: string}
 
 export interface FormFieldAttributes extends Record<string, unknown> {
   type: FormFieldType
@@ -12,7 +15,8 @@ export interface FormFieldAttributes extends Record<string, unknown> {
   name: string
   placeholder: string
   required: boolean
-  options: string[]
+  options: FormFieldOption[]
+  selectMode: FormFieldSelectMode
   defaultValue: string
   value: string
 }

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

@@ -1,6 +1,6 @@
 import {__} from '@wordpress/i18n'
 
-export const COLUMNS = [5, 4, 3, 2] as const
+export const COLUMNS = [4, 3, 2] as const
 export const RATIOS = ['4:3', '3:2', '16:9', '1:1', '2:1', '3:4'] as const
 export const HEADING_LEVELS = [2, 3, 4] as const
 

package/src/blocks/usp/usp-group/editor.scss

@@ -8,11 +8,6 @@
       align-items: flex-start;
     }
 
-    &.--card .i-usp__inner {
-      background: #fff;
-      border-color: #d0d5dd;
-    }
-
     &.--shadow-sm .i-usp__inner {
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
     }

package/src/blocks/usp/usp-item/buildPreviewStyle.ts

@@ -56,7 +56,9 @@ export function buildUspPreviewStyle(shared?: UspSharedStyle, resolveHex: (value
   if (icon.background && icon.background !== 'none') cssVars['--icon-background-color'] = resolveHex(icon.background)
   if (icon.color && icon.color !== 'none') cssVars['--icon-color'] = resolveHex(icon.color)
   if (icon.size) cssVars['--icon-size'] = `${icon.size}px`
-  if (icon.backgroundSize) cssVars['--icon-background-size'] = `${icon.backgroundSize}px`
+  if (icon.background && icon.background !== 'none' && icon.backgroundSize) {
+    cssVars['--icon-background-size'] = `${icon.backgroundSize}px`
+  }
   if (icon.borderColor) {
     cssVars['--icon-outline-color'] = resolveHex(icon.borderColor)
     cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`

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

@@ -3,6 +3,13 @@
   margin-inline: 0;
   text-align: var(--text-align, left);
   border-radius: 4px;
+  --icon-background-size: 0px;
+
+  // Background size only reserves space when a background or outline is actually selected.
+  &.--icon-background,
+  &.--icon-bordered {
+    --icon-background-size: 88px;
+  }
 
   &.--shadow {
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
@@ -59,7 +66,7 @@
 }
 
 .i-usp__icon {
-  --icon-box-size: max(var(--icon-background-size, 88px), var(--icon-size, 88px));
+  --icon-box-size: max(var(--icon-background-size, 0px), var(--icon-size, 88px));
 
   width: var(--icon-box-size);
   height: var(--icon-box-size);
@@ -73,8 +80,8 @@
   &::after {
     content: "";
     grid-area: pile;
-    width: var(--icon-background-size, 88px);
-    height: var(--icon-background-size, 88px);
+    width: var(--icon-background-size, 0px);
+    height: var(--icon-background-size, 0px);
     border-radius: inherit;
     clip-path: var(--icon-background-shape, none);
   }
@@ -86,8 +93,8 @@
 
   &::after {
     z-index: 1;
-    width: calc(var(--icon-background-size, 88px) - var(--icon-outline-width, 0px) * 2);
-    height: calc(var(--icon-background-size, 88px) - var(--icon-outline-width, 0px) * 2);
+    width: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
+    height: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
     background-color: var(--icon-background-color, transparent);
   }