@brilo/base-blocks 0.1.51 → 0.1.53

package/src/blocks/layout/box/constants.ts

@@ -0,0 +1,19 @@
+import {__} from '@wordpress/i18n'
+import {justifyBottom, justifyLeft, justifyRight, justifyTop} from '@wordpress/icons'
+import type {ReactElement} from 'react'
+import type {BoxSpacingSide} from './types'
+
+/** Sides shared by the padding and margin panels, in CSS shorthand order. */
+export const BOX_SPACING_SIDES: readonly {value: BoxSpacingSide; label: string; icon: ReactElement}[] = [
+  {value: 'top', label: __('Nahoře', 'brilo-blocks'), icon: justifyTop},
+  {value: 'right', label: __('Vpravo', 'brilo-blocks'), icon: justifyRight},
+  {value: 'bottom', label: __('Dole', 'brilo-blocks'), icon: justifyBottom},
+  {value: 'left', label: __('Vlevo', 'brilo-blocks'), icon: justifyLeft},
+] as const
+
+// All box lengths are plain pixel numbers — the same convention as the shared
+// `spacing` attribute — so the editor needs no unit picker and the template
+// appends the unit.
+export const BOX_SPACING_MAX = 120
+export const BOX_BORDER_WIDTH_MAX = 20
+export const BOX_BORDER_RADIUS_MAX = 64

package/src/blocks/layout/box/controls.tsx

@@ -1,43 +1,55 @@
-import * as blockEditor from '@wordpress/block-editor'
 import {ColorPalette, ContrastChecker} from '@wordpress/block-editor'
-import {BoxControl, PanelBody, __experimentalUnitControl as UnitControl} from '@wordpress/components'
+import {PanelBody, RangeControl} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
-import type {ComponentType} from 'react'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
-import type {BoxAttributes, BoxBorderRadius} from './types'
-
-// `__experimentalBorderRadiusControl` is a real runtime export of @wordpress/block-editor (see
-// packages/block-editor/src/components/border-radius-control) but isn't covered by the community
-// @types/wordpress__block-editor typings, so it's pulled off the namespace import and cast by hand.
-interface BorderRadiusControlProps {
-  values?: string | BoxBorderRadius
-  onChange: (next: string | BoxBorderRadius | undefined) => void
-}
-const BorderRadiusControl = (blockEditor as unknown as {__experimentalBorderRadiusControl: ComponentType<BorderRadiusControlProps>})
-  .__experimentalBorderRadiusControl
+import {BOX_BORDER_RADIUS_MAX, BOX_BORDER_WIDTH_MAX, BOX_SPACING_MAX, BOX_SPACING_SIDES} from './constants'
+import type {BoxAttributes, BoxSpacing} from './types'
 
 interface BoxControlsProps {
   attributes: BoxAttributes
   setAttributes: (attrs: Partial<BoxAttributes>) => void
 }
 
+function SpacingPanel({title, values, onChange}: {title: string; values: BoxSpacing; onChange: (next: BoxSpacing) => void}) {
+  return (
+    <PanelBody title={title}>
+      {BOX_SPACING_SIDES.map((side) => (
+        <RangeControl
+          key={side.value}
+          label={side.label}
+          beforeIcon={side.icon}
+          value={values?.[side.value]}
+          onChange={(v) => onChange({...values, [side.value]: v})}
+          min={0}
+          max={BOX_SPACING_MAX}
+          step={1}
+          allowReset
+          withInputField
+        />
+      ))}
+    </PanelBody>
+  )
+}
+
 export function BoxControls({attributes, setAttributes}: BoxControlsProps) {
   const {padding, margin, borderRadius, borderWidth, borderColor, background, textColor} = attributes
   const {paletteColors, resolveHex} = useTenantColorPalette()
 
   return (
     <>
-      <PanelBody title={__('Rozestupy', 'brilo-blocks')}>
-        <BoxControl label={__('Padding', 'brilo-blocks')} values={padding} onChange={(next) => setAttributes({padding: next})} />
-        <BoxControl label={__('Margin', 'brilo-blocks')} values={margin} onChange={(next) => setAttributes({margin: next})} />
-      </PanelBody>
+      <SpacingPanel title={__('Padding', 'brilo-blocks')} values={padding} onChange={(next) => setAttributes({padding: next})} />
+      <SpacingPanel title={__('Margin', 'brilo-blocks')} values={margin} onChange={(next) => setAttributes({margin: next})} />
 
       <PanelBody title={__('Ohraničení', 'brilo-blocks')}>
-        <UnitControl
+        <RangeControl
           label={__('Šířka okraje', 'brilo-blocks')}
           value={borderWidth}
+          onChange={(v) => setAttributes({borderWidth: v ?? 0})}
           min={0}
-          onChange={(next) => setAttributes({borderWidth: (next as string) ?? ''})}
+          max={BOX_BORDER_WIDTH_MAX}
+          step={1}
+          allowReset
+          withInputField
         />
         <p>{__('Barva okraje', 'brilo-blocks')}</p>
         <ColorPalette
@@ -45,7 +57,16 @@ export function BoxControls({attributes, setAttributes}: BoxControlsProps) {
           value={borderColor || undefined}
           onChange={(value) => setAttributes({borderColor: value ?? ''})}
         />
-        <BorderRadiusControl values={borderRadius} onChange={(next) => setAttributes({borderRadius: next ?? ''})} />
+        <RangeControl
+          label={__('Zaoblení rohů', 'brilo-blocks')}
+          value={borderRadius}
+          onChange={(v) => setAttributes({borderRadius: v ?? 0})}
+          min={0}
+          max={BOX_BORDER_RADIUS_MAX}
+          step={1}
+          allowReset
+          withInputField
+        />
       </PanelBody>
 
       <PanelBody title={__('Barvy', 'brilo-blocks')}>

package/src/blocks/layout/box/deprecated.tsx

@@ -0,0 +1,146 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BoxSpacing, BoxSpacingSide} from './types'
+
+/**
+ * v1 stored every length as a CSS string (`"16px"`, `"1rem"`) and allowed a
+ * per-corner `borderRadius` object. v2 stores plain pixel numbers, so posts
+ * saved by v1 have to be migrated — the save output is unchanged
+ * (`<InnerBlocks.Content />`), which means block validation never fails and
+ * would otherwise leave the legacy values in place, silently rendering
+ * `16pxpx`. `isEligible` is what forces the migration.
+ */
+
+const BOX_SIDES: readonly BoxSpacingSide[] = ['top', 'right', 'bottom', 'left']
+
+interface LegacySpacing {
+  top?: string
+  right?: string
+  bottom?: string
+  left?: string
+}
+
+interface LegacyBorderRadius {
+  topLeft?: string
+  topRight?: string
+  bottomLeft?: string
+  bottomRight?: string
+}
+
+export interface LegacyBoxAttributes extends Record<string, unknown> {
+  padding: LegacySpacing
+  margin: LegacySpacing
+  borderRadius: string | LegacyBorderRadius
+  borderWidth: string
+  borderColor: string
+  background: string
+  textColor: string
+}
+
+/**
+ * Parses a v1 CSS length into pixels. `rem`/`em` are approximated at the
+ * 16px browser default; anything else unitless-or-px is taken at face value.
+ * Unparseable values become 0, which renders as "no declaration".
+ */
+function toPixels(value: unknown): number {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : 0
+  }
+
+  if (typeof value !== 'string') {
+    return 0
+  }
+
+  const match = value.trim().match(/^(-?\d*\.?\d+)\s*(px|rem|em)?$/)
+
+  if (!match) {
+    return 0
+  }
+
+  const amount = Number.parseFloat(match[1])
+
+  if (!Number.isFinite(amount)) {
+    return 0
+  }
+
+  return match[2] === 'rem' || match[2] === 'em' ? Math.round(amount * 16) : Math.round(amount)
+}
+
+function migrateSpacing(spacing: LegacySpacing | undefined): BoxSpacing {
+  const next: BoxSpacing = {}
+
+  for (const side of BOX_SIDES) {
+    const pixels = toPixels(spacing?.[side])
+
+    if (pixels !== 0) {
+      next[side] = pixels
+    }
+  }
+
+  return next
+}
+
+/**
+ * v1 could set each corner separately; v2 has a single radius. The first
+ * non-zero corner wins — lossy by design, and only for content that actually
+ * used per-corner radii.
+ */
+function migrateBorderRadius(radius: string | LegacyBorderRadius | undefined): number {
+  if (radius && typeof radius === 'object') {
+    for (const corner of ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'] as const) {
+      const pixels = toPixels(radius[corner])
+
+      if (pixels !== 0) {
+        return pixels
+      }
+    }
+
+    return 0
+  }
+
+  return toPixels(radius)
+}
+
+/** A v1 value still needing conversion: a non-empty string, or a corner object. */
+function isLegacyLength(value: unknown): boolean {
+  return (typeof value === 'string' && value !== '') || (!!value && typeof value === 'object')
+}
+
+function hasLegacyLengths(attributes: LegacyBoxAttributes): boolean {
+  for (const spacing of [attributes.padding, attributes.margin]) {
+    for (const side of BOX_SIDES) {
+      if (isLegacyLength(spacing?.[side])) {
+        return true
+      }
+    }
+  }
+
+  return isLegacyLength(attributes.borderWidth) || isLegacyLength(attributes.borderRadius)
+}
+
+export const boxDeprecated = [
+  {
+    attributes: {
+      padding: {type: 'object', default: {}},
+      margin: {type: 'object', default: {}},
+      borderRadius: {type: ['string', 'object'], default: ''},
+      borderWidth: {type: 'string', default: ''},
+      borderColor: {type: 'string', default: ''},
+      background: {type: 'string', default: ''},
+      textColor: {type: 'string', default: ''},
+    },
+    supports: {html: false, customClassName: false},
+    isEligible: (attributes: Record<string, unknown>) => hasLegacyLengths(attributes as LegacyBoxAttributes),
+    migrate: (attributes: Record<string, unknown>) => {
+      const legacy = attributes as LegacyBoxAttributes
+
+      return {
+        ...legacy,
+        padding: migrateSpacing(legacy.padding),
+        margin: migrateSpacing(legacy.margin),
+        borderRadius: migrateBorderRadius(legacy.borderRadius),
+        borderWidth: toPixels(legacy.borderWidth),
+      }
+    },
+    save: () => <InnerBlocks.Content />,
+  },
+]

package/src/blocks/layout/box/edit.tsx

@@ -4,29 +4,26 @@ import type {CSSProperties} from 'react'
 import {BoxControls} from './controls'
 import type {BoxAttributes, BoxOptions} from './types'
 
+/** Lengths are stored as plain pixel numbers; the unit is added on render. */
+function px(value: number | undefined): string | undefined {
+  return typeof value === 'number' && value !== 0 ? `${value}px` : undefined
+}
+
 export function createBoxEdit(options: BoxOptions) {
   return function Edit({attributes, setAttributes}: BlockEditProps<BoxAttributes>) {
     const {padding, margin, borderRadius, borderWidth, borderColor, background, textColor} = attributes
 
     const style: CSSProperties = {
-      ...(padding?.top && {paddingTop: padding.top}),
-      ...(padding?.right && {paddingRight: padding.right}),
-      ...(padding?.bottom && {paddingBottom: padding.bottom}),
-      ...(padding?.left && {paddingLeft: padding.left}),
-      ...(margin?.top && {marginTop: margin.top}),
-      ...(margin?.right && {marginRight: margin.right}),
-      ...(margin?.bottom && {marginBottom: margin.bottom}),
-      ...(margin?.left && {marginLeft: margin.left}),
-      ...(typeof borderRadius === 'string' && borderRadius && {borderRadius}),
-      ...(typeof borderRadius === 'object' && borderRadius !== null
-        ? {
-            ...(borderRadius.topLeft && {borderTopLeftRadius: borderRadius.topLeft}),
-            ...(borderRadius.topRight && {borderTopRightRadius: borderRadius.topRight}),
-            ...(borderRadius.bottomLeft && {borderBottomLeftRadius: borderRadius.bottomLeft}),
-            ...(borderRadius.bottomRight && {borderBottomRightRadius: borderRadius.bottomRight}),
-          }
-        : {}),
-      ...(borderWidth && {borderWidth, borderStyle: 'solid' as CSSProperties['borderStyle']}),
+      ...(px(padding?.top) && {paddingTop: px(padding?.top)}),
+      ...(px(padding?.right) && {paddingRight: px(padding?.right)}),
+      ...(px(padding?.bottom) && {paddingBottom: px(padding?.bottom)}),
+      ...(px(padding?.left) && {paddingLeft: px(padding?.left)}),
+      ...(px(margin?.top) && {marginTop: px(margin?.top)}),
+      ...(px(margin?.right) && {marginRight: px(margin?.right)}),
+      ...(px(margin?.bottom) && {marginBottom: px(margin?.bottom)}),
+      ...(px(margin?.left) && {marginLeft: px(margin?.left)}),
+      ...(px(borderRadius) && {borderRadius: px(borderRadius)}),
+      ...(px(borderWidth) && {borderWidth: px(borderWidth), borderStyle: 'solid' as CSSProperties['borderStyle']}),
       ...(borderColor && {borderColor}),
       ...(background && {backgroundColor: background}),
       ...(textColor && {color: textColor}),

package/src/blocks/layout/box/factory.tsx

@@ -1,6 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import {boxDeprecated} from './deprecated'
 import {createBoxEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {BoxAttributes, BoxOptions} from './types'
@@ -19,12 +20,13 @@ export function createBoxBlock(options: BoxOptions): BlockConfiguration<BoxAttri
     attributes: {
       padding: {type: 'object', default: {}},
       margin: {type: 'object', default: {}},
-      borderRadius: {type: ['string', 'object'], default: ''},
-      borderWidth: {type: 'string', default: ''},
+      borderRadius: {type: 'number', default: 0},
+      borderWidth: {type: 'number', default: 0},
       borderColor: {type: 'string', default: ''},
       background: {type: 'string', default: ''},
       textColor: {type: 'string', default: ''},
     },
+    deprecated: boxDeprecated,
     edit: createBoxEdit(options),
     save: () => <InnerBlocks.Content />,
   } as BlockConfiguration<BoxAttributes>

package/src/blocks/layout/box/index.ts

@@ -1,4 +1,4 @@
-export type {BoxAttributes, BoxBorderRadius, BoxOptions, BoxSpacing} from './types'
+export type {BoxAttributes, BoxOptions, BoxSpacing, BoxSpacingSide} from './types'
 export {createBoxBlock} from './factory'
 
 import type {BoxOptions} from './types'

package/src/blocks/layout/box/types.ts

@@ -1,24 +1,15 @@
 import type {BriloBlockType} from '~/types'
 
-export interface BoxSpacing {
-  top?: string
-  right?: string
-  bottom?: string
-  left?: string
-}
+export type BoxSpacingSide = 'top' | 'right' | 'bottom' | 'left'
 
-export interface BoxBorderRadius {
-  topLeft?: string
-  topRight?: string
-  bottomLeft?: string
-  bottomRight?: string
-}
+/** Per-side spacing in pixels. An unset side means "no declaration". */
+export type BoxSpacing = Partial<Record<BoxSpacingSide, number>>
 
 export interface BoxAttributes extends Record<string, unknown> {
   padding: BoxSpacing
   margin: BoxSpacing
-  borderRadius: string | BoxBorderRadius
-  borderWidth: string
+  borderRadius: number
+  borderWidth: number
   borderColor: string
   background: string
   textColor: string

package/src/components/SurfaceStyleControl/index.tsx

@@ -0,0 +1,114 @@
+import {
+  BaseControl,
+  ColorPalette,
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+
+/**
+ * Shadow presets shared by every "surface" block (accordion, faq, ...). The
+ * `DEFAULT_` prefix marks it as tenant-overridable — pass your own array as
+ * `options.shadows` and the factory/edit resolve it with `??`.
+ */
+export const DEFAULT_SURFACE_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export type SurfaceShadow = (typeof DEFAULT_SURFACE_SHADOWS)[number]['value']
+
+export interface SurfaceShadowOption {
+  value: string
+  label: string
+}
+
+/**
+ * The shadow + colour quartet that group blocks hand down to their items. Kept
+ * as one named type so the shape lives in a single place across TS, PHP and twig.
+ */
+export interface SurfaceStyle<TShadow extends string = SurfaceShadow> {
+  shadow: TShadow
+  borderColor: string
+  backgroundColor: string
+  textColor: string
+}
+
+/** Attribute default for a `style` object holding a {@link SurfaceStyle}. */
+export function surfaceStyleAttribute(shadows: readonly SurfaceShadowOption[] = DEFAULT_SURFACE_SHADOWS) {
+  return {
+    type: 'object',
+    default: {
+      shadow: shadows[0]?.value ?? 'none',
+      borderColor: '',
+      backgroundColor: '',
+      textColor: '',
+    },
+  } as const
+}
+
+/**
+ * Inspector panel for {@link SurfaceStyle}. `idPrefix` keeps the `BaseControl`
+ * ids unique per block (`faq-group`, `accordion-group`, ...).
+ */
+export function SurfaceStylePanel<TStyle extends SurfaceStyle<string>>({
+  style,
+  onChange,
+  idPrefix,
+  shadows = DEFAULT_SURFACE_SHADOWS,
+  title = __('Styl', 'brilo-blocks'),
+  children,
+}: {
+  style: TStyle
+  onChange: (style: TStyle) => void
+  idPrefix: string
+  shadows?: readonly SurfaceShadowOption[]
+  title?: string
+  children?: React.ReactNode
+}) {
+  const {paletteColors} = useTenantColorPalette()
+
+  return (
+    <PanelBody title={title}>
+      <ToggleGroupControl
+        isBlock
+        label={__('Stín', 'brilo-blocks')}
+        value={style.shadow}
+        onChange={(value) => onChange({...style, shadow: value as TStyle['shadow']})}
+      >
+        {shadows.map((shadow) => (
+          <ToggleGroupControlOption key={shadow.value} value={shadow.value} label={shadow.label} />
+        ))}
+      </ToggleGroupControl>
+      <BaseControl
+        label={__('Barva okraje', 'brilo-blocks')}
+        help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+        id={`${idPrefix}-border-color`}
+      >
+        <ColorPalette
+          colors={paletteColors}
+          value={style.borderColor || undefined}
+          onChange={(value) => onChange({...style, borderColor: value ?? ''})}
+        />
+      </BaseControl>
+      <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id={`${idPrefix}-background-color`}>
+        <ColorPalette
+          colors={paletteColors}
+          value={style.backgroundColor || undefined}
+          onChange={(value) => onChange({...style, backgroundColor: value ?? ''})}
+        />
+      </BaseControl>
+      <BaseControl label={__('Barva textu', 'brilo-blocks')} id={`${idPrefix}-text-color`}>
+        <ColorPalette
+          colors={paletteColors}
+          value={style.textColor || undefined}
+          onChange={(value) => onChange({...style, textColor: value ?? ''})}
+        />
+      </BaseControl>
+      {children}
+    </PanelBody>
+  )
+}

package/src/index.ts

@@ -41,8 +41,14 @@ export {
 } from './blocks/contact/contact-item'
 export type {AccordionItemAttributes, AccordionItemOptions} from './blocks/accordion/accordion-item'
 export {accordionItemDefaults, createAccordionItemBlock} from './blocks/accordion/accordion-item'
-export type {AccordionGroupAttributes, AccordionGroupOptions, AccordionHeadingLevel} from './blocks/accordion/accordion-group'
-export {accordionGroupDefaults, createAccordionGroupBlock} from './blocks/accordion/accordion-group'
+export type {
+  AccordionGroupAttributes,
+  AccordionGroupOptions,
+  AccordionHeadingLevel,
+  AccordionShadow,
+  ExcludableAccordionAttr,
+} from './blocks/accordion/accordion-group'
+export {ACCORDION_HEADING_LEVELS, accordionGroupDefaults, createAccordionGroupBlock} from './blocks/accordion/accordion-group'
 export type {FaqItemAttributes, FaqItemOptions} from './blocks/faq/faq-item'
 export {createFaqItemBlock, faqItemDefaults} from './blocks/faq/faq-item'
 export type {FaqGroupAttributes, FaqGroupOptions} from './blocks/faq/faq-group'
@@ -129,6 +135,8 @@ export {
   SPACING_POSITIONS,
   SPACING_SIZES,
 } from './blocks/sections/base-section'
+export type {SurfaceShadow, SurfaceShadowOption, SurfaceStyle} from './components/SurfaceStyleControl'
+export {DEFAULT_SURFACE_SHADOWS, SurfaceStylePanel, surfaceStyleAttribute} from './components/SurfaceStyleControl'
 export type {IconType} from './components/IconControl'
 export {IconControl} from './components/IconControl'
 export * from './components/ItemIconControl'
@@ -241,7 +249,7 @@ export type {PostContentAttributes, PostContentOptions} from './blocks/post/post
 export {createPostContentBlock, postContentDefaults} from './blocks/post/post-content'
 export type {ShareAttributes, ShareOptions} from './blocks/share/share'
 export {createShareBlock, shareDefaults} from './blocks/share/share'
-export type {BoxAttributes, BoxBorderRadius, BoxOptions, BoxSpacing} from './blocks/layout/box'
+export type {BoxAttributes, BoxOptions, BoxSpacing, BoxSpacingSide} from './blocks/layout/box'
 export {createBoxBlock, boxDefaults} from './blocks/layout/box'
 export type {PriceplanGroupAttributes, PriceplanGroupOptions} from './blocks/priceplan/priceplan-group'
 export {createPriceplanGroupBlock, priceplanGroupDefaults} from './blocks/priceplan/priceplan-group'