@brilo/base-blocks 0.1.7 → 0.1.8

package/src/blocks/sections/base-section/attributes.ts

@@ -12,6 +12,10 @@ export const baseAttributes = {
   },
   background: {
     type: 'string',
-    default: 'none',
+    default: '',
+  },
+  textColor: {
+    type: 'string',
+    default: '',
   },
 } as const

package/src/blocks/sections/base-section/constants.ts

@@ -8,11 +8,3 @@ export const SPACING_POSITIONS = [
 ] as const
 
 export const SPACING_SIZES = ['default', 'sm', 'xs'] as const
-
-export const BACKGROUNDS = [
-  {value: 'none', label: __('Žádné', 'brilo-blocks')},
-  {value: 'primary', label: __('Primární', 'brilo-blocks')},
-  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
-  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
-  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
-] as const

package/src/blocks/sections/base-section/controls.tsx

@@ -1,3 +1,4 @@
+import {ColorPalette, ContrastChecker} from '@wordpress/block-editor'
 import {
   PanelBody,
   SelectControl,
@@ -6,8 +7,9 @@ import {
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import type {BaseBlockAttributes, ExcludableBaseAttr} from './types'
-import {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+import {SPACING_POSITIONS, SPACING_SIZES} from './constants'
 
 type SpacingPosition = BaseBlockAttributes['spacing']['position']
 type SpacingSize = BaseBlockAttributes['spacing']['size']
@@ -19,7 +21,8 @@ interface BaseControlsProps {
 }
 
 export function BaseControls({attributes, setAttributes, exclude}: BaseControlsProps) {
-  const {id, spacing, background} = attributes
+  const {id, spacing, background, textColor} = attributes
+  const {paletteColors, resolveHex} = useTenantColorPalette()
 
   return (
     <>
@@ -45,13 +48,20 @@ export function BaseControls({attributes, setAttributes, exclude}: BaseControlsP
       )}
 
       {!exclude.includes('background') && (
-        <PanelBody title={__('Pozadí', 'brilo-blocks')}>
-          <SelectControl<string>
-            label={__('Pozadí', 'brilo-blocks')}
-            value={background}
-            options={[...BACKGROUNDS]}
-            onChange={(value) => setAttributes({background: value})}
+        <PanelBody title={__('Barvy', 'brilo-blocks')}>
+          <p>{__('Pozadí', 'brilo-blocks')}</p>
+          <ColorPalette
+            colors={paletteColors}
+            value={background || undefined}
+            onChange={(value) => setAttributes({background: value ?? ''})}
+          />
+          <p>{__('Barva textu', 'brilo-blocks')}</p>
+          <ColorPalette
+            colors={paletteColors}
+            value={textColor || undefined}
+            onChange={(value) => setAttributes({textColor: value ?? ''})}
           />
+          {!!background && !!textColor && <ContrastChecker backgroundColor={resolveHex(background)} textColor={resolveHex(textColor)} />}
         </PanelBody>
       )}
 

package/src/blocks/sections/base-section/edit.tsx

@@ -8,7 +8,14 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
 
   return function Edit(props: BlockEditProps<BaseBlockAttributes & TExtra>) {
     const {attributes, setAttributes} = props
-    const blockProps = useBlockProps({className: options.blockClassName})
+    const {background, textColor} = attributes as BaseBlockAttributes
+    const blockProps = useBlockProps({
+      className: options.blockClassName,
+      style: {
+        ...(background ? {backgroundColor: background, padding: '16px'} : {}),
+        ...(textColor ? {color: textColor} : {}),
+      },
+    })
     const innerBlocksProps = useInnerBlocksProps({className: options.containerClassName}, {
       allowedBlocks: options.allowedBlocks,
       orientation: 'vertical',

package/src/blocks/sections/base-section/factory.tsx

@@ -2,7 +2,6 @@ import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {baseAttributes} from './attributes'
-import {BACKGROUNDS} from './constants'
 import {createBaseSectionEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
@@ -16,12 +15,9 @@ export function createBaseSectionBlock<TExtra extends Record<string, unknown> =
 
   const attributes: Record<string, unknown> = {}
   for (const [key, value] of Object.entries(baseAttributes)) {
-    if (!exclude.includes(key as keyof typeof baseAttributes)) {
-      if (key === 'background') {
-        attributes[key] = {...value, enum: BACKGROUNDS.map((b) => b.value)}
-      } else {
-        attributes[key] = value
-      }
+    const excludeKey: ExcludableBaseAttr = key === 'textColor' ? 'background' : (key as ExcludableBaseAttr)
+    if (!exclude.includes(excludeKey)) {
+      attributes[key] = value
     }
   }
 

package/src/blocks/sections/base-section/index.ts

@@ -1,6 +1,6 @@
 export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './types'
 export {baseAttributes} from './attributes'
-export {BACKGROUNDS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+export {SPACING_POSITIONS, SPACING_SIZES} from './constants'
 export {createBaseSectionEdit} from './edit'
 export {createBaseSectionBlock} from './factory'
 

package/src/blocks/sections/base-section/types.ts

@@ -9,6 +9,7 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
     size: string
   }
   background: string
+  textColor: string
 }
 
 export type ExcludableBaseAttr = 'spacing' | 'background' | 'id'

package/src/editor.scss

@@ -1,5 +1,6 @@
 @forward "./globals";
 @forward "./blocks/column/column-group/editor";
+@forward "./blocks/link/link-item/editor";
 @forward "./blocks/column/column-item/editor";
 @forward "./blocks/compare/compare-item/editor";
 @forward "./blocks/compare/compare-option/editor";
@@ -29,6 +30,7 @@
 @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/responsive-grid/responsive-grid-item/editor";
 @forward "./components/IconControl/editor";
 @forward "./components/ImagePicker/editor";
 @forward "./components/ItemIconControl/editor";

package/src/hooks/useTenantColorPalette.ts

@@ -0,0 +1,21 @@
+import {useSettings} from '@wordpress/block-editor'
+import {useMemo} from '@wordpress/element'
+
+interface PaletteColor {
+  name: string
+  slug: string
+  color: string
+}
+
+export function useTenantColorPalette() {
+  const [rawColors] = useSettings('color.palette')
+  const colors = (rawColors ?? []) as PaletteColor[]
+
+  return useMemo(() => {
+    const paletteColors = colors.map((c) => ({...c, color: `var(--${c.slug})`}))
+    const hexByValue = new Map(colors.map((c) => [`var(--${c.slug})`, c.color]))
+    const resolveHex = (value: string) => hexByValue.get(value) ?? value
+
+    return {paletteColors, resolveHex}
+  }, [colors])
+}

package/src/index.ts

@@ -82,7 +82,6 @@ export type {ColumnItemAttributes, ColumnItemOptions} from './blocks/column/colu
 export {createColumnItemBlock, columnItemDefaults} from './blocks/column/column-item'
 export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './blocks/sections/base-section'
 export {
-  BACKGROUNDS,
   baseAttributes,
   baseSectionDefaults,
   createBaseSectionBlock,
@@ -122,3 +121,5 @@ export type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './bl
 export {createResponsiveGridItemBlock, responsiveGridItemDefaults} from './blocks/responsive-grid/responsive-grid-item'
 export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './blocks/post/post-slider-group'
 export {createPostSliderGroupBlock, postSliderGroupDefaults} from './blocks/post/post-slider-group'
+export type {LinkItemAttributes, LinkItemIcon, LinkItemOptions} from './blocks/link/link-item'
+export {createLinkItemBlock, linkItemDefaults} from './blocks/link/link-item'